UI style guide for Editor Add-ons | Google Workspace Add-ons

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="721724668570-nbkv1cfusk7kk4eni4pjvepaus73b13t.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#fff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/developers/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://developers.google.com/workspace/add-ons/guides/editor-style"><link rel="search" type="application/opensearchdescription+xml" title="Google for Developers" href="https://developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://developers.google.com/workspace/add-ons/guides/editor-style" /><link rel="alternate" hreflang="x-default" href="https://developers.google.com/workspace/add-ons/guides/editor-style" /><link rel="alternate" hreflang="ar" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=ar" /><link rel="alternate" hreflang="bn" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=fa" /><link rel="alternate" hreflang="fr" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=fr" /><link rel="alternate" hreflang="de" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=de" /><link rel="alternate" hreflang="he" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=he" /><link rel="alternate" hreflang="hi" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=hi" /><link rel="alternate" hreflang="id" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=id" /><link rel="alternate" hreflang="it" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=it" /><link rel="alternate" hreflang="ja" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=ja" /><link rel="alternate" hreflang="ko" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=ko" /><link rel="alternate" hreflang="pl" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=es-419" /><link rel="alternate" hreflang="th" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=th" /><link rel="alternate" hreflang="tr" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=tr" /><link rel="alternate" hreflang="vi" href="https://developers.google.com/workspace/add-ons/guides/editor-style?hl=vi" /><title>UI style guide for Editor Add-ons  |  Google Workspace Add-ons  |  Google for Developers</title> <meta property="og:title" content="UI style guide for Editor Add-ons  |  Google Workspace Add-ons  |  Google for Developers"><meta property="og:url" content="https://developers.google.com/workspace/add-ons/guides/editor-style"><meta property="og:image" content="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/opengraph/white.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "UI style guide for Editor Add-ons" } </script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Google Workspace", "item": "https://developers.google.com/workspace" },{ "@type": "ListItem", "position": 2, "name": "Add-ons", "item": "https://developers.google.com/workspace/add-ons/overview" },{ "@type": "ListItem", "position": 3, "name": "UI style guide for Editor Add-ons", "item": "https://developers.google.com/workspace/add-ons/guides/editor-style" }] } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="white" type="article" layout="docs" concierge='closed' display-toc pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/workspace"> <div class="devsite-product-logo-container" size="medium" > <picture> <img class="devsite-product-logo" alt="Google Workspace" src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/16px.svg" srcset=" https://fonts.gstatic.com/s/i/productlogos/googleg/v6/16px.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/workspace" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Workspace" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Workspace </a> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://developers.google.com/workspace" track-metadata-eventdetail="https://developers.google.com/workspace" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - home" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Home" track-name="home" > Home </a> </tab> <tab class="devsite-active"> <a href="https://developers.google.com/workspace/add-ons" track-metadata-eventdetail="https://developers.google.com/workspace/add-ons" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - add-ons" track-metadata-module="primary nav" aria-label="Add-ons, selected" data-category="Site-Wide Custom Events" data-label="Tab: Add-ons" track-name="add-ons" > Add-ons </a> </tab> <tab class="devsite-dropdown "> <a href="https://developers.google.com/workspace/products-menu" track-metadata-eventdetail="https://developers.google.com/workspace/products-menu" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - all products" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: All products" track-name="all products" > All products </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for All products" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/products-menu" track-metadata-position="nav - all products" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: All products" track-name="all products" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Google Workspace apps</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/admin-sdk" track-type="nav" track-metadata-eventdetail="https://developers.google.com/admin-sdk" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="google workspace apps" tooltip data-category="Workspace top menu navigation" data-label="Tab menu: All products - Admin console" > <div class="devsite-nav-item-title"> Admin console </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/cloud-search" track-type="nav" track-metadata-eventdetail="https://developers.google.com/cloud-search" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="google workspace apps" tooltip data-label="Tab menu: All products - Cloud Search" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Cloud Search </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/gmail" track-type="nav" track-metadata-eventdetail="https://developers.google.com/gmail" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="google workspace apps" tooltip data-label="Tab menu: All products - Gmail" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Gmail </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/calendar" track-type="nav" track-metadata-eventdetail="https://developers.google.com/calendar" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="google workspace apps" tooltip data-label="Tab menu: All products - Google Calendar" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Google Calendar </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/chat" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/chat" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="google workspace apps" tooltip data-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Chat" > <div class="devsite-nav-item-title"> Google Chat </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/classroom" track-type="nav" track-metadata-eventdetail="https://developers.google.com/classroom" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="google workspace apps" tooltip data-label="Tab menu: All products - Google Classroom" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Google Classroom </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/docs" track-type="nav" track-metadata-eventdetail="https://developers.google.com/docs" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="google workspace apps" tooltip data-label="Tab menu: All products - Google Docs" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Google Docs </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/drive" track-type="nav" track-metadata-eventdetail="https://developers.google.com/drive" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="google workspace apps" tooltip data-label="Tab menu: All products - Google Drive" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Google Drive </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/forms" track-type="nav" track-metadata-eventdetail="https://developers.google.com/forms" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline=" " tooltip data-label="Tab menu: All products - Google Forms" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Google Forms </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/keep" track-type="nav" track-metadata-eventdetail="https://developers.google.com/keep" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline=" " tooltip data-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Keep" > <div class="devsite-nav-item-title"> Google Keep </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/meet" track-type="nav" track-metadata-eventdetail="https://developers.google.com/meet" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline=" " tooltip data-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Meet" > <div class="devsite-nav-item-title"> Google Meet </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/sheets" track-type="nav" track-metadata-eventdetail="https://developers.google.com/sheets" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline=" " tooltip data-label="Tab menu: All products - Google Sheets" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Google Sheets </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/sites" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/sites" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline=" " tooltip data-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Sites" > <div class="devsite-nav-item-title"> Google Sites </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/slides" track-type="nav" track-metadata-eventdetail="https://developers.google.com/slides" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline=" " tooltip data-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Slides" > <div class="devsite-nav-item-title"> Google Slides </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/tasks" track-type="nav" track-metadata-eventdetail="https://developers.google.com/tasks" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline=" " tooltip data-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Tasks" > <div class="devsite-nav-item-title"> Google Tasks </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/vault" track-type="nav" track-metadata-eventdetail="https://developers.google.com/vault" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline=" " tooltip data-label="Tab menu: All products - Google Vault" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Google Vault </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Extend, automate & share</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/add-ons" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/add-ons" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="extend, automate & share" tooltip data-label="Tab menu: All products - Add-ons" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Add-ons </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/apps-script" track-type="nav" track-metadata-eventdetail="https://developers.google.com/apps-script" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="extend, automate & share" tooltip data-category="Workspace top menu navigation" data-label="Tab menu: All products - Apps Script" > <div class="devsite-nav-item-title"> Apps Script </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/chat/overview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/chat/overview" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="extend, automate & share" tooltip data-label="Tab menu: All products - Chat apps" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Chat apps </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/drive/api/guides/about-apps" track-type="nav" track-metadata-eventdetail="https://developers.google.com/drive/api/guides/about-apps" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="extend, automate & share" tooltip data-label="Tab menu: All products - Drive apps" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Drive apps </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/marketplace" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/marketplace" track-metadata-position="nav - all products" track-metadata-module="tertiary nav" track-metadata-module_headline="extend, automate & share" tooltip data-label="Tab menu: All products - Marketplace" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Marketplace </div> </a> </li> </ul> </div> </div> </div> </tab> <tab class="devsite-dropdown "> <a href="https://developers.google.com/workspace/resources-menu" track-metadata-eventdetail="https://developers.google.com/workspace/resources-menu" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > Resources </a> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Resources" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/resources-menu" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Tools</li> <li class="devsite-nav-item"> <a href="https://admin.google.com/" track-type="nav" track-metadata-eventdetail="https://admin.google.com/" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="tools" tooltip data-label="Tab menu: Resources - Admin console" data-category="Workspace top menu navigation" target="admin-console" > <div class="devsite-nav-item-title"> Admin console </div> </a> </li> <li class="devsite-nav-item"> <a href="https://script.google.com/" track-type="nav" track-metadata-eventdetail="https://script.google.com/" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="tools" tooltip data-category="Workspace top menu navigation" target="_blank" data-label="Tab menu: Resources - Apps Script dashboard" > <div class="devsite-nav-item-title"> Apps Script dashboard </div> </a> </li> <li class="devsite-nav-item"> <a href="https://console.cloud.google.com/workspace-api" track-type="nav" track-metadata-eventdetail="https://console.cloud.google.com/workspace-api" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="tools" tooltip data-label="Tab menu: Resources - Google Cloud console" target="console" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Google Cloud console </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/explore" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/explore" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="tools" tooltip data-label="Tab menu: Resources - APIs Explorer" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> APIs Explorer </div> </a> </li> <li class="devsite-nav-item"> <a href="https://addons.gsuite.google.com/uikit/builder" track-type="nav" track-metadata-eventdetail="https://addons.gsuite.google.com/uikit/builder" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="tools" tooltip data-label="Tab menu: Resources - Card Builder" data-category="Workspace top menu navigation" target="_blank" > <div class="devsite-nav-item-title"> Card Builder </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Training & support</li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/guides/get-started" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/guides/get-started" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="training & support" tooltip data-category="Workspace top menu navigation" data-label="Tab menu: Resources - How to get started" > <div class="devsite-nav-item-title"> How to get started </div> </a> </li> <li class="devsite-nav-item"> <a href="https://codelabs.developers.google.com/?product=googleworkspace" track-type="nav" track-metadata-eventdetail="https://codelabs.developers.google.com/?product=googleworkspace" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="training & support" tooltip target="_blank" data-category="Workspace top menu navigation" data-label="Tab menu: Resources - Codelabs" > <div class="devsite-nav-item-title"> Codelabs </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/support" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/support" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="training & support" tooltip data-label="Tab menu: Resources - Developer support" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Developer support </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-title" role="heading" tooltip>Updates</li> <li class="devsite-nav-item"> <a href="https://developers.googleblog.com/search/?query=Google+Workspace" track-type="nav" track-metadata-eventdetail="https://developers.googleblog.com/search/?query=Google+Workspace" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="updates" tooltip data-label="Tab menu: Resources - Blog" data-category="Workspace top menu navigation" target="_blank" > <div class="devsite-nav-item-title"> Blog </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/preview" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/preview" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="updates" tooltip data-label="Tab menu: Resources - Developer previews" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Developer Previews </div> </a> </li> <li class="devsite-nav-item"> <a href="https://developers.google.com/workspace/newsletters" track-type="nav" track-metadata-eventdetail="https://developers.google.com/workspace/newsletters" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="updates" tooltip data-label="Tab menu: Resources - Newsletter" data-category="Workspace top menu navigation" > <div class="devsite-nav-item-title"> Newsletter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://twitter.com/workspacedevs" track-type="nav" track-metadata-eventdetail="https://twitter.com/workspacedevs" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="updates" tooltip data-category="Workspace top menu navigation" data-label="Tab menu: Resources - X (Twitter)" target="_blank" > <div class="devsite-nav-item-title"> X (Twitter) </div> </a> </li> <li class="devsite-nav-item"> <a href="https://www.youtube.com/channel/UCUcg6az6etU_gRtZVAhBXaw" track-type="nav" track-metadata-eventdetail="https://www.youtube.com/channel/UCUcg6az6etU_gRtZVAhBXaw" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="updates" tooltip target="_blank" data-category="Workspace top menu navigation" data-label="Tab menu: Resources - YouTube" > <div class="devsite-nav-item-title"> YouTube </div> </a> </li> </ul> </div> </div> </div> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Google Workspace Add-ons" tenant-name="Google for Developers" project-scope="/workspace/add-ons/overview" url-scoped="https://developers.google.com/s/results/workspace/add-ons/overview" > <form class="devsite-search-form" action="https://developers.google.com/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles fp-auth id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section "> <div class="devsite-header-background"> <div class="devsite-product-id-row" > <div class="devsite-product-description-row"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/workspace/add-ons/overview" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Lower Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Workspace Add-ons" > Add-ons </a> </li> </ul> </div> </div> <div class="devsite-doc-set-nav-row"> <devsite-tabs class="lower-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Lower tabs"> <tab > <a href="https://developers.google.com/workspace/add-ons" track-metadata-eventdetail="https://developers.google.com/workspace/add-ons" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - overview" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" > Overview </a> </tab> <tab class="devsite-active"> <a href="https://developers.google.com/workspace/add-ons/overview" track-metadata-eventdetail="https://developers.google.com/workspace/add-ons/overview" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - guides" track-metadata-module="primary nav" aria-label="Guides, selected" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" > Guides </a> </tab> <tab > <a href="https://developers.google.com/workspace/add-ons/reference" track-metadata-eventdetail="https://developers.google.com/workspace/add-ons/reference" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - reference" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" > Reference </a> </tab> <tab > <a href="https://developers.google.com/workspace/add-ons/samples" track-metadata-eventdetail="https://developers.google.com/workspace/add-ons/samples" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - samples" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" > Samples </a> </tab> <tab > <a href="https://developers.google.com/workspace/add-ons/workspace-support" track-metadata-eventdetail="https://developers.google.com/workspace/add-ons/workspace-support" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - support" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" > Support </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars > <div class="devsite-book-nav-filter" > <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="https://developers.google.com/workspace"> <div class="devsite-product-logo-container" size="medium" > <picture> <img class="devsite-product-logo" alt="Google Workspace" src="https://fonts.gstatic.com/s/i/productlogos/googleg/v6/16px.svg" srcset=" https://fonts.gstatic.com/s/i/productlogos/googleg/v6/16px.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://developers.google.com/workspace" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Upper Header" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="Google Workspace" > <svg class="devsite-google-wordmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148 48"> <title>Google</title> <path class="devsite-google-wordmark-svg-path" d="M19.58,37.65c-9.87,0-18.17-8.04-18.17-17.91c0-9.87,8.3-17.91,18.17-17.91c5.46,0,9.35,2.14,12.27,4.94l-3.45,3.45c-2.1-1.97-4.93-3.49-8.82-3.49c-7.21,0-12.84,5.81-12.84,13.02c0,7.21,5.64,13.02,12.84,13.02c4.67,0,7.34-1.88,9.04-3.58c1.4-1.4,2.32-3.41,2.66-6.16H19.58v-4.89h16.47c0.18,0.87,0.26,1.92,0.26,3.06c0,3.67-1.01,8.21-4.24,11.44C28.93,35.9,24.91,37.65,19.58,37.65z M61.78,26.12c0,6.64-5.1,11.53-11.36,11.53s-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53S61.78,19.43,61.78,26.12z M56.8,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C53.84,33.11,56.8,30.22,56.8,26.12z M87.25,26.12c0,6.64-5.1,11.53-11.36,11.53c-6.26,0-11.36-4.89-11.36-11.53c0-6.68,5.1-11.53,11.36-11.53C82.15,14.59,87.25,19.43,87.25,26.12zM82.28,26.12c0-4.15-2.96-6.99-6.39-6.99c-3.43,0-6.39,2.84-6.39,6.99c0,4.11,2.96,6.99,6.39,6.99C79.32,33.11,82.28,30.22,82.28,26.12z M112.09,15.29v20.7c0,8.52-5.02,12.01-10.96,12.01c-5.59,0-8.95-3.76-10.22-6.81l4.41-1.83c0.79,1.88,2.71,4.1,5.81,4.1c3.8,0,6.16-2.36,6.16-6.77v-1.66h-0.18c-1.14,1.4-3.32,2.62-6.07,2.62c-5.76,0-11.05-5.02-11.05-11.49c0-6.51,5.28-11.57,11.05-11.57c2.75,0,4.93,1.22,6.07,2.58h0.18v-1.88H112.09z M107.64,26.16c0-4.06-2.71-7.03-6.16-7.03c-3.49,0-6.42,2.97-6.42,7.03c0,4.02,2.93,6.94,6.42,6.94C104.93,33.11,107.64,30.18,107.64,26.16z M120.97,3.06v33.89h-5.07V3.06H120.97z M140.89,29.92l3.93,2.62c-1.27,1.88-4.32,5.11-9.61,5.11c-6.55,0-11.28-5.07-11.28-11.53c0-6.86,4.77-11.53,10.71-11.53c5.98,0,8.91,4.76,9.87,7.34l0.52,1.31l-15.42,6.38c1.18,2.31,3.01,3.49,5.59,3.49C137.79,33.11,139.58,31.84,140.89,29.92zM128.79,25.77l10.31-4.28c-0.57-1.44-2.27-2.45-4.28-2.45C132.24,19.04,128.66,21.31,128.79,25.77z"/> </svg>Workspace </a> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/workspace" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Home" track-name="home" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Home" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Home </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/add-ons" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Add-ons" track-name="add-ons" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add-ons" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Add-ons </span> </a> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/workspace/add-ons" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Overview" track-name="overview" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Overview" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Overview </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/add-ons/overview" class="devsite-nav-title gc-analytics-event devsite-nav-has-children devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Guides" track-name="guides" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Guides" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip menu="_book"> Guides </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="_book"> </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/add-ons/reference" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Reference" track-name="reference" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Reference" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Reference </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/add-ons/samples" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Samples" track-name="samples" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Samples" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Samples </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/add-ons/workspace-support" class="devsite-nav-title gc-analytics-event devsite-nav-has-children " data-category="Site-Wide Custom Events" data-label="Tab: Support" track-name="support" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Support" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Support </span> <span class="devsite-nav-icon material-icons" data-icon="forward" > </span> </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/workspace/products-menu" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: All products" track-name="all products" data-category="Site-Wide Custom Events" data-label="Responsive Tab: All products" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > All products </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: All products" track-name="all products" > <span class="devsite-nav-text" tooltip menu="All products"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="All products"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/workspace/resources-menu" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Resources" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Resources </span> </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip menu="Resources"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Resources"> </span> </span> </li> </ul> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item"><a href="/workspace/add-ons/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/overview" ><span class="devsite-nav-text" tooltip>Add-ons overview</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/types" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/types" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/types" ><span class="devsite-nav-text" tooltip>Add-on types</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/starting-addons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/starting-addons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/starting-addons" ><span class="devsite-nav-text" tooltip>Install and authorize add-ons</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/guides/using-addons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/using-addons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/using-addons" ><span class="devsite-nav-text" tooltip>Open and use add-ons</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Get started</span> </div></li> <li class="devsite-nav-item devsite-nav-external"><a href="/workspace/guides/get-started" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/guides/get-started" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/guides/get-started" target="_blank"><span class="devsite-nav-text" tooltip>Develop on Google Workspace</span><span class="devsite-nav-icon material-icons" data-icon="external" data-title="External" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-external"><a href="/workspace/guides/configure-oauth-consent" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/guides/configure-oauth-consent" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/guides/configure-oauth-consent" target="_blank"><span class="devsite-nav-text" tooltip>Configure OAuth consent</span><span class="devsite-nav-icon material-icons" data-icon="external" data-title="External" aria-hidden="true"></span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Develop Google Workspace Add-ons</span> </div></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/building-workspace-addons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/building-workspace-addons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/building-workspace-addons" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Quickstarts</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/quickstart/cats-quickstart" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/quickstart/cats-quickstart" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/quickstart/cats-quickstart" ><span class="devsite-nav-text" tooltip>Apps Script</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/quickstart/alternate-runtimes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/quickstart/alternate-runtimes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/quickstart/alternate-runtimes" ><span class="devsite-nav-text" tooltip>Node.js</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/workspace-manifests" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/workspace-manifests" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/workspace-manifests" ><span class="devsite-nav-text" tooltip>Manifests</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/workspace-scopes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/workspace-scopes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/workspace-scopes" ><span class="devsite-nav-text" tooltip>Scopes</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/guides/alternate-runtimes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/alternate-runtimes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/alternate-runtimes" ><span class="devsite-nav-text" tooltip>Build using HTTP end points</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Build cards</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/card-interfaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/card-interfaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/card-interfaces" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/cards" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/cards" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/cards" ><span class="devsite-nav-text" tooltip>Cards</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/homepages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/homepages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/homepages" ><span class="devsite-nav-text" tooltip>Homepages</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/widgets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/widgets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/widgets" ><span class="devsite-nav-text" tooltip>Widgets</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/actions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/actions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/actions" ><span class="devsite-nav-text" tooltip>Actions</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/event-objects" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/event-objects" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/event-objects" ><span class="devsite-nav-text" tooltip>Event objects</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/workspace-triggers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/workspace-triggers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/workspace-triggers" ><span class="devsite-nav-text" tooltip>Triggers</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/guides/workspace-style" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/workspace-style" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/workspace-style" ><span class="devsite-nav-text" tooltip>Style guide</span></a></li><li class="devsite-nav-item devsite-nav-break"></li><li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/interactions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/interactions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/interactions" ><span class="devsite-nav-text" tooltip>Build interactive cards</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/navigation" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/navigation" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/navigation" ><span class="devsite-nav-text" tooltip>Navigate between cards</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/universal-actions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/universal-actions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/universal-actions" ><span class="devsite-nav-text" tooltip>Use universal actions</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/suggestions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/suggestions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/suggestions" ><span class="devsite-nav-text" tooltip>Add autocomplete to text inputs</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/guides/access-user-locale-timezone" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/access-user-locale-timezone" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/access-user-locale-timezone" ><span class="devsite-nav-text" tooltip>Read user locale and timezone</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Extend Gmail</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/gmail" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/gmail" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/gmail" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/gmail/extending-message-ui" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/gmail/extending-message-ui" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/gmail/extending-message-ui" ><span class="devsite-nav-text" tooltip>Build contextual message interfaces</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/gmail/extending-compose-ui" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/gmail/extending-compose-ui" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/gmail/extending-compose-ui" ><span class="devsite-nav-text" tooltip>Build contextual compose interfaces</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/gmail/compose" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/gmail/compose" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/gmail/compose" ><span class="devsite-nav-text" tooltip>Compose draft messages</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/gmail/gmail-actions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/gmail/gmail-actions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/gmail/gmail-actions" ><span class="devsite-nav-text" tooltip>Gmail actions</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Extend Google Calendar</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar/building-calendar-interfaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar/building-calendar-interfaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar/building-calendar-interfaces" ><span class="devsite-nav-text" tooltip>Build Calendar interfaces</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar/calendar-actions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar/calendar-actions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar/calendar-actions" ><span class="devsite-nav-text" tooltip>Calendar actions</span></a></li><li class="devsite-nav-item devsite-nav-break"></li><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar/conferencing/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar/conferencing/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar/conferencing/overview" ><span class="devsite-nav-text" tooltip>Third-party conferencing overview</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/samples/conferencing-sample" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/samples/conferencing-sample" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/samples/conferencing-sample" ><span class="devsite-nav-text" tooltip>Calendar conferencing quickstart</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar/conferencing/build-conference-addons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar/conferencing/build-conference-addons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar/conferencing/build-conference-addons" ><span class="devsite-nav-text" tooltip>Build conferencing add-ons</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar/conferencing/create-conference" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar/conferencing/create-conference" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar/conferencing/create-conference" ><span class="devsite-nav-text" tooltip>Create third-party conferences</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar/conferencing/sync-calendar-changes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar/conferencing/sync-calendar-changes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar/conferencing/sync-calendar-changes" ><span class="devsite-nav-text" tooltip>Sync calendar conference changes</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar/conferencing/add-settings" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar/conferencing/add-settings" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar/conferencing/add-settings" ><span class="devsite-nav-text" tooltip>Add conferencing add-on settings</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar/conferencing/providing-logos" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar/conferencing/providing-logos" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar/conferencing/providing-logos" ><span class="devsite-nav-text" tooltip>Provide conference solution logos</span></a></li><li class="devsite-nav-item devsite-nav-break"></li><li class="devsite-nav-item"><a href="/workspace/add-ons/calendar/attachment/providing-icons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/calendar/attachment/providing-icons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/calendar/attachment/providing-icons" ><span class="devsite-nav-text" tooltip>Provide attachment icons</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Extend Google Drive</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/drive" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/drive" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/drive" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/drive/building-drive-interfaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/drive/building-drive-interfaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/drive/building-drive-interfaces" ><span class="devsite-nav-text" tooltip>Build Drive interfaces</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/drive/drive-actions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/drive/drive-actions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/drive/drive-actions" ><span class="devsite-nav-text" tooltip>Drive actions</span></a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Extend Google Editors</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/editors/gsao" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/gsao" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/gsao" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/editors/gsao/building-editor-interfaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/gsao/building-editor-interfaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/gsao/building-editor-interfaces" ><span class="devsite-nav-text" tooltip>Build Editor interfaces</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/editors/gsao/editor-actions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/gsao/editor-actions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/gsao/editor-actions" ><span class="devsite-nav-text" tooltip>Editor actions</span></a></li><li class="devsite-nav-item devsite-nav-break"></li><li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Create smart chips</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/guides/preview-links-smart-chips" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/preview-links-smart-chips" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/preview-links-smart-chips" ><span class="devsite-nav-text" tooltip>Preview links</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/guides/create-insert-resource-smart-chip" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/create-insert-resource-smart-chip" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/create-insert-resource-smart-chip" ><span class="devsite-nav-text" tooltip>Create third-party resources</span></a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item devsite-nav-break"></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/guides/connect-third-party-service" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/connect-third-party-service" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/connect-third-party-service" ><span class="devsite-nav-text" tooltip>Connect your add-on to third-party services</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Test and debug</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/testing-workspace-addons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/testing-workspace-addons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/testing-workspace-addons" ><span class="devsite-nav-text" tooltip>Apps Script</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/guides/debug" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/debug" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/debug" ><span class="devsite-nav-text" tooltip>HTTP</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/guides/query-logs" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/query-logs" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/query-logs" ><span class="devsite-nav-text" tooltip>Query error logs</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/guides/workspace-best-practices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/workspace-best-practices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/workspace-best-practices" ><span class="devsite-nav-text" tooltip>Best practices</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/guides/workspace-restrictions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/workspace-restrictions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/workspace-restrictions" ><span class="devsite-nav-text" tooltip>Restrictions</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/guides/glossary" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/glossary" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/glossary" ><span class="devsite-nav-text" tooltip>Glossary</span></a></li> <li class="devsite-nav-item devsite-nav-break"></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/upgrade-addons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/upgrade-addons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/upgrade-addons" ><span class="devsite-nav-text" tooltip>Upgrade legacy add-ons</span></a></li> <li class="devsite-nav-item devsite-nav-break"></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Develop Editor Add-ons</span> </div></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/building-editor-addons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/building-editor-addons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/building-editor-addons" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Quickstarts</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/editors/docs/quickstart/translate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/docs/quickstart/translate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/docs/quickstart/translate" ><span class="devsite-nav-text" tooltip>Docs</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/editors/slides/quickstart/translate" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/slides/quickstart/translate" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/slides/quickstart/translate" ><span class="devsite-nav-text" tooltip>Slides</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/editors/forms/quickstart/forms-notifications" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/forms/quickstart/forms-notifications" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/forms/quickstart/forms-notifications" ><span class="devsite-nav-text" tooltip>Forms</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/editor-auth-lifecycle" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/editor-auth-lifecycle" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/editor-auth-lifecycle" ><span class="devsite-nav-text" tooltip>Authorization lifecycle</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/editor-manifests" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/editor-manifests" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/editor-manifests" ><span class="devsite-nav-text" tooltip>Manifest</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/editor-scopes" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/editor-scopes" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/editor-scopes" ><span class="devsite-nav-text" tooltip>Scopes</span></a></li> <li class="devsite-nav-item devsite-nav-expandable"><div class="devsite-expandable-nav"> <a class="devsite-nav-toggle" aria-hidden="true"></a><div class="devsite-nav-title devsite-nav-title-no-path" tabindex="0" role="button"> <span class="devsite-nav-text" tooltip>Build HTML interfaces</span> </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/html-interfaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/html-interfaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/html-interfaces" ><span class="devsite-nav-text" tooltip>Overview</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/editor-triggers" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/editor-triggers" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/editor-triggers" ><span class="devsite-nav-text" tooltip>Triggers</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/menus" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/menus" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/menus" ><span class="devsite-nav-text" tooltip>Add-on menus</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/concepts/dialogs" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/concepts/dialogs" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/concepts/dialogs" ><span class="devsite-nav-text" tooltip>Add-on dialogs and sidebars</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/guides/editor-style" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/editor-style" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/editor-style" ><span class="devsite-nav-text" tooltip>Style guide</span></a></li><li class="devsite-nav-item"><a href="/workspace/add-ons/guides/css" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/css" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/css" ><span class="devsite-nav-text" tooltip>CSS package</span></a></li></ul></div></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/editors/sheets" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/sheets" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/sheets" ><span class="devsite-nav-text" tooltip>Extend Google Sheets</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/editors/docs" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/docs" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/docs" ><span class="devsite-nav-text" tooltip>Extend Google Docs</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/editors/slides" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/slides" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/slides" ><span class="devsite-nav-text" tooltip>Extend Google Slides</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/editors/forms" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/editors/forms" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/editors/forms" ><span class="devsite-nav-text" tooltip>Extend Google Forms</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/testing-editor-addons" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/testing-editor-addons" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/testing-editor-addons" ><span class="devsite-nav-text" tooltip>Test your add-on</span></a></li> <li class="devsite-nav-item devsite-nav-break"></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/guides/editor-best-practices" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/editor-best-practices" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/editor-best-practices" ><span class="devsite-nav-text" tooltip>Best Practices</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/guides/editor-restrictions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/guides/editor-restrictions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/guides/editor-restrictions" ><span class="devsite-nav-text" tooltip>Restrictions</span></a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> <span class="devsite-nav-text" tooltip>Publish an add-on</span> </div></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/publish-add-on-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/publish-add-on-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/publish-add-on-overview" ><span class="devsite-nav-text" tooltip>Overview</span></a></li> <li class="devsite-nav-item"><a href="/workspace/add-ons/how-tos/update-published-add-on" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/add-ons/how-tos/update-published-add-on" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/add-ons/how-tos/update-published-add-on" ><span class="devsite-nav-text" tooltip>Update a published add-on</span></a></li> </ul> <ul class="devsite-nav-list" menu="All products" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Google Workspace apps </span> </span> </li> <li class="devsite-nav-item"> <a href="/admin-sdk" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Admin console" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Admin console </span> </a> </li> <li class="devsite-nav-item"> <a href="/cloud-search" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Cloud Search" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Cloud Search </span> </a> </li> <li class="devsite-nav-item"> <a href="/gmail" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gmail" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gmail </span> </a> </li> <li class="devsite-nav-item"> <a href="/calendar" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Calendar" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Calendar </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/chat" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Chat" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Chat </span> </a> </li> <li class="devsite-nav-item"> <a href="/classroom" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Classroom" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Classroom </span> </a> </li> <li class="devsite-nav-item"> <a href="/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Docs" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Docs </span> </a> </li> <li class="devsite-nav-item"> <a href="/drive" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Drive" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Drive </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > </span> </span> </li> <li class="devsite-nav-item"> <a href="/forms" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Forms" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Forms </span> </a> </li> <li class="devsite-nav-item"> <a href="/keep" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Keep" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Keep </span> </a> </li> <li class="devsite-nav-item"> <a href="/meet" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Meet" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Meet </span> </a> </li> <li class="devsite-nav-item"> <a href="/sheets" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Sheets" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Sheets </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/sites" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Sites" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Sites </span> </a> </li> <li class="devsite-nav-item"> <a href="/slides" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Slides" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Slides </span> </a> </li> <li class="devsite-nav-item"> <a href="/tasks" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Tasks" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Tasks </span> </a> </li> <li class="devsite-nav-item"> <a href="/vault" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Vault" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Vault </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Extend, automate & share </span> </span> </li> <li class="devsite-nav-item"> <a href="/workspace/add-ons" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Add-ons" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Add-ons </span> </a> </li> <li class="devsite-nav-item"> <a href="/apps-script" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Apps Script" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Apps Script </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/chat/overview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Chat apps" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Chat apps </span> </a> </li> <li class="devsite-nav-item"> <a href="/drive/api/guides/about-apps" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Drive apps" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Drive apps </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/marketplace" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Marketplace" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Marketplace </span> </a> </li> </ul> <ul class="devsite-nav-list" menu="Resources" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Tools </span> </span> </li> <li class="devsite-nav-item"> <a href="https://admin.google.com/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Admin console" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Admin console </span> </a> </li> <li class="devsite-nav-item"> <a href="https://script.google.com/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Apps Script dashboard" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Apps Script dashboard </span> </a> </li> <li class="devsite-nav-item"> <a href="https://console.cloud.google.com/workspace-api" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Cloud console" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google Cloud console </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: APIs Explorer" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > APIs Explorer </span> </a> </li> <li class="devsite-nav-item"> <a href="https://addons.gsuite.google.com/uikit/builder" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Card Builder" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Card Builder </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Training & support </span> </span> </li> <li class="devsite-nav-item"> <a href="/workspace/guides/get-started" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: How to get started" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > How to get started </span> </a> </li> <li class="devsite-nav-item"> <a href="https://codelabs.developers.google.com/?product=googleworkspace" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Codelabs" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Codelabs </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/support" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer support" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer support </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Updates </span> </span> </li> <li class="devsite-nav-item"> <a href="https://developers.googleblog.com/search/?query=Google+Workspace" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/preview" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Previews" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Previews </span> </a> </li> <li class="devsite-nav-item"> <a href="/workspace/newsletters" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Newsletter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Newsletter </span> </a> </li> <li class="devsite-nav-item"> <a href="https://twitter.com/workspacedevs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: X (Twitter)" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > X (Twitter) </span> </a> </li> <li class="devsite-nav-item"> <a href="https://www.youtube.com/channel/UCUcg6az6etU_gRtZVAhBXaw" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: YouTube" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > YouTube </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" has-book-nav > <devsite-content> <article class="devsite-article"> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://developers.google.com/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/workspace" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Google Workspace" > Google Workspace </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://developers.google.com/workspace/add-ons/overview" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="3" track-type="globalNav" track-name="breadcrumb" track-metadata-position="3" track-metadata-eventdetail="Google Workspace Add-ons" > Add-ons </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <devsite-feedback position="header" project-name="Google Workspace Add-ons" product-id="717201" bucket="add-ons" context="" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="header" class="nocontent" project-feedback-url="https://issuetracker.google.com/issues/new?component=642720&template=1392206" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" project-support-url="https://developers.google.com/workspace/add-ons/workspace-support" > <button> Send feedback </button> </devsite-feedback> <h1 class="devsite-page-title" tabindex="-1"> UI style guide for Editor Add-ons </h1> <devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip> <div class="devsite-page-title-meta"><devsite-view-release-notes></devsite-view-release-notes></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded > </devsite-toc> <div class="devsite-article-body clearfix "> <p><a href="/workspace/add-ons/concepts/types#editor_add-ons">Editor Add-ons</a> build user interfaces (menus, sidebars, and dialogs) using Apps Script's <a href="/apps-script/reference/html/html-service">HTML service</a>. Because the interfaces are developed in HTML and CSS, they are highly customizable. However, when building your add-on interface you should design it to provide a great user experience.</p> <p>The best add-ons extend each editor naturally by using familiar controls and behaviors. When building a new add-on:</p> <ul> <li>Use the <a href="/workspace/add-ons/guides/css">add-ons CSS package</a> in your <a href="/apps-script/reference/html/html-service">HTML service</a> pages.</li> <li>When in doubt about design, find a similar dialog or sidebar in the editor and match it, or refer to an <a href="/workspace/add-ons/translate-addon-sample">add-on quickstart</a>.</li> <li>Follow this style guide to create a seamless experience.</li> </ul> <h2 id="text" data-text="Text" tabindex="-1">Text</h2> <h3 id="name" data-text="Add-on name" tabindex="-1">Add-on name</h3> <p>You must set your add-on's name when you <a href="/workspace/add-ons/how-tos/publishing-editor-addons">publish</a> it. The name appears in many places, such as the add-on store and within menus.</p> <ul> <li>Use title case.</li> <li>Avoid punctuation, especially parentheses, unless part of your brand.</li> <li>Keep it short—30 or fewer characters is best. Long names may be automatically truncated.</li> <li>Don’t include the name of the Google product the add-on is for (or use the word Google).</li> <li>Leave out version information.</li> <li>Make sure the add-on's published name is the same as the filename of the script project. The project name appears in the authorization dialog.</li> </ul> <table class="columns"> <tr> <th><span class="compare-no">Don't</span></th> <th><span class="compare-yes">Do</span></th> </tr> <tr> <td><img src="/static/apps-script/images/style-name-dont.svg" alt="Bad add-on names"></td> <td><img src="/static/apps-script/images/style-name-do.svg" alt="Good add-on names"></td> </tr> </table> <h3 id="writing_style" data-text="Writing style" tabindex="-1">Writing style</h3> <p>You shouldn’t need to write much. Most actions should be made clear through iconography, layout, and short labels. If you find a portion of your add-on needs more extensive explanation than short labels can provide, it's a best practice to create a separate web page describing your add-on and link to it.</p> <p>When writing UI text:</p> <ul> <li>Use sentence case (especially for buttons, labels, and menu items).</li> <li>Prefer short, simple text without jargon or acronyms.</li> </ul> <table class="columns"> <tr> <th><span class="compare-no">Don't</span></th> <th><span class="compare-yes">Do</span></th> </tr> <tr> <td> <devsite-iframe><iframe src="https://developers.google.com/frame/workspace/add-ons/guides/editor-style_168f3b103299084190c7fbc1eba1f61b8841b9032d7a98743e43a34648aa6df3.frame" class="framebox inherit-locale " allow="clipboard-write https://developers-dot-devsite-v2-prod.appspot.com" allowfullscreen is-upgraded></iframe></devsite-iframe> </td> <td> <devsite-iframe><iframe src="https://developers.google.com/frame/workspace/add-ons/guides/editor-style_ac1bc3b543d89e3cd999fa688efd2c5f22307c38aceeddac138a247a5b94c28f.frame" class="framebox inherit-locale " allow="clipboard-write https://developers-dot-devsite-v2-prod.appspot.com" allowfullscreen is-upgraded></iframe></devsite-iframe> </td> </tr> </table> <h3 id="post-install_tip" data-text="Post-install tip" tabindex="-1">Post-install tip</h3> <p>Your post-install tip pops up right after someone installs your add-on, and also shows up in Help. You have a couple sentences to help users get started quickly.</p> <ul> <li>Start with an action word.</li> <li>Describe the first step for using your add-on.</li> <li>If you have a main UI, such as a sidebar, explain how to open it.</li> <li>Don’t promo your add-on here—it’s already installed.</li> </ul> <table class="columns"> <tr> <th><span class="compare-no">Don't</span></th> <th><span class="compare-yes">Do</span></th> </tr> <tr> <td><img src="/static/apps-script/images/style-post-install-dont.svg" alt="Bad post-install tip"></td> <td><img src="/static/apps-script/images/style-post-install-do.svg" alt="Good post-install tip"></td> </tr> </table> <h3 id="menu_items" data-text="Menu items" tabindex="-1">Menu items</h3> <p>Unlike regular Apps Script projects, add-ons don't appear in the script editor or script manager; users cannot run add-on scripts directly. Instead, every add-on gets a spot in the <a href="/workspace/add-ons/concepts/menus">add-ons menu</a>. The menu (and possibly a <a href="#custom_user_interfaces">dialog or sidebar</a>) let users interact with the add-on.</p> <ul> <li>The menu is a key part of how users control your add-on, so design its structure and wording carefully.</li> <li>Avoid menu items that simply repeat your add-on’s name. Instead, start with an action word.</li> <li>If your main menu item begins a workflow and there's no single verb that describes what it does, call it "Start". This pattern is used in the <a href="/workspace/add-ons/editors/docs/quickstart/translate">Docs add-on quickstart</a>.</li> <li>Unless your menu has more than six items, try not to use sub-menus. They can be finicky and hard to select.</li> <li>Describe the task, not the UI component that the menu item displays.</li> </ul> <table class="columns"> <tr> <th><span class="compare-no">Don't</span></th> <th><span class="compare-yes">Do</span></th> </tr> <tr> <td><img src="/static/apps-script/images/style-menus-dont.svg" alt="Bad menu-item labels"></td> <td><img src="/static/apps-script/images/style-menus-do.svg" alt="Good menu-item labels"></td> </tr> </table> <h3 id="error_messages" data-text="Error messages" tabindex="-1">Error messages</h3> <p>When something goes wrong, it’s important to use plain language. Explain the problem from the user’s standpoint, and suggest how to fix it.</p> <ul> <li>Don't allow the user to see any exceptions your code throws. Instead, use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch"><code translate="no" dir="ltr">try...catch</code></a> statements to intercept exceptions, then display a user-friendly error message with inline text styled in the <a href="/workspace/add-ons/guides/css#typography"><code translate="no" dir="ltr">error</code></a> class from the add-ons CSS package or an <a href="/apps-script/guides/dialogs#alert_dialogs">alert</a> dialog.</li> <li>Before you publish, check that your add-on doesn't log debug information to the JavaScript console; use <a href="/apps-script/guides/logging#stackdriver_logging">Stackdriver logging</a> instead.</li> </ul> <table class="columns"> <tr> <th><span class="compare-no">Don't</span></th> <th><span class="compare-yes">Do</span></th> </tr> <tr> <td><img src="/static/apps-script/images/style-errors-dont.svg" alt="Bad error message"></td> <td><img src="/static/apps-script/images/style-errors-do.svg" alt="Good error message"></td> </tr> </table> <h3 id="help_content" data-text="Help content" tabindex="-1">Help content</h3> <p>Every add-on's menu includes an automatic Help dialog. If you provide a help URL when you publish, the "Learn more" button links to that page. Unless your add-on is self-explanatory, please provide a page that explains how to use it.</p> <ul> <li>When possible, show instructions in a bulleted or numbered list. Walk users through to the end result, with clear references to named UI elements.</li> <li>Make sure your instructions clearly explain any requirements, like setting up a spreadsheet in a certain way.</li> <li>Feel free to link to your help content from your main user interface as well. If your add-on creates a fresh document, you can also display instructions in the body of the document.</li> </ul> <h2 id="custom_user_interfaces" data-text="Custom user interfaces" tabindex="-1">Custom user interfaces</h2> <p>Some simple Editor Add-ons can be controlled entirely by their menu, but most display a <a href="/workspace/add-ons/concepts/dialogs">sidebar or dialog</a> with custom content.</p> <ul> <li>Sidebars are best for persistent tools that people are likely to use repeatedly while referring to the content of their document or spreadsheet.</li> <li>Dialogs are best for single-use tools, settings pages, and important messages.</li> </ul> <h3 id="ui_text" data-text="UI text" tabindex="-1">UI text</h3> <p>In any dialog or sidebar, assume people only read the title and button labels. Can they still figure out what your interface does and make a good choice?</p> <ul> <li>Use a title and button labels that stand on their own.</li> <li>Avoid long blocks of descriptive text.</li> </ul> <h3 id="dialogs" data-text="Dialogs" tabindex="-1">Dialogs</h3> <p>Dialogs are great for tools people use once, then move on. For example, if your add-on lets people insert a graphic, you might display a dialog with choices of what to insert¸ then close the dialog when the graphic is inserted. Dialogs are also helpful for displaying your add-on’s settings, or for communicating an important message.</p> <ul> <li>Don't open a dialog (including an <a href="/apps-script/guides/dialogs">alert or prompt</a>) from another dialog—only display one at a time.</li> <li>For the dialog title, use a word or short phrase, leading with the most important word.</li> <li>Button labels should relate to the dialog title.</li> <li>Prefer two buttons, usually a primary action and "Cancel". For special cases that require a third button, consider the bottom-right corner.</li> <li>Put buttons in the bottom-left corner of the dialog. The blue primary button should be on the left, with any gray secondary buttons to the right.</li> </ul> <table class="columns"> <tr> <th><span class="compare-no">Don't</span></th> <th><span class="compare-yes">Do</span></th> </tr> <tr> <td><img src="/static/apps-script/images/style-dialogs-dont.svg" alt="Bad dialog title"></td> <td><img src="/static/apps-script/images/style-dialogs-do.svg" alt="Good dialog title"></td> </tr> </table> <h3 id="sidebars" data-text="Sidebars" tabindex="-1">Sidebars</h3> <p>Sidebars let people refer back to their document, spreadsheet, presentation, or form while making choices. They also let people use your add-on repeatedly. Whenever a new sidebar is opened, any previous sidebar closes automatically. They’re best for temporary modes that the user exits when done.</p> <ul> <li>Users might have other add-ons with their own sidebars. If two add-ons try to open sidebars simultaneously, only one is shown.</li> <li>Don't display a sidebar or dialog when a document first opens.</li> <li>Only add-ons operating in <a href="/workspace/add-ons/concepts/editor-auth-lifecycle#authorization_modes"><code translate="no" dir="ltr">AuthMode.FULL</code></a> can open sidebars or dialogs. You can use a <a href="#menu_items">menu item</a> to open a sidebar since this prompts the user to provide full authorization.</li> </ul> <h2 id="controls" data-text="Controls" tabindex="-1">Controls</h2> <p>Great add-on UIs leave their controls some breathing room. Adequate margins and padding go a long way, whereas dense controls can seem overwhelming. When in doubt, borrow a layout from the editor itself. For example, review existing dialogs in Google Docs, such as <strong>File > Page setup</strong>, when creating your own.</p> <p>The documentation for the <a href="/workspace/add-ons/guides/css">add-ons CSS package</a> provides sample markup for each of the types of controls below.</p> <h3 id="buttons" data-text="Buttons" tabindex="-1">Buttons</h3> <p>Use buttons to control your user interface's main actions rather than plain links or other elements.</p> <ul> <li>Avoid displaying more than one blue, red, or green button at a time. Gray buttons may appear repeatedly.</li> <li>Most button labels should be in sentence case and start with a verb. Red buttons, usually for create actions, should use all caps.</li> </ul> <table class="columns"> <tr> <th><span class="compare-no">Don't</span></th> <th><span class="compare-yes">Do</span></th> </tr> <tr> <td> <devsite-iframe><iframe src="https://developers.google.com/frame/workspace/add-ons/guides/editor-style_f7ee70d2c0dc0fe3780b460190d741f90d712b21862c650ac06c0f888322a880.frame" class="framebox inherit-locale " allow="clipboard-write https://developers-dot-devsite-v2-prod.appspot.com" allowfullscreen is-upgraded></iframe></devsite-iframe> </td> <td> <devsite-iframe><iframe src="https://developers.google.com/frame/workspace/add-ons/guides/editor-style_a6cc20d52c4b6d2ab68540e8e77f172ff4590a4c2bf4b5963c4d250605eebf3e.frame" class="framebox inherit-locale " allow="clipboard-write https://developers-dot-devsite-v2-prod.appspot.com" allowfullscreen is-upgraded></iframe></devsite-iframe> </td> </tr> </table> <h3 id="checkboxes_and_radio_buttons" data-text="Checkboxes and radio buttons" tabindex="-1">Checkboxes and radio buttons</h3> <p>Use checkboxes when people can select multiple options, or no option at all. Use radio buttons (or a select menu) when exactly one option must be selected.</p> <ul> <li>Don’t change checkboxes' behavior to mimic radio buttons.</li> <li>Don’t do anything immediately when they’re checked. People make mistakes. Wait until your users click a button to confirm their choices.</li> </ul> <h3 id="select_menus" data-text="Select menus" tabindex="-1">Select menus</h3> <p>Selects are a great way to offer a short list of alternatives.</p> <ul> <li>Sort the options alphabetically or by a logical scheme that all users can understand (like days of the week, starting from Sunday).</li> <li>If the list grows too long, consider using a different control. For example, you might display a scrollable list to give the menu more space and make it easier to navigate.</li> </ul> <h3 id="text_areas" data-text="Text areas" tabindex="-1">Text areas</h3> <p>If people need to type more than a few words, use a text area.</p> <ul> <li>Make text areas at least two lines tall so they’re easier to use and don’t look like text fields.</li> <li>Place labels on top.</li> </ul> <h3 id="text_fields" data-text="Text fields" tabindex="-1">Text fields</h3> <p>Use text fields if people only need to type a word or two.</p> <ul> <li>A text field’s width should suggest what you expect people to type in it.</li> <li>Avoid using placeholder text as a label, because it disappears on focus. Placeholder text is useful for giving examples or extra detail.</li> <li>Place labels on top, but feel free to lay out short text fields side-by-side.</li> </ul> <h2 id="branding" data-text="Branding" tabindex="-1">Branding</h2> <h3 id="in_your" data-text="In your add-on" tabindex="-1">In your add-on</h3> <p>If you’d like to include branding, keep it brief and light. This helps people focus on your UI, and makes your add-on feel like part of the editor.</p> <ul> <li>All aspects of your add-on must follow the <a href="/chrome/web-store/branding">branding guidelines</a>.</li> <li>Don’t include the word “Google” or use Google product icons.</li> <li>Text should be no more than a few words and styled in the <a href="/workspace/add-ons/guides/css#typography"><code translate="no" dir="ltr">gray</code></a> class from the add-ons CSS package.</li> <li>Graphics should be on a white background and no more than 200px × 60px.</li> <li>For dialogs, branding should be in the bottom-right corner.</li> <li>For sidebars, branding can be at the top or bottom.</li> </ul> <h3 id="in_the_store" data-text="In the store" tabindex="-1">In the store</h3> <p>In order to publish an Editor Add-on, you need a <a href="/workspace/add-ons/how-tos/publishing-editor-addons#required_assets">number of image assets</a>. These assets are used to construct the add-on store listing.</p> <ul> <li>All aspects of your store listing must follow the <a href="/chrome/web-store/branding">branding guidelines</a>.</li> <li>For more details on the images you need to provide, see the <a href="/chrome/web-store/docs/images">image guidelines</a>.</li> </ul> <h2 id="accessibility" data-text="Accessibility" tabindex="-1">Accessibility</h2> <p>Everyone should be able to enjoy your add-on, whether they see colors differently, use a screen reader, or have other needs. Accessibility is a broad topic that can’t be fully covered in this style guide. One helpful resource is the <a href="http://www.google.com/accessibility/">Google Accessibility</a> site. But here are a few tips to get started:</p> <ul> <li>Make sure you can navigate to all UI controls with the keyboard. Add <code translate="no" dir="ltr">tabindex=0</code> to custom controls (like those made with <code translate="no" dir="ltr"><div></code>) so people can tab to them. Consider if other keys should be supported too, such as arrows for a list.</li> <li>Some people may use a screen reader with your add-on. Thus, images should have an <a href="http://diveintoaccessibility.info/day_23_providing_text_equivalents_for_images.html"><code translate="no" dir="ltr">alt</code> attribute</a>, and custom controls should have <a href="http://www.w3.org/TR/wai-aria/">ARIA attributes</a> to describe their use.</li> <li>Don’t rely solely on color to communicate state. Use icons and text too.</li> </ul> <p>If you use standard web controls, like those described earlier in this guide, making your add-on accessible is easier.</p> <devsite-hats-survey class="nocontent" hats-id="3KyAora5x0eGRuQsCn30V8okzuYm" listnr-id="717201"></devsite-hats-survey> </div> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <devsite-feedback position="footer" project-name="Google Workspace Add-ons" product-id="717201" bucket="add-ons" context="" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="footer" class="nocontent" project-feedback-url="https://issuetracker.google.com/issues/new?component=642720&template=1392206" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" project-support-url="https://developers.google.com/workspace/add-ons/workspace-support" > <button> Send feedback </button> </devsite-feedback> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-content-footer class="nocontent"> <p>Except as otherwise noted, the content of this page is licensed under the <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates.</p> <p>Last updated 2024-10-23 UTC.</p> </devsite-content-footer> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Google Workspace Add-ons" product-id="717201" bucket="add-ons" context="" version="t-devsite-webserver-20241114-r00-rc02.464922260396498922" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" class="nocontent" project-feedback-url="https://issuetracker.google.com/issues/new?component=642720&template=1392206" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/touchicon-180-new.png" project-support-url="https://developers.google.com/workspace/add-ons/workspace-support" > <button> Need to tell us more? </button> </devsite-feedback> </template> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-10-23 UTC."],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> <nav class="devsite-footer-promos nocontent" aria-label="Promotions"> <ul class="devsite-footer-promos-list"> <li class="devsite-footer-promo"> <a href="https://developers.googleblog.com/search/?query=Google+Workspace" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer" data-label="Promo - Google Workspace Developers Blog" target="_blank" > <picture> <img class="devsite-footer-promo-icon" src="https://www.gstatic.com/images/branding/product/2x/google_cloud_64dp.png" loading="lazy" alt="Blog"> </picture> <span class="devsite-footer-promo-label"> Blog </span> </a> <div class="devsite-footer-promo-description">Read the Google Workspace Developers blog</div> </li> <li class="devsite-footer-promo"> <a href="https://twitter.com/workspacedevs" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer" target="_blank" data-label="Promo - Google Workspace on X (Twitter)" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-x.svg" loading="lazy" alt="X (Twitter)"> </picture> <span class="devsite-footer-promo-label"> X (Twitter) </span> </a> <div class="devsite-footer-promo-description">Follow @workspacedevs on X (Twitter)</div> </li> <li class="devsite-footer-promo"> <a href="https://github.com/googleworkspace" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer" data-label="Promo - Google Workspace Github" target="_blank" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-github.svg" loading="lazy" alt="Code Samples"> </picture> <span class="devsite-footer-promo-label"> Code Samples </span> </a> <div class="devsite-footer-promo-description">Explore our sample apps or copy them to build your own</div> </li> <li class="devsite-footer-promo"> <a href="https://codelabs.developers.google.com/?product=googleworkspace" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer" target="_blank" data-label="Promo - Google Workspace Codelabs" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/developers-logo-color.svg" loading="lazy" alt="Codelabs"> </picture> <span class="devsite-footer-promo-label"> Codelabs </span> </a> <div class="devsite-footer-promo-description">Try a guided, hands-on coding experience</div> </li> <li class="devsite-footer-promo"> <a href="https://www.youtube.com/channel/UCUcg6az6etU_gRtZVAhBXaw" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer" target="_blank" data-label="Promo - Google Workspace on YouTube" > <picture> <img class="devsite-footer-promo-icon" src="/static/site-assets/logo-youtube.svg" loading="lazy" alt="Videos"> </picture> <span class="devsite-footer-promo-label"> Videos </span> </a> <div class="devsite-footer-promo-description">Subscribe to our YouTube channel</div> </li> </ul> </nav> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Google Workspace for Developers</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="/workspace" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Linkbox - Platform overview"data-category="Workspace Footer"> Platform overview </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/workspace/products" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer"data-label="Linkbox - Developer products"> Developer products </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/workspace/support" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer"data-label="Linkbox - Developer support"> Developer support </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/workspace/terms" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer"data-label="Linkbox - Terms of Service"> Terms of Service </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Tools</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://admin.google.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer"data-label="Linkbox - Admin console"target="admin-console"> Admin console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://script.google.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Linkbox - Apps Script Dashboard"data-category="Workspace Footer"target="_blank"> Apps Script Dashboard </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://console.cloud.google.com/workspace-api" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer"target="console"data-label="Linkbox - Google Cloud console"> Google Cloud console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/workspace/explore" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer"data-label="Linkbox - APIs Explorer"> APIs Explorer </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Connect</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developers.googleblog.com/search/?query=Google+Workspace" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Linkbox - Blog"target="_blank"data-category="Workspace Footer"> Blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/workspace/newsletters" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer"data-label="Linkbox - Newsletter"> Newsletter </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/workspacedevs" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer"target="_blank"data-label="Linkbox - X (Twitter)"> X (Twitter) </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/channel/UCUcg6az6etU_gRtZVAhBXaw" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" target="_blank"data-label="Linkbox - YouTube"data-category="Workspace Footer"> YouTube </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-sites" aria-label="Other Google Developers websites"> <a href="https://developers.google.com/" class="devsite-footer-sites-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Developers Link"> <picture> <img class="devsite-footer-sites-logo" src="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/lockup-google-for-developers.svg" loading="lazy" alt="Google Developers"> </picture> </a> <ul class="devsite-footer-sites-list"> <li class="devsite-footer-sites-item"> <a href="//developer.android.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Android Link" > Android </a> </li> <li class="devsite-footer-sites-item"> <a href="//developer.chrome.com/home" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Chrome Link" > Chrome </a> </li> <li class="devsite-footer-sites-item"> <a href="//firebase.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Firebase Link" > Firebase </a> </li> <li class="devsite-footer-sites-item"> <a href="//cloud.google.com" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google Cloud Platform Link" > Google Cloud Platform </a> </li> <li class="devsite-footer-sites-item"> <a href="//ai.google.dev/" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Google AI Link" > Google AI </a> </li> <li class="devsite-footer-sites-item"> <a href="/products" class="devsite-footer-sites-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer All products Link" > All products </a> </li> </ul> </nav> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="/terms/site-terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> <li class="devsite-footer-utility-item devsite-footer-utility-button"> <span class="devsite-footer-utility-description">Sign up for the Google for Developers newsletter</span> <a class="devsite-footer-utility-link gc-analytics-event" href="/newsletter/subscribe" data-category="Site-Wide Custom Events" data-label="Footer Subscribe link" > Subscribe </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es" >Español</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> <devsite-concierge data-info-panel data-ai-panel data-api-explorer-panel > </devsite-concierge> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[{"dimensions": {"dimension4": "Google Workspace Add-ons", "dimension5": "en", "dimension3": false, "dimension11": false, "dimension1": "Signed out", "dimension6": "en"}, "gaid": "UA-24532603-1", "metrics": {"ratings_value": "metric1", "ratings_count": "metric2"}, "purpose": 1}]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [{"id": "G-272J68FCRF", "purpose": 1}, {"id": "G-YYP88VSJWR", "purpose": 0}], "ga4p": [{"id": "G-272J68FCRF", "purpose": 1}], "gtm": [], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "Google Workspace Add-ons", "signedIn": "False", "tenant": "developers", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="gM1Ki5nKXXRrzJc7VZiLtuX3oom2KR"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers","https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/developers/images/favicon-new.png","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,116,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyAP-jjEJBzmIyKR4F-3XITp8yM9T1gEEI8","AIzaSyB6xiKGDR5O3Ak2okS4rLkauxGUG7XP0hg","developers.google.com","AIzaSyAQk0fBONSGUqCNznf6Krs82Ap1-NV6J4o","AIzaSyCCxcqdrZ_7QMeLCRY20bh_SXdAYqy70KY",null,null,null,["Profiles__enable_page_saving","CloudShell__cloud_shell_button","Search__enable_ai_eligibility_checks","Concierge__enable_pushui","EngEduTelemetry__enable_engedu_telemetry","Search__enable_ai_search_summaries_restricted","Profiles__enable_profile_collections","Profiles__require_profile_eligibility_for_signin","Cloud__enable_free_trial_server_call","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__emergency_css","Profiles__enable_complete_playlist_endpoint","Cloud__enable_cloud_shell","Search__enable_suggestions_from_borg","DevPro__enable_developer_subscriptions","Profiles__enable_recognition_badges","Profiles__enable_dashboard_curated_recommendations","Concierge__enable_concierge_restricted","Search__enable_dynamic_content_confidential_banner","TpcFeatures__enable_required_headers","Cloud__enable_cloudx_ping","Search__enable_ai_search_summaries","Profiles__enable_awarding_url","MiscFeatureFlags__enable_firebase_utm","Concierge__enable_concierge","BookNav__enable_tenant_cache_key","Profiles__enable_completecodelab_endpoint","Profiles__enable_release_notes_notifications","MiscFeatureFlags__enable_explain_this_code","Search__enable_page_map","MiscFeatureFlags__enable_variable_operator","DevPro__enable_cloud_innovators_plus","Cloud__enable_cloud_facet_chat","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_public_developer_profiles","Experiments__reqs_query_experiments","Cloud__enable_cloud_dlp_service","MiscFeatureFlags__developers_footer_dark_image","Cloud__enable_cloudx_experiment_ids","Cloud__enable_cloud_shell_fte_user_flow","Profiles__enable_developer_profiles_callout","Cloud__enable_legacy_calculator_redirect","MiscFeatureFlags__enable_project_variables","Significatio__enable_by_tenant","CloudShell__cloud_code_overflow_menu","Analytics__enable_clearcut_logging","Cloud__enable_llm_concierge_chat","MiscFeatureFlags__enable_view_transitions"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://developerprofiles-pa.clients6.google.com",[1,"developers","Google for Developers","developers.google.com",null,"developers-dot-devsite-v2-prod.appspot.com",null,null,[1,1,[1],null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],[1,null,null,[1,20],"/recommendations/information"],null,null,null,[1,1,1],[1,1,null,1,1]],null,[null,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,null,1,null,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme-new.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[6,1,14,15,20,22,23,29,32,36],null,[[null,null,null,[3,7,10,2,39,17,4,32,24,11,12,13,34,15,25],null,null,[1,[["docType","Choose a content type",[["Tutorial",null,null,null,null,null,null,null,null,"Tutorial"],["Guide",null,null,null,null,null,null,null,null,"Guide"],["Sample",null,null,null,null,null,null,null,null,"Sample"]]],["product","Choose a product",[["Android",null,null,null,null,null,null,null,null,"Android"],["ARCore",null,null,null,null,null,null,null,null,"ARCore"],["ChromeOS",null,null,null,null,null,null,null,null,"ChromeOS"],["Firebase",null,null,null,null,null,null,null,null,"Firebase"],["Flutter",null,null,null,null,null,null,null,null,"Flutter"],["Assistant",null,null,null,null,null,null,null,null,"Google Assistant"],["GoogleCloud",null,null,null,null,null,null,null,null,"Google Cloud"],["GoogleMapsPlatform",null,null,null,null,null,null,null,null,"Google Maps Platform"],["GooglePay",null,null,null,null,null,null,null,null,"Google Pay & Google Wallet"],["GooglePlay",null,null,null,null,null,null,null,null,"Google Play"],["Tensorflow",null,null,null,null,null,null,null,null,"TensorFlow"]]],["category","Choose a topic",[["AiAndMachineLearning",null,null,null,null,null,null,null,null,"AI and Machine Learning"],["Data",null,null,null,null,null,null,null,null,"Data"],["Enterprise",null,null,null,null,null,null,null,null,"Enterprise"],["Gaming",null,null,null,null,null,null,null,null,"Gaming"],["Mobile",null,null,null,null,null,null,null,null,"Mobile"],["Web",null,null,null,null,null,null,null,null,"Web"]]]]]],[1,1],null,1],[[["UA-24532603-1"],["UA-22084204-5"],null,null,["UA-24532603-5"],null,null,[["G-272J68FCRF"],null,null,[["G-272J68FCRF",2]]],[["UA-24532603-1",2]],null,[["UA-24532603-5",2]],null,1],[[11,8],[6,5],[5,4],[1,1],[12,9],[16,13],[4,3],[13,10],[15,12],[14,11],[3,2]],[[1,1],[2,2]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"developers.devsite.google"],null,"pk_live_5170syrHvgGVmSx9sBrnWtA5luvk9BwnVcvIi7HizpwauFG96WedXsuXh790rtij9AmGllqPtMLfhe2RSwD6Pn38V00uBCydV4m"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

UI style guide for Editor Add-ons | Google Workspace Add-ons | Google for Developers