Extend the Google Workspace UI

  • Extend the Google Workspace UI to integrate your apps, enhance user productivity, or add new functionalities.

  • Leverage Google Workspace add-ons to embed your app within core Workspace apps like Gmail, Drive, Calendar, Docs, Sheets, and Slides, primarily using card-based or iframe UI.

  • Explore options like Editor add-ons to create custom menus, dialogs, and sidebars in Docs, Sheets, Slides, and Forms using Apps Script with HTML or iframe UI.

  • Utilize Chat apps to interact with users through slash commands, dialogs, and link previews within Google Chat, built with AppSheet, Apps Script, or your own tech stack.

  • Consider specialized extensions such as custom functions and macros for Sheets, Drive apps for Drive integration, and Classroom add-ons for educational enhancements.

This page describes your options for extending the Google Workspace user interface (UI). You can extend the Google Workspace UI for many reasons, including:

  • Integrate your app or service into Google Workspace, so that users can use the app directly from one or more Google Workspace apps. For example, build a Google Workspace add-on that creates smart chips and link previews for your service inside Google Docs.
  • Help Google Workspace users be more productive or improve their workflow. For example, build a Google Chat app that lets users report weekly timesheets directly from Google Chat.
  • Add capabilities that aren't natively available in Google Workspace. For example, add a custom menu in Docs, Google Sheets, or Google Slides.

You can publish most of the options for extending the Google Workspace UI to the Google Workspace Marketplace, an online store where users can find and install third-party apps that integrate with Google Workspace.

Overview of options for extending the Google Workspace UI

The following table lists the options for extending the Google Workspace UI and compares them by these characteristics:

  • Apps extended: Lists the Google Workspace apps that you can extend with the given option.
  • Coding options: Lists the ways that you can build, including:
    • AppSheet: A no-code development platform.
    • Apps Script: A cloud-based, low-code development platform based in JavaScript.
    • Full dev: Your own tech stack that supports your preferred coding language.
  • UI frameworks: Indicates the types of UI frameworks that you can use to build each option, including:
    • Card-based: Card interfaces are predefined widgets and cards built with either the Card Service using Apps Script or by returning properly formatted JSON to render cards with your preferred tech stack (full dev). Card-based interfaces don't require knowledge of HTML or CSS, and work well on both desktop and mobile clients.
    • HTML: Apps Script offers an HTML service for developing web pages that can interact with server-side Apps Script functions. Interfaces developed with the HTML service are highly customizable, but require more manual work to create a great user experience.
    • iframe: iframes embed external content into Google Workspace and offer the most customizability for user interfaces.

Following the table are descriptions for each option.

What you can build Preview Apps extended Coding options Card-based UI HTML UI iframe UI
Google Workspace add-ons Google Workspace add-on example showing a sidebar integration.
Gmail logo showing email integration availability. Gmail
Google Drive logo for file storage support. Drive
Google Calendar logo for scheduling app extension. Calendar
Google Chat logo for messaging app integration. Chat
Google Docs logo for document editing integration. Docs
Google Meet logo for video conferencing integration. Meet
Google Sheets logo for spreadsheet app extension. Sheets
Google Slides logo for presentation app extension. Slides
Google Apps Script logo for coding options. Apps Script
Google Developers logo for full stack options. Full dev
Link previews and smart chips | Google Workspace add-ons Google Workspace add-on link previews example showing smart chips.
Google Docs icon for smart chip preview. Docs
Google Sheets icon for smart chip preview. Sheets
Google Slides icon for smart chip preview. Slides
AppSheet logo for no-code development options. AppSheet
Google Apps Script logo for low-code coding. Apps Script
Google Developers logo for professional coding. Full dev
Email drafts | Google Workspace add-ons Google Workspace add-on for email drafts example in Gmail.
Gmail logo representing email draft extensions. Gmail
Google Apps Script icon for email extensions. Apps Script
Google Developers icon for full dev. Full dev
Meeting main stage and side panel | Google Workspace add-ons Google Meet add-ons interface with main stage and side panel.
Google Meet logo for meeting integration. Meet
Google Developers logo for coding meetings. Full dev
Google Chat apps | Google Workspace add-ons Chat app example showing interactive messaging in Chat.
Google Chat logo for chat extensions. Chat
AppSheet logo for chat app options. AppSheet
Google Apps Script logo for chat extensions. Apps Script
Google Developers logo for full stack chat. Full dev
Calendar conferencing | Google Workspace add-ons Google Workspace add-on for Calendar conferencing interface example.
Google Calendar logo for conferencing features. Calendar
Google Apps Script logo for calendar extensions. Apps Script

Uses existing UI
Editor add-ons Editor add-on example showing Google Docs extension.
Google Docs logo for document editors. Docs
Google Sheets logo for spreadsheet editors. Sheets
Google Slides logo for presentation editors. Slides
Google Forms logo for form editors. Forms
Google Apps Script logo for spreadsheet editing. Apps Script
Custom functions | Editor add-ons Custom function example showing spreadsheet formula usage.
Google Sheets logo for custom functions. Sheets
Google Apps Script logo for writing scripts. Apps Script

Uses existing UI
Macros | Editor add-ons Macro example showing recorded spreadsheet automation steps.
Google Sheets logo for creating macros. Sheets
Google Apps Script logo for automating tasks. Apps Script

Uses existing UI
Custom menus, dialogs, and sidebars | Editor add-ons Menu and sidebar example showing editor UI customization.
Google Docs logo for document sidebars. Docs
Google Sheets logo for spreadsheet dialogs. Sheets
Google Slides logo for presentation sidebars. Slides
Google Forms logo for form dialogs. Forms
Google Apps Script logo for sidebars. Apps Script
Google Drive apps Drive app example showing file menu integration.
Google Drive logo for file access. Drive
Google Developers logo for full stack support. Full dev

Uses existing UI
Google Classroom add-ons Google Classroom add-ons example showing assignment attachment interface.
Google Classroom logo for educator tools. Classroom
Google Developers logo for classroom integration. Full dev

Types of app integrations

The following section explains the types of app integrations that you can build to extend the Google Workspace UI.

To share your feature with other Google Workspace users, you can publish a listing on the Google Workspace Marketplace. To learn which types of app integrations can be listed together, see List app integrations together in the Marketplace documentation.

Google Workspace add-ons

Google Workspace add-on example showing sidebar app integration.

Google Workspace add-on example showing sidebar app integration.

Google Workspace add-ons are applications that integrate with Google Workspace apps. A add-on can extend multiple Google Workspace apps. Most often, the app opens in a sidebar from within the Google Workspace app that it extends.

In addition to building sidebars, you can build the following features for a add-on:

View Google Workspace add-ons documentation

Google Workspace Marketplace logo for publishing. Publishable



Coding options:

Google Apps Script logo for automated coding. Apps Script
Google Developers logo for software development. Full dev

Extends the following apps:

Gmail logo for email app integrations. Gmail
Google Drive icon for file integrations. Drive
Google Calendar icon for scheduling app. Calendar
Google Chat logo for conversation tools. Chat

Google Docs icon for document editing. Docs
Google Meet logo for video tools. Meet
Google Sheets logo representing spreadsheet apps. Sheets
Google Slides icon for presentation apps. Slides

Available UI frameworks:

Card Framework icon for UI design. Card framework


Link preview example showing a descriptive smart chip.

Link preview example showing a descriptive smart chip.

Google Workspace add-ons that extend Docs can create custom link previews from a third-party service. Similar to smart chips that Docs generates for mentions of a person, file, calendar event, or other entity within a Google Workspace application, an add-on can generate a smart chip for a third-party link and show a preview card when someone hovers over the chip.

You can add link previews to existing Google Workspace add-ons or create a separate add-on specifically for link previews.

View link previews and smart chips documentation

Google Workspace Marketplace logo for publishing. Publishable



Coding options:

AppSheet logo for no-code development. AppSheet
Google Apps Script icon for automation scripts. Apps Script
Google Developers icon for full stack dev. Full dev

Extends the following apps:

Google Docs icon for document extension tools. Docs
Google Sheets icon for spreadsheet tool extension. Sheets
Google Slides icon for presentation tool extension. Slides

Available UI frameworks:

Card framework icon for UI components. Card framework


Email drafts

Email draft example showing a custom compose interface.

Email draft example showing a custom compose interface.

Google Workspace add-ons that extend Gmail can provide a custom interface when the user composes new messages or replies to existing messages. To use this interface, users open the add-on from within the email draft, either at the bottom of the draft or in the More options menu.

View email drafts documentation

Google Workspace Marketplace logo for publishing. Publishable



Coding options:

Google Apps Script icon for coding tools. Apps Script
Google Developers logo for professional development. Full dev

Extends the following apps:

Gmail logo representing email integration. Gmail

Available UI frameworks:

Card framework logo for design system. Card framework


Meeting main stage and side panel

Meet add-ons example showing main stage collaboration.

Meet add-ons example showing main stage collaboration.

Google Workspace add-ons that extend Meet let you embed your app into a meeting's main stage or side panel interface where users can discover, share, and collaborate in your app without leaving Meet.

Unlike other Google Workspace add-ons, Meet add-ons don't use the card framework UI. Instead, you embed your app using an iframe.

View Meet add-ons SDK documentation

Google Workspace Marketplace logo for publication. Publishable



Coding options:

Google Developers logo for full stack tools. Full dev

Extends the following apps:

Google Meet logo for video meetings. Meet

Available UI frameworks:

Iframe icon for embedded web application. iframe


Google Chat apps

Chat app example showing message interaction.

Chat app example showing message interaction.

Chat apps bring resources and services into Chat. You can design Chat apps to interact with users in many ways, including:

  • Respond to commands with a text message or card message.
  • Open a dialog to help users complete multi-step processes, like filling in form data.
  • Preview links by attaching cards with helpful information that let users take action directly from the conversation.

View Chat apps documentation

Google Workspace Marketplace icon for app publication. Publishable



Coding options:

AppSheet logo for building no-code apps. AppSheet
Google Apps Script icon for automated task coding. Apps Script
Google Developers logo for professional software engineering. Full dev

Extends the following apps:

Google Chat logo for conversation extensions. Chat

Available UI frameworks:

Card framework icon for designing user interfaces. Card framework


Calendar conferencing

Calendar conferencing example showing integration with meeting events.

Calendar conferencing example showing integration with meeting events.

If you're a web conferencing provider, you can build a Google Workspace add-on that extends Google Calendar with your conference solution. The add-on adds a conferencing option for Calendar events, letting users create and join those conferences directly from Calendar.

View Calendar conferencing documentation

Google Workspace Marketplace logo for published apps. Publishable



Coding options:

Google Apps Script icon for conferencing integration shortcuts. Apps Script

Extends the following apps:

Google Calendar icon for event synchronization settings. Calendar

Available UI frameworks:

Uses existing UI

Editor add-ons

Editor add-on example showing Google Docs extension features.

Editor add-on example showing Google Docs extension features.

Editor add-ons are apps that extend Docs, Sheets, Slides, or Forms. Editor add-ons can only extend one app per add-on, but you can publish multiple Editor add-ons in the same Marketplace listing. Users open Editor add-ons from the Extensions menu in the app that they extend.

You can build the following features for an Editor add-on:

View Editor add-ons documentation

Google Workspace Marketplace icon for software publication. Publishable



Coding options:

Google Apps Script icon for editor extension development. Apps Script

Extends the following apps:

Google Docs icon for document editing extensions. Docs
Google Sheets icon for spreadsheet automation features. Sheets
Google Slides icon for presentation creation tools. Slides
Google Forms icon for survey and form tools. Forms

Available UI frameworks:

HTML icon representing web-based user interface development. HTML
Iframe icon for embedding external web content. iframe


Custom functions

Custom function example showing Google Sheets formula usage.

Custom function example showing Google Sheets formula usage.

Custom functions let you add more functions in Sheets. Users can find and use them just like any of the hundreds of built-in functions available in Sheets. You can publish a custom function as an Editor add-on.

View custom functions documentation

Google Workspace Marketplace logo for publication options. Publishable



Coding options:

Apps Script

Extends the following apps:

Google Sheets icon for automating spreadsheet tasks. Sheets

Available UI frameworks:

Uses existing UI

Macros

Macro example showing recorded spreadsheet automation steps.

Macro example showing recorded spreadsheet automation steps.

Macros are recordings in Sheets that duplicate a specific series of UI interactions that you define. You can link a macro to a keyboard shortcut or run it from the Extensions > Macros menu.

When you record a macro, Sheets automatically creates an Apps Script function that replicates the UI interactions. You can edit macros directly within the Apps Script editor. You can write macros from scratch in Apps Script, or take functions you've already written and turn them into macros. A macro definition can be included in an Editor add-on but cannot be published.

View macros documentation

Coding options:

Google Apps Script logo for macro recording functionality. Apps Script

Extends the following apps:

Sheets

Available UI frameworks:

Uses existing UI

Custom menus, dialogs, and sidebars

Custom menu example showing editor toolbar customization options.

Custom menu example showing editor toolbar customization options.

You can add custom menus, prompts, alerts, and HTML-based dialogs and sidebars to files in Docs, Sheets, Slides, and Forms as part of an Editor add-on. Custom menus appear next to the default menus of the app they extend. Dialogs, sidebars, prompts, and alerts are typically activated by user actions like menu item clicks, or by triggers like event-driven triggers.

View custom menus, dialogs, and sidebars documentation

Coding options:

Google Apps Script icon for developing custom menus. Apps Script

Extends the following apps:

Google Docs logo for document extension integration. Docs
Google Sheets icon for spreadsheet sidebar extensions. Sheets
Google Slides logo for presentation sidebar extensions. Slides
Google Forms logo for form dialog extensions. Forms

Available UI frameworks:

HTML icon for building custom user interfaces. HTML
Iframe icon for embedding third-party web tools. iframe


Google Drive apps

Drive app example showing file open options.

Drive app example showing file open options.

If your app supports Drive files, you can integrate with the Drive user interface to present your app as an option to create or open files. Your app can appear in the New > More menu and the Open with menu when a user right-clicks a file in Drive. When a user selects your app from either menu, your app opens in a new window.

View Drive apps documentation

Google Workspace Marketplace icon for app discovery. Publishable



Coding options:

Google Developers logo for professional app creation. Full dev

Extends the following apps:

Google Drive icon for file storage integration. Drive

Available UI frameworks:

Uses existing UI

Google Classroom add-ons

Classroom add-ons example showing assignment attachments.

Classroom add-ons example showing assignment attachments.

Google Classroom add-ons let educators create attachments on coursework, announcements, or coursework materials. These attachments open third-party content in iframes in Classroom. The iframes open separate URLs depending on the user type and Classroom context.

View Classroom add-ons documentation

Google Workspace Marketplace logo for publishing integrations. Publishable



Coding options:

Google Developers icon for classroom tool integration. Full dev

Extends the following apps:

Google Classroom logo for educator workflow tools. Classroom

Available UI frameworks:

Iframe icon for embedded educational web content. iframe