Add interactive UI elements to cards | Google Chat

<!doctype html> <html lang="en" dir="ltr"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://developers.google.com/workspace/chat/design-interactive-card-dialog","20241006202532","https://web.archive.org/","web","/_static/", "1728246332"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <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="/web/20241006202532/https://developers.google.com/_pwa/developers/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//web.archive.org/web/20241006202532/https://www.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20241006202532/https://fonts.gstatic.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20241006202532/https://fonts.googleapis.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20241006202532/https://apis.google.com/" crossorigin> <link rel="preconnect" href="//web.archive.org/web/20241006202532/https://www.google-analytics.com/" crossorigin><link rel="stylesheet" href="//web.archive.org/web/20241006202532cs_/https://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="//web.archive.org/web/20241006202532cs_/https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"><link rel="stylesheet" href="https://web.archive.org/web/20241006202532cs_/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2/developers/css/app.css"> <link rel="shortcut icon" href="https://web.archive.org/web/20241006202532im_/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2/developers/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://web.archive.org/web/20241006202532im_/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2/developers/images/touchicon-180-new.png"><link rel="canonical" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog"><link rel="search" type="application/opensearchdescription+xml" title="Google for Developers" href="https://web.archive.org/web/20241006202532/https://developers.google.com/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog"/><link rel="alternate" hreflang="x-default" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog"/><link rel="alternate" hreflang="ar" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=ar"/><link rel="alternate" hreflang="bn" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=bn"/><link rel="alternate" hreflang="zh-Hans" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=zh-cn"/><link rel="alternate" hreflang="zh-Hant" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=zh-tw"/><link rel="alternate" hreflang="fa" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=fa"/><link rel="alternate" hreflang="fr" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=fr"/><link rel="alternate" hreflang="de" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=de"/><link rel="alternate" hreflang="he" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=he"/><link rel="alternate" hreflang="hi" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=hi"/><link rel="alternate" hreflang="id" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=id"/><link rel="alternate" hreflang="it" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=it"/><link rel="alternate" hreflang="ja" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=ja"/><link rel="alternate" hreflang="ko" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=ko"/><link rel="alternate" hreflang="pl" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=pl"/><link rel="alternate" hreflang="pt-BR" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=pt-br"/><link rel="alternate" hreflang="ru" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=ru"/><link rel="alternate" hreflang="es-419" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=es-419"/><link rel="alternate" hreflang="th" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=th"/><link rel="alternate" hreflang="tr" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=tr"/><link rel="alternate" hreflang="vi" href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog?hl=vi"/><title>Add interactive UI elements to cards  |  Google Chat  |  Google for Developers</title> <meta property="og:title" content="Add interactive UI elements to cards | Google Chat | Google for Developers"><meta property="og:url" content="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog"><meta property="og:image" content="https://web.archive.org/web/20241006202532im_/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2/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://web.archive.org/web/20241006202532/https://schema.org", "@type": "Article", "headline": "Add interactive UI elements to cards" } </script><script type="application/ld+json"> { "@context": "https://web.archive.org/web/20241006202532/https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Google Workspace", "item": "https://web.archive.org/web/20241006202532/https://developers.google.com/workspace" },{ "@type": "ListItem", "position": 2, "name": "Google Chat", "item": "https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat" },{ "@type": "ListItem", "position": 3, "name": "Add interactive UI elements to cards", "item": "https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog" }] } </script> <link rel="stylesheet" href="/web/20241006202532cs_/https://developers.google.com/extras.css"></head> <body class="" template="page" theme="white" type="article" layout="docs" concierge 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://web.archive.org/web/20241006202532/https://developers.google.com/workspace"> <div class="devsite-product-logo-container" size="medium"> <picture> <img class="devsite-product-logo" alt="Google Workspace" src="https://web.archive.org/web/20241006202532im_/https://fonts.gstatic.com/s/i/productlogos/googleg/v6/16px.svg" srcset="https://web.archive.org/web/20241006202532im_/https://fonts.gstatic.com/s/i/productlogos/googleg/v6/16px.svg" sizes="64px" loading="lazy"> </picture> </div> </a> <ul class="devsite-breadcrumb-list"> <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://web.archive.org/web/20241006202532/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> </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://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat" track-metadata-eventdetail="https://developers.google.com/workspace/chat" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - google chat" track-metadata-module="primary nav" aria-label="Google Chat, selected" data-category="Site-Wide Custom Events" data-label="Tab: Google Chat" track-name="google chat"> Google Chat </a> </tab> <tab class="devsite-dropdown "> <a href="https://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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-label="Tab menu: All products - Admin console" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> Admin console </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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-category="Workspace top menu navigation" data-label="Tab menu: All products - Cloud Search"> <div class="devsite-nav-item-title"> Cloud Search </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Calendar"> <div class="devsite-nav-item-title"> Google Calendar </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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-label="Tab menu: All products - Google Chat" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> Google Chat </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Classroom"> <div class="devsite-nav-item-title"> Google Classroom </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Docs"> <div class="devsite-nav-item-title"> Google Docs </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Drive"> <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://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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-label="Tab menu: All products - Google Keep" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> Google Keep </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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-label="Tab menu: All products - Google Meet" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> Google Meet </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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-category="Workspace top menu navigation" data-label="Tab menu: All products - Google Sheets"> <div class="devsite-nav-item-title"> Google Sheets </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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-label="Tab menu: All products - Google Sites" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> Google Sites </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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-label="Tab menu: All products - Google Tasks" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> Google Tasks </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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-label="Tab menu: All products - Apps Script" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> Apps Script </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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-category="Workspace top menu navigation" data-label="Tab menu: All products - Drive apps"> <div class="devsite-nav-item-title"> Drive apps </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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 target="admin-console" data-label="Tab menu: Resources - Admin console" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> Admin console </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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 target="_blank" data-category="Workspace top menu navigation" 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://web.archive.org/web/20241006202532/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" data-category="Workspace top menu navigation" target="console"> <div class="devsite-nav-item-title"> Google Cloud console </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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 target="_blank" data-category="Workspace top menu navigation" data-label="Tab menu: Resources - Card Builder"> <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://web.archive.org/web/20241006202532/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-label="Tab menu: Resources - How to get started" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> How to get started </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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 data-category="Workspace top menu navigation" data-label="Tab menu: Resources - Codelabs" target="_blank"> <div class="devsite-nav-item-title"> Codelabs </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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" target="_blank" data-category="Workspace top menu navigation"> <div class="devsite-nav-item-title"> Blog </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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-category="Workspace top menu navigation" data-label="Tab menu: Resources - Developer previews"> <div class="devsite-nav-item-title"> Developer Previews </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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-label="Tab menu: Resources - X (Twitter)" data-category="Workspace top menu navigation" target="_blank"> <div class="devsite-nav-item-title"> X (Twitter) </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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 data-category="Workspace top menu navigation" data-label="Tab menu: Resources - YouTube" target="_blank"> <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 Chat" tenant-name="Google for Developers" project-scope="/workspace/chat" url-scoped="https://developers.google.com/s/results/workspace/chat"> <form class="devsite-search-form" action="https://web.archive.org/web/20241006202532/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"> Sign in </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://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat" 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 Chat"> Google Chat </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://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat" track-metadata-eventdetail="https://developers.google.com/workspace/chat" 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://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/overview" track-metadata-eventdetail="https://developers.google.com/workspace/chat/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://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/api/reference" track-metadata-eventdetail="https://developers.google.com/workspace/chat/api/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://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/samples" track-metadata-eventdetail="https://developers.google.com/workspace/chat/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://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/support" track-metadata-eventdetail="https://developers.google.com/workspace/chat/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> <tab> <a href="https://web.archive.org/web/20241006202532/https://addons.gsuite.google.com/uikit/builder" track-metadata-eventdetail="https://addons.gsuite.google.com/uikit/builder" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - card builder" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Card builder" track-name="card builder"> Card builder </a> </tab> </nav> </devsite-tabs> </div> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars> <div class="devsite-book-nav-filter"> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> </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://web.archive.org/web/20241006202532/https://developers.google.com/workspace"> <div class="devsite-product-logo-container" size="medium"> <picture> <img class="devsite-product-logo" alt="Google Workspace" src="https://web.archive.org/web/20241006202532im_/https://fonts.gstatic.com/s/i/productlogos/googleg/v6/16px.svg" srcset="https://web.archive.org/web/20241006202532im_/https://fonts.gstatic.com/s/i/productlogos/googleg/v6/16px.svg" sizes="64px" loading="lazy"> </picture> </div> </a> <ul class="devsite-breadcrumb-list"> <li class="devsite-breadcrumb-item devsite-has-google-wordmark"> <a href="https://web.archive.org/web/20241006202532/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> </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="/web/20241006202532/https://developers.google.com/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"> Home </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/workspace/chat" class="devsite-nav-title gc-analytics-event devsite-nav-active" data-category="Site-Wide Custom Events" data-label="Tab: Google Chat" track-name="google chat" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google Chat" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> Google Chat </a> <ul class="devsite-nav-responsive-tabs"> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/workspace/chat" 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"> Overview </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/workspace/chat/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"> Guides </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/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"> Reference </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/workspace/chat/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"> Samples </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/workspace/chat/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"> Support </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/https://addons.gsuite.google.com/uikit/builder" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Card builder" track-name="card builder" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Card builder" track-type="globalNav" track-metadata-eventdetail="globalMenu" track-metadata-position="nav"> Card builder </a> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> All products </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> More </li> </ul> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Resources </a> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> More </li> </ul> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="_book"> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Get started </div></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/overview">Develop with Google Chat overview</a></li> <li class="devsite-nav-item devsite-nav-external"><a href="/web/20241006202532/https://developers.google.com/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">Develop on Google Workspace</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"> Quickstarts </div><ul class="devsite-nav-section"><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"> Call the Chat API </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/guides/quickstart/apps-script" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/api/guides/quickstart/apps-script" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/api/guides/quickstart/apps-script">Apps Script</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/guides/quickstart/java" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/api/guides/quickstart/java" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/api/guides/quickstart/java">Java</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/guides/quickstart/nodejs" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/api/guides/quickstart/nodejs" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/api/guides/quickstart/nodejs">Node.js</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/guides/quickstart/python" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/api/guides/quickstart/python" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/api/guides/quickstart/python">Python</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"> Build a basic interactive Chat app </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/quickstart/gcf-app" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/quickstart/gcf-app" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/quickstart/gcf-app">HTTP service</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/quickstart/apps-script-app" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/quickstart/apps-script-app" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/quickstart/apps-script-app">Apps Script</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/build-dialogflow-chat-app-natural-language" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/build-dialogflow-chat-app-natural-language" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/build-dialogflow-chat-app-natural-language">Dialogflow CX</a></li><li class="devsite-nav-item devsite-nav-external"><a href="https://web.archive.org/web/20241006202532/https://cloud.google.com/dialogflow/es/docs/integrations/google-chat" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://cloud.google.com/dialogflow/es/docs/integrations/google-chat" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://cloud.google.com/dialogflow/es/docs/integrations/google-chat" target="_blank">Dialogflow ES</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/quickstart/webhooks" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/quickstart/webhooks" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/quickstart/webhooks">Webhook</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/quickstart/pub-sub" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/quickstart/pub-sub" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/quickstart/pub-sub">Pub/Sub</a></li><li class="devsite-nav-item devsite-nav-external"><a href="https://web.archive.org/web/20241006202532/https://support.google.com/appsheet/answer/12923581" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: https://support.google.com/appsheet/answer/12923581" track-type="bookNav" track-name="click" track-metadata-eventdetail="https://support.google.com/appsheet/answer/12923581" target="_blank">AppSheet</a></li></ul></div></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"> Authenticate and authorize </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/authenticate-authorize" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/authenticate-authorize" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/authenticate-authorize">Authenticate with Chat</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/authenticate-authorize-chat-user" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/authenticate-authorize-chat-user" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/authenticate-authorize-chat-user">Authenticate as a user</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/authenticate-authorize-chat-app" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/authenticate-authorize-chat-app" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/authenticate-authorize-chat-app">Authenticate as an app</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/verify-requests-from-chat" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/verify-requests-from-chat" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/verify-requests-from-chat">Verify requests from Chat</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"> Call the Chat API </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/api-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/api-overview">Chat API overview</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/libraries" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/libraries" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/libraries">Install client libraries</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/configure-chat-api" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/configure-chat-api" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/configure-chat-api">Configure the Chat API</a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Plan </div></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/audience" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/audience" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/audience">Identify your users' needs</a></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/journeys" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/journeys" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/journeys">Define all user journeys</a></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/structure" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/structure" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/structure">Choose a Chat app architecture</a></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/interactivity" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/interactivity" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/interactivity">Design user interactions</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Build </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"> Send and manage messages </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/messages-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/messages-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/messages-overview">Overview</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/create-messages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/create-messages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/create-messages">Send a message</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/format-messages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/format-messages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/format-messages">Format messages</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"> Build user interfaces </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/design-components-card-dialog" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/design-components-card-dialog" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/design-components-card-dialog">Build cards</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/add-text-image-card-dialog" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/add-text-image-card-dialog" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/add-text-image-card-dialog">Add text and images</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/design-interactive-card-dialog" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/design-interactive-card-dialog" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/design-interactive-card-dialog">Add interactive UI elements</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"> Manage messages </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/get-messages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/get-messages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/get-messages">Get a message</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/list-messages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/list-messages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/list-messages">List messages</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/update-messages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/update-messages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/update-messages">Update messages</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/delete-messages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/delete-messages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/delete-messages">Delete a message</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/chat-archiving" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/chat-archiving" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/chat-archiving">Archive messages</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"> Check message read state </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/get-space-read-state" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/get-space-read-state" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/get-space-read-state">Get read state for a space message</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/update-space-read-state" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/update-space-read-state" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/update-space-read-state">Update read state for a space message</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/get-thread-read-state" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/get-thread-read-state" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/get-thread-read-state">Get read state for a thread message</a></li></ul></div></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"> Work with spaces </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/create-spaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/create-spaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/create-spaces">Create a space</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/set-up-spaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/set-up-spaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/set-up-spaces">Set up a space with initial members</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/get-spaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/get-spaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/get-spaces">Get details about a space</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/find-direct-message-in-spaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/find-direct-message-in-spaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/find-direct-message-in-spaces">Find a direct message space</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/list-spaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/list-spaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/list-spaces">List spaces</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/update-spaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/update-spaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/update-spaces">Update a space</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/delete-spaces" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/delete-spaces" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/delete-spaces">Delete a space</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"> Manage members in spaces </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/create-members" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/create-members" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/create-members">Invite or add a user, Google Group, or Chat app to a space</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/get-members" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/get-members" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/get-members">Get details about a membership</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/list-members" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/list-members" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/list-members">List members in a space</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/update-members" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/update-members" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/update-members">Make a user a space manager or regular member</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/delete-members" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/delete-members" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/delete-members">Remove a member from a space</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"> React to messages </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/create-reactions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/create-reactions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/create-reactions">Add a reaction to a message</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/list-reactions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/list-reactions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/list-reactions">List reactions for a message</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/delete-reactions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/delete-reactions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/delete-reactions">Delete a reaction from a message</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"> Upload and download attachments </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/upload-media-attachments" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/upload-media-attachments" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/upload-media-attachments">Upload media as a file attachment</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/download-media-attachments" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/download-media-attachments" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/download-media-attachments">Download media as a file attachment</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/get-media-attachments" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/get-media-attachments" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/get-media-attachments">Get metadata about a message attachment</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"> Interact with users </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/receive-respond-interactions" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/receive-respond-interactions" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/receive-respond-interactions">Receive and respond to user interactions</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/slash-commands" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/slash-commands" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/slash-commands">Respond to slash commands</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/dialogs" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/dialogs" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/dialogs">Open interactive dialogs</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/preview-links" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/preview-links" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/preview-links">Preview links</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/send-app-home-card-message" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/send-app-home-card-message" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/send-app-home-card-message">Build a homepage for your Chat app</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/read-form-data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/read-form-data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/read-form-data">Collect and process information from users</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/connect-web-services-tools" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/connect-web-services-tools" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/connect-web-services-tools">Connect to external systems and tools</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"> Work with events from Google Chat </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/events-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/events-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/events-overview">Overview</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/get-space-event" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/get-space-event" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/get-space-event">Get details about a space event</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/list-space-events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/list-space-events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/list-space-events">List events from a space</a></li><li class="devsite-nav-item devsite-nav-external"><a href="/web/20241006202532/https://developers.google.com/workspace/events" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/events" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/events" target="_blank">Subscribe to events using the Google Workspace Events API</a></li></ul></div></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/identify-reference-users" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/identify-reference-users" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/identify-reference-users">Identify and specify Google Chat users</a></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/write-error-messages" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/write-error-messages" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/write-error-messages">Write actionable error messages</a></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/samples" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/samples" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/samples">Explore Chat app samples and tutorials</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Deploy, test, and troubleshoot </div></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/create-manage-deployments" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/create-manage-deployments" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/create-manage-deployments">Create and manage deployments</a></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/test-interactive-features" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/test-interactive-features" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/test-interactive-features">Test interactive features</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"> Log errors </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/turn-on-error-logging" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/turn-on-error-logging" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/turn-on-error-logging">Turn on error logging</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/query-logs" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/query-logs" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/query-logs">Query error logs</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"> Troubleshoot </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/troubleshoot-fix-chat-errors" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/troubleshoot-fix-chat-errors" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/troubleshoot-fix-chat-errors">Overview</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/troubleshoot-chat-apps" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/troubleshoot-chat-apps" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/troubleshoot-chat-apps">Troubleshoot Chat app errors</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/troubleshoot-cards" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/troubleshoot-cards" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/troubleshoot-cards">Troubleshoot card and dialog errors</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/debug-apps" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/debug-apps" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/debug-apps">Debug Chat apps</a></li></ul></div></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Publish </div></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/apps-publish" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/apps-publish" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/apps-publish">Publish Google Chat apps</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"> Publish to Google Workspace Marketplace </div><ul class="devsite-nav-section"><li class="devsite-nav-item devsite-nav-external"><a href="/web/20241006202532/https://developers.google.com/workspace/marketplace/how-to-publish" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/marketplace/how-to-publish" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/marketplace/how-to-publish" target="_blank">Publish apps to the Google Workspace Marketplace</a></li><li class="devsite-nav-item devsite-nav-external"><a href="/web/20241006202532/https://developers.google.com/workspace/marketplace/about-app-review" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/marketplace/about-app-review" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/marketplace/about-app-review" target="_blank">Process and review requirements for public apps</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"> Maintain published apps </div><ul class="devsite-nav-section"><li class="devsite-nav-item devsite-nav-external"><a href="/web/20241006202532/https://developers.google.com/workspace/marketplace/manage-app-listing" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/marketplace/manage-app-listing" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/marketplace/manage-app-listing" target="_blank">Update or unpublish an app listing in the Google Workspace Marketplace</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"> Migrate Chat apps after merging organizations </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/determine-chat-app-migration" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/determine-chat-app-migration" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/determine-chat-app-migration">Determine if Chat apps need to migrate</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/migrate-apps" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/migrate-apps" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/migrate-apps">Migrate Chat apps to a new organization</a></li></ul></div></li></ul></div></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/turn-off-app" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/turn-off-app" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/turn-off-app">Turn off or delete an app</a></li> <li class="devsite-nav-item devsite-nav-heading"><div class="devsite-nav-title devsite-nav-title-no-path"> Manage Chat as a Google Workspace administrator </div></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/admin-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/admin-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/admin-overview">Overview</a></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/search-manage-admin" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/search-manage-admin" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/search-manage-admin">Search for and manage spaces in your organization</a></li> <li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/space-target-audience" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/space-target-audience" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/space-target-audience">Make a space discoverable to specific users</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"> Migrate your organization to Chat </div><ul class="devsite-nav-section"><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/import-data-overview" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/import-data-overview" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/import-data-overview">Overview</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/authorize-import" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/authorize-import" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/authorize-import">Authorize Chat apps to import data</a></li><li class="devsite-nav-item"><a href="/web/20241006202532/https://developers.google.com/workspace/chat/import-data" class="devsite-nav-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Book nav link, pathname: /workspace/chat/import-data" track-type="bookNav" track-name="click" track-metadata-eventdetail="/workspace/chat/import-data">Import data to Chat</a></li></ul></div></li> </ul> <ul class="devsite-nav-list" menu="All products" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> Google Workspace apps </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Admin console </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Cloud Search </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Gmail </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Calendar </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Chat </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Classroom </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Docs </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Drive </a> </li> <li class="devsite-nav-item devsite-nav-heading"> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Forms </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Keep </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Meet </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Sheets </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Sites </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Slides </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Tasks </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Google Vault </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Extend, automate & share </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Add-ons </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Apps Script </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Chat apps </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Drive apps </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Marketplace </a> </li> </ul> <ul class="devsite-nav-list" menu="Resources" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> Tools </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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"> Admin console </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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"> Apps Script dashboard </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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"> Google Cloud console </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> APIs Explorer </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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"> Card Builder </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Training & support </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> How to get started </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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"> Codelabs </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Developer support </a> </li> <li class="devsite-nav-item devsite-nav-heading"> Updates </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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"> Blog </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Developer Previews </a> </li> <li class="devsite-nav-item"> <a href="/web/20241006202532/https://developers.google.com/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"> Newsletter </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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"> X (Twitter) </a> </li> <li class="devsite-nav-item"> <a href="https://web.archive.org/web/20241006202532/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"> YouTube </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://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat" 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 Chat"> Google Chat </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/chat/overview" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="4" track-type="globalNav" track-name="breadcrumb" track-metadata-position="4" track-metadata-eventdetail=""> Guides </a> </li> </ul> <devsite-thumb-rating position="header"> </devsite-thumb-rating> </div> <devsite-feedback position="header" project-name="Google Chat" product-id="717201" bucket="google-chat" context="" version="t-devsite-webserver-20240919-r00-rc00.463620002459465250" 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=350158&template=1047215" project-icon="https://www.gstatic.com/images/branding/productlogos/chat_2023q4/v2/web-64dp/logo_chat_2023q4_color_1x_web_64dp.png" project-support-url="https://developers.google.com/workspace/chat/support"> <button> Send feedback </button> </devsite-feedback> <h1 class="devsite-page-title" tabindex="-1"> Add interactive UI elements to cards </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> Stay organized with collections Save and categorize content based on your preferences. </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 "> This page explains how to add widgets and UI elements to cards so that users can interact with your Google Chat app, such as by clicking a button or submitting information. Chat apps can use the following Chat interfaces to build interactive cards: <ul> <li> <a href="/web/20241006202532/https://developers.google.com/workspace/chat/messages-overview#anatomy-card">Messages</a> that contain one or more cards. </li> <li> <a href="/web/20241006202532/https://developers.google.com/workspace/chat/send-app-home-card-message">Homepages</a>, which is a card that appears from the Home tab in direct messages with the Chat app. </li> <li> <a href="/web/20241006202532/https://developers.google.com/workspace/chat/dialogs">Dialogs</a>, which are cards that open in a new window from messages and homepages. </li> </ul> When users interact with cards, Chat apps can use the data that they receive to process and respond accordingly. For details, see <a href="/web/20241006202532/https://developers.google.com/workspace/chat/read-form-data">Collect and process information from Google Chat users</a>. <hr/> Use the Card Builder to design and preview messaging and user interfaces for Chat apps:<a href="https://web.archive.org/web/20241006202532/https://addons.gsuite.google.com/uikit/builder" class="button">Open the Card Builder</a> <hr/> <h2 id="prerequisites" data-text="Prerequisites" tabindex="-1">Prerequisites</h2> A Google Chat app that's enabled for interactive features. To create an interactive Chat app, complete one of the following quickstarts based on the <a href="/web/20241006202532/https://developers.google.com/workspace/chat/structure">app architecture</a> that you want to use: <ul> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/quickstart/gcf-app">HTTP service</a> with Google Cloud Functions</li> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/quickstart/apps-script-app">Google Apps Script</a></li> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/build-dialogflow-chat-app-natural-language">Google Cloud Dialogflow CX</a></li> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/quickstart/pub-sub">Google Cloud Pub/Sub</a></li> </ul> <h2 id="add-button" data-text="Add a button" tabindex="-1">Add a button</h2> The <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#buttonlist"><code translate="no" dir="ltr">ButtonList</code> widget</a> displays a set of buttons. Buttons can display text, an icon, or both text and an icon. Each <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#button"><code translate="no" dir="ltr">Button</code></a> supports an <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#OnClick_1"><code translate="no" dir="ltr">OnClick</code> action</a> that occurs when users click the button. For example: <ul> <li>Open a hyperlink with <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#OpenLink_1"><code translate="no" dir="ltr">OpenLink</code></a>, in order to provide users with additional information.</li> <li>Run an <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#action"><code translate="no" dir="ltr">action</code></a> that runs a custom function, like calling an API.</li> </ul> For accessibility, buttons support alternative text. <h3 id="add_a_button_that_runs_a_custom_function" data-text="Add a button that runs a custom function" tabindex="-1">Add a button that runs a custom function</h3> The following is a card consisting of a <code translate="no" dir="ltr">ButtonList</code> widget with two buttons. One button opens the Google Chat developer documentation in a new tab. The other button runs a custom function called <code translate="no" dir="ltr">goToView()</code> and passes the <code translate="no" dir="ltr">viewType="BIRD EYE VIEW"</code> parameter. <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=button-list&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with button list"> </iframe> <h3 id="add_a_button_with_material_design_style" data-text="Add a button with Material Design style" tabindex="-1">Add a button with Material Design style</h3> <aside class="preview">Developer Preview: Available as part of the <a href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/preview" target="_blank" class="external">Google Workspace Developer Preview Program</a>, which grants early access to certain features.</aside> The following displays a set of buttons in different Material Design button styles. To apply Material Design style, don't include the 'color' attribute. <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=button-material-design-style&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with Material Design buttons"> </iframe> <h3 id="add_a_button_with_custom_color_and_a_deactivated_button" data-text="Add a button with custom color and a deactivated button" tabindex="-1">Add a button with custom color and a deactivated button</h3> You can prevent users from clicking a button by setting <code translate="no" dir="ltr">"disabled": "true"</code>. The following displays a card consisting of a <code translate="no" dir="ltr">ButtonList</code> widget with two buttons. One button uses the <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#color"><code translate="no" dir="ltr">Color</code> field</a> to customize the button's background color. The other button is deactivated with the <code translate="no" dir="ltr">Disabled</code> field, which prevents the user from clicking the button and executing the function. <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=button-list-custom-color&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with colored and deactived buttons"> </iframe> <h3 id="add_a_button_with_an_icon" data-text="Add a button with an icon" tabindex="-1">Add a button with an icon</h3> The following displays a card consisting of a <code translate="no" dir="ltr">ButtonList</code> widget with two icon <code translate="no" dir="ltr">Button</code> widgets. One button uses the <a href="/web/20241006202532/https://developers.google.com/workspace/chat/format-messages#builtinicons"><code translate="no" dir="ltr">knownIcon</code></a> field to display Google Chat's built-in email icon. The other button uses the <code translate="no" dir="ltr">iconUrl</code> field to display a <a href="/web/20241006202532/https://developers.google.com/workspace/chat/format-messages#customicons">custom icon widget</a>. <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=button-icon&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with button and icons"> </iframe> <h3 id="add_a_button_with_an_icon_and_text" data-text="Add a button with an icon and text" tabindex="-1">Add a button with an icon and text</h3> The following displays a card consisting of a <code translate="no" dir="ltr">ButtonList</code> widget that prompts the user to send an email. The first button displays an email icon and the second button displays text. The user can click either the icon or text button to run the <code translate="no" dir="ltr">sendEmail</code> function. <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=button-icon-text&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with button, icon, and text"> </iframe> <h3 id="customize-button" data-text="Customize the button for a collapsible section" tabindex="-1">Customize the button for a collapsible section</h3> <aside class="preview">Developer Preview: Available as part of the <a href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/preview" target="_blank" class="external">Google Workspace Developer Preview Program</a>, which grants early access to certain features.</aside> Customize the control button that collapses and expands sections within a card. Choose from a range of icons or images to visually represent the section's content, making it easier for users to understand and interact with the information. <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=section-collapsible&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with customizable control"> </iframe> <h2 id="add-overflow" data-text="Add an Overflow Menu" tabindex="-1">Add an Overflow Menu</h2> <aside class="preview">Developer Preview: Available as part of the <a href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/preview" target="_blank" class="external">Google Workspace Developer Preview Program</a>, which grants early access to certain features.</aside> The <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#Message.OverflowMenu"><code translate="no" dir="ltr">Overflow menu</code></a> can be used in Chat cards to offer additional options and actions. It lets you include more options without cluttering the card's interface, ensuring a clean and organized design. <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=overflow-menu&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with a Overflow Menu"> </iframe> <h2 id="add-chips" data-text="Add a Chips list" tabindex="-1">Add a Chips list</h2> <aside class="preview">Developer Preview: Available as part of the <a href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/preview" target="_blank" class="external">Google Workspace Developer Preview Program</a>, which grants early access to certain features.</aside> The <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#Message.ChipList"><code translate="no" dir="ltr">ChipList</code></a> widget provides a versatile and visually appealing way to display information. Use chip lists to represent tags, categories, or other relevant data, making it easier for users to navigate and interact with your content. <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=chip-list&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with a Chips list"> </iframe> <h2 id="collect-information" data-text="Collect information from users" tabindex="-1">Collect information from users</h2> This section explains how you can add widgets that collect information, such as text or selections. To learn how to process what users input, see <a href="/web/20241006202532/https://developers.google.com/workspace/chat/read-form-data">Collect and process information from Google Chat users</a>. <h3 id="collect-text" data-text="Collect text" tabindex="-1">Collect text</h3> The <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#textinput"><code translate="no" dir="ltr">TextInput</code> widget</a> provides a field in which users can enter text. The widget supports suggestions, which help users enter uniform data, and on-change actions, which are <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#Action"><code translate="no" dir="ltr">Actions</code></a> that run when a change occurs in the text input field, like a user adding or deleting text. When you need to collect abstract or unknown data from users, use this <code translate="no" dir="ltr">TextInput</code> widget. To collect defined data from users, use the <a href="/web/20241006202532/https://developers.google.com/workspace/chat/selection-input"><code translate="no" dir="ltr">SelectionInput</code></a> widget instead. The following is a card consisting of a <code translate="no" dir="ltr">TextInput</code> widget: <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=text-input&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with text input widget"> </iframe> <h3 id="collect-dates" data-text="Collect dates or times" tabindex="-1">Collect dates or times</h3> <div class="video-wrapper"> <devsite-video video-id="yvMmNLUuNX4" rel="0" widget_referrer="https://developers.google.com/chat/ui/widgets/date-time-picker"/> </div> The <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#datetimepicker"><code translate="no" dir="ltr">DateTimePicker</code> widget</a> lets users input a date, a time, or both a date and a time. Or, users can use the picker to select dates and times. If users input an invalid date or time, the picker shows an error that prompts users to input the information correctly. The following displays a card consisting of three different types of <code translate="no" dir="ltr">DateTimePicker</code> widgets: <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=date-time-picker&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with date time picker."> </iframe> <h3 id="let-users-select" data-text="Let users select items" tabindex="-1">Let users select items</h3> The <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#selectioninput"><code translate="no" dir="ltr">SelectionInput</code> widget</a> provides a set of selectable items, such as checkboxes, radio buttons, switches, or a drop-down menu. You can use this widget to collect defined and standardized data from users. To collect undefined data from users, use the <a href="/web/20241006202532/https://developers.google.com/workspace/chat/text-input"><code translate="no" dir="ltr">TextInput</code></a> widget instead. The <code translate="no" dir="ltr">SelectionInput</code> widget supports suggestions, which help users enter uniform data, and on-change actions, which are <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#Action"><code translate="no" dir="ltr">Actions</code></a> that run when a change occurs in a selection input field, such as a user selecting or un-selecting an item. Chat apps can receive and process the value of selected items. For details about working with form inputs, see <a href="/web/20241006202532/https://developers.google.com/workspace/chat/read-form-data">Process information inputted by users</a>. This section provides examples of cards that use the <code translate="no" dir="ltr">SelectionInput</code> widget. The examples use different types of section inputs: <ul> <li><a href="#checkboxes">Checkboxes</a></li> <li><a href="#radio-buttons">Radio buttons</a></li> <li><a href="#switches">Switches</a></li> <li><a href="#dropdown-menu">Dropdown menu</a></li> <li><a href="#multiselect-menu">Multiselect menu</a></li> </ul> <h4 id="checkboxes" data-text="Add a checkbox" tabindex="-1">Add a checkbox</h4> The following displays a card that asks the user to specify whether a contact is professional, personal, or both, with a <code translate="no" dir="ltr">SelectionInput</code> widget that uses checkboxes: <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=selection-checkboxes&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" height="500px" width="100%" title="Card with selection input widget"> </iframe> <h4 id="radio-buttons" data-text="Add a radio button" tabindex="-1">Add a radio button</h4> The following displays a card that asks the user to specify whether a contact is professional or personal with a <code translate="no" dir="ltr">SelectionInput</code> widget that uses radio buttons: <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=selection-radio&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="100%" title="Card with selection input widget"> </iframe> <h4 id="switches" data-text="Add a switch" tabindex="-1">Add a switch</h4> The following displays a card that asks the user to specify whether a contact is professional, personal, or both with a <code translate="no" dir="ltr">SelectionInput</code> widget that uses switches: <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=selection-switch&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="100%" title="Card with selection input widget"> </iframe> <h4 id="dropdown-menu" data-text="Add a drop-down menu" tabindex="-1">Add a drop-down menu</h4> The following displays a card that asks the user to specify whether a contact is professional or personal with a <code translate="no" dir="ltr">SelectionInput</code> widget that uses a drop-down menu: <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=selection-input&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="100%" title="Card with selection input widget"> </iframe> <h4 id="multiselect-menu" data-text="Add a multiselect menu" tabindex="-1">Add a multiselect menu</h4> The following displays a card that asks the user to select contacts from a multiselect menu: <iframe src="https://web.archive.org/web/20241006202532if_/https://addons.gsuite.google.com/uikit/builder?template=multiselect&origin=https://developers.google.com&origin=https://developers.devsite.corp.google.com" allow="clipboard-read; clipboard-write" height="500px" width="90%" title="Card with selection input widget"> </iframe> You can populate items for a multiselect menu from the following data sources in Google Workspace: <ul> <li>Google Workspace users: You can only populate users within the same Google Workspace organization.</li> <li>Chat spaces: The user inputting items in the multiselect menu can only view and select spaces that they belong to within their Google Workspace organization.</li> </ul> To use Google Workspace data sources, you specify the <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#PlatformDataSource"><code translate="no" dir="ltr">platformDataSource</code></a> field. Unlike other selection input types, you omit <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#SelectionItem"><code translate="no" dir="ltr">SectionItem</code></a> objects, because these selection items are dynamically sourced from Google Workspace. The following code shows a multiselect menu of Google Workspace users. To populate users, the selection input sets <code translate="no" dir="ltr">commonDataSource</code> to <code translate="no" dir="ltr">USER</code>: <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="json" data-text="JSON" tabindex="-1">JSON</h3><div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JSON"><code translate="no" dir="ltr">{ "selectionInput": { "name": "contacts", "type": "MULTI_SELECT", "label": "Selected contacts", "multiSelectMaxSelectedItems": 5, "multiSelectMinQueryLength": 1, "platformDataSource": { "commonDataSource": "USER" } } } </code></pre></devsite-code></section> </div> The following code shows a multiselect menu of Chat spaces. To populate spaces, the selection input specifies the <code translate="no" dir="ltr">hostAppDataSource</code> field. The multiselect menu also sets <code translate="no" dir="ltr">defaultToCurrentSpace</code> to <code translate="no" dir="ltr">true</code>, which makes the current space the default selection in the menu: <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="json_1" data-text="JSON" tabindex="-1">JSON</h3><div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JSON"><code translate="no" dir="ltr">{ "selectionInput": { "name": "spaces", "type": "MULTI_SELECT", "label": "Selected contacts", "multiSelectMaxSelectedItems": 3, "multiSelectMinQueryLength": 1, "platformDataSource": { "hostAppDataSource": { "chatDataSource": { "spaceDataSource": { "defaultToCurrentSpace": true } } } } } } </code></pre></devsite-code></section> </div> Multiselect menus can also populate items from a third-party or external data source. For example, you can use multiselect menus to help a user select from a list of sales leads from a customer relationship management (CRM) system. To use an external data source, you use the <code translate="no" dir="ltr">externalDataSource</code> field to specify a function that returns items from the data source. To reduce the requests to an external data source, you can include suggested items that appear in the multiselect menu before users type in the menu. For example, you can populate recently searched contacts for the user. To populate suggested items from an external data source, specify <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#SelectionItem"><code translate="no" dir="ltr">SelectionItem</code></a> objects. The following code shows a multiselect menu of items from an external set of contacts for the user. The menu displays one contact by default and runs the function <code translate="no" dir="ltr">getContacts</code> to retrieve and populate items from the external data source: <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="json_2" data-text="JSON" tabindex="-1">JSON</h3><div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JSON"><code translate="no" dir="ltr">{ "selectionInput": { "name": "contacts", "type": "MULTI_SELECT", "label": "Selected contacts", "multiSelectMaxSelectedItems": 5, "multiSelectMinQueryLength": 2, "externalDataSource": { "function": "getContacts" }, "items": [ { "text": "Contact 3", "value": "contact-3", "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", "bottomText": "Contact three description", "selected": false } ] } } </code></pre></devsite-code></section> </div> For external data sources, you can also autocomplete items that users start typing in the multiselect menu. For example, if a user starts typing <code translate="no" dir="ltr">Atl</code> for a menu that populates cities in the United States, your Chat app can autosuggest <code translate="no" dir="ltr">Atlanta</code> before the user finishes typing. You can autocomplete up to 100 items. To autocomplete items, you create a function that queries the external data source and returns items whenever a user types in the multiselect menu. The function must do the following: <ul> <li>Pass an event object that represents the user interaction with the menu.</li> <li>Identify that the interaction event's <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/Event#CommonEventObject.FIELDS.invoked_function"><code translate="no" dir="ltr">invokedFunction</code></a> value matches the function from the <code translate="no" dir="ltr">externalDataSource</code> field.</li> <li>When the functions match, return suggested items from the external data source. To suggest items based on what the user types, get the value for the <code translate="no" dir="ltr">autocomplete_widget_query</code> key. This value represents what the user types in the menu.</li> </ul> The following code autocompletes items from an external data resource. Using the previous example, the Chat app suggests items based on when the function <code translate="no" dir="ltr">getContacts</code> is triggered: <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="apps-script" data-text=" Apps Script " tabindex="-1"> Apps Script </h3> <style> .filepath { color: #fff; margin: 6px; max-width: calc(100% - 160px); /* Give at least 160px for the "View on GitHub" button. */ text-overflow: ellipsis; text-shadow: rgba(0,0,0,0.1) 1px 1px; overflow: hidden; } .github-docwidget-gitinclude-code .prettyprint { margin: 0; } .view-on-github { text-shadow: rgba(12,12,12,0.1) 1px 1px; } </style> <div class="github-docwidget-include" style="border-bottom: 0; border-radius: 3px 3px 0 0; padding: 4px; background-color: #4285f4;"> <div class="filepath" style="text-align: left; float: left;">apps-script/selection-input/on-widget-update.gs</div> <div style="text-align: right; float: right;"> <a class="view-on-github button" target="_blank" href="https://web.archive.org/web/20241006202532/https://github.com/googleworkspace/google-chat-samples/blob/main/apps-script/selection-input/on-widget-update.gs" style="color: #4285f4;" track-type="github" track-name="gitHubViewButton" track-metadata-link-destination="https://github.com/googleworkspace/google-chat-samples/blob/main/apps-script/selection-input/on-widget-update.gs">View on GitHub</a> </div> <div style="clear: both;"></div> </div><div class="github-docwidget-gitinclude-code"> <div></div><devsite-code><pre class=" devsite-click-to-copy" track-metadata-position="googleworkspace/google-chat-samples/apps-script/selection-input/on-widget-update.gs/main/google_chat_multiselect_menu" data-code-snippet="true" data-github-path="googleworkspace/google-chat-samples/apps-script/selection-input/on-widget-update.gs" data-git-revision="main" data-region-tag="google_chat_multiselect_menu" translate="no" dir="ltr" is-upgraded syntax="Gosu">/** * Widget update event handler. * * @param {Object} event The event object from Chat API. * @return {Object} Response from the Chat app. */ function onWidgetUpdate(event) { const actionName = event.common["invokedFunction"]; if (actionName !== "getContacts") { return {}; } return { actionResponse: { type: "UPDATE_WIDGET", updatedWidget: { suggestions: { items: [ { value: "contact-1", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 1", bottomText: "Contact one description", selected: false }, { value: "contact-2", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 2", bottomText: "Contact two description", selected: false }, { value: "contact-3", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 3", bottomText: "Contact three description", selected: false }, { value: "contact-4", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 4", bottomText: "Contact four description", selected: false }, { value: "contact-5", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 5", bottomText: "Contact five description", selected: false }, ] } } } }; }</pre></devsite-code> </div> </section> <section><h3 id="node.js" data-text="Node.js" tabindex="-1">Node.js</h3> <style> .filepath { color: #fff; margin: 6px; max-width: calc(100% - 160px); /* Give at least 160px for the "View on GitHub" button. */ text-overflow: ellipsis; text-shadow: rgba(0,0,0,0.1) 1px 1px; overflow: hidden; } .github-docwidget-gitinclude-code .prettyprint { margin: 0; } .view-on-github { text-shadow: rgba(12,12,12,0.1) 1px 1px; } </style> <div class="github-docwidget-include" style="border-bottom: 0; border-radius: 3px 3px 0 0; padding: 4px; background-color: #4285f4;"> <div class="filepath" style="text-align: left; float: left;">node/selection-input/on-widget-update.js</div> <div style="text-align: right; float: right;"> <a class="view-on-github button" target="_blank" href="https://web.archive.org/web/20241006202532/https://github.com/googleworkspace/google-chat-samples/blob/main/node/selection-input/on-widget-update.js" style="color: #4285f4;" track-type="github" track-name="gitHubViewButton" track-metadata-link-destination="https://github.com/googleworkspace/google-chat-samples/blob/main/node/selection-input/on-widget-update.js">View on GitHub</a> </div> <div style="clear: both;"></div> </div><div class="github-docwidget-gitinclude-code"> <div></div><devsite-code><pre class=" devsite-click-to-copy" track-metadata-position="googleworkspace/google-chat-samples/node/selection-input/on-widget-update.js/main/google_chat_multiselect_menu" data-code-snippet="true" data-github-path="googleworkspace/google-chat-samples/node/selection-input/on-widget-update.js" data-git-revision="main" data-region-tag="google_chat_multiselect_menu" translate="no" dir="ltr" is-upgraded syntax="JavaScript">/** * Widget update event handler. * * @param {Object} event The event object from Chat API. * @return {Object} Response from the Chat app. */ function onWidgetUpdate(event) { const actionName = event.common["invokedFunction"]; if (actionName !== "getContacts") { return {}; } return { actionResponse: { type: "UPDATE_WIDGET", updatedWidget: { suggestions: { items: [ { value: "contact-1", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 1", bottomText: "Contact one description", selected: false }, { value: "contact-2", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 2", bottomText: "Contact two description", selected: false }, { value: "contact-3", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 3", bottomText: "Contact three description", selected: false }, { value: "contact-4", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 4", bottomText: "Contact four description", selected: false }, { value: "contact-5", startIconUri: "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", text: "Contact 5", bottomText: "Contact five description", selected: false }, ] } } } }; }</pre></devsite-code> </div> </section> </div> <h3 id="card-validation" data-text="Validate data inputted to cards" tabindex="-1">Validate data inputted to cards</h3> <aside class="preview">Developer Preview: Available as part of the <a href="https://web.archive.org/web/20241006202532/https://developers.google.com/workspace/preview" target="_blank" class="external">Google Workspace Developer Preview Program</a>, which grants early access to certain features.</aside> This page explains how to validate data inputted to a card's <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#action"><code translate="no" dir="ltr">action</code></a> and widgets. For example, you can validate that a text input field has text entered by the user, or that it contains a certain number of characters. <h4 id="set_required_widgets_for_actions" data-text="Set required widgets for actions" tabindex="-1">Set required widgets for actions</h4> As part of the card's <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#action"><code translate="no" dir="ltr">action</code></a>, add names of widgets that an action needs to its <code translate="no" dir="ltr">requiredWidgets</code> list. If any widgets listed here don't have a value when this action is invoked, then the form action submission is cancelled. When <code translate="no" dir="ltr">"all_widgets_are_required": "true"</code> is set for an action, then all widgets in the card are required by this action. <h5 id="set_an_all_widgets_are_required_action_in_multiselect" data-text="Set an all_widgets_are_required action in multiselect" tabindex="-1">Set an <code translate="no" dir="ltr">all_widgets_are_required</code> action in multiselect</h5> <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="json_3" data-text="JSON" tabindex="-1">JSON</h3><div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JSON"><code translate="no" dir="ltr">{ "sections": [ { "header": "Select contacts", "widgets": [ { "selectionInput": { "type": "MULTI_SELECT", "label": "Selected contacts", "name": "contacts", "multiSelectMaxSelectedItems": 3, "multiSelectMinQueryLength": 1, "onChangeAction": { "all_widgets_are_required": true }, "items": [ { "value": "contact-1", "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", "text": "Contact 1", "bottomText": "Contact one description", "selected": false }, { "value": "contact-2", "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", "text": "Contact 2", "bottomText": "Contact two description", "selected": false }, { "value": "contact-3", "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", "text": "Contact 3", "bottomText": "Contact three description", "selected": false }, { "value": "contact-4", "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", "text": "Contact 4", "bottomText": "Contact four description", "selected": false }, { "value": "contact-5", "startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png", "text": "Contact 5", "bottomText": "Contact five description", "selected": false } ] } } ] } ] } </code></pre></devsite-code></section> </div> <h5 id="set_an_all_widgets_are_required_action_in_datetimepicker" data-text="Set an all_widgets_are_required action in dateTimePicker" tabindex="-1">Set an <code translate="no" dir="ltr">all_widgets_are_required</code> action in dateTimePicker</h5> <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="json_4" data-text="JSON" tabindex="-1">JSON</h3><div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JSON"><code translate="no" dir="ltr">{ "sections": [ { "widgets": [ { "textParagraph": { "text": "A datetime picker widget with both date and time:" } }, { "divider": {} }, { "dateTimePicker": { "name": "date_time_picker_date_and_time", "label": "meeting", "type": "DATE_AND_TIME" } }, { "textParagraph": { "text": "A datetime picker widget with just date:" } }, { "divider": {} }, { "dateTimePicker": { "name": "date_time_picker_date_only", "label": "Choose a date", "type": "DATE_ONLY", "onChangeAction":{ "all_widgets_are_required": true } } }, { "textParagraph": { "text": "A datetime picker widget with just time:" } }, { "divider": {} }, { "dateTimePicker": { "name": "date_time_picker_time_only", "label": "Select a time", "type": "TIME_ONLY" } } ] } ] } </code></pre></devsite-code></section> </div> <h5 id="set_an_all_widgets_are_required_action_in_drop-down_menu" data-text="Set an all_widgets_are_required action in drop-down menu" tabindex="-1">Set an <code translate="no" dir="ltr">all_widgets_are_required</code> action in drop-down menu</h5> <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="json_5" data-text="JSON" tabindex="-1">JSON</h3><div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JSON"><code translate="no" dir="ltr">{ "sections": [ { "header": "Section Header", "collapsible": true, "uncollapsibleWidgetsCount": 1, "widgets": [ { "selectionInput": { "name": "location", "label": "Select Color", "type": "DROPDOWN", "onChangeAction": { "all_widgets_are_required": true }, "items": [ { "text": "Red", "value": "red", "selected": false }, { "text": "Green", "value": "green", "selected": false }, { "text": "White", "value": "white", "selected": false }, { "text": "Blue", "value": "blue", "selected": false }, { "text": "Black", "value": "black", "selected": false } ] } } ] } ] } </code></pre></devsite-code></section> </div> <h4 id="set_the_validation_for_a_text_input_widget" data-text="Set the validation for a text input widget" tabindex="-1">Set the validation for a text input widget</h4> In the <a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#textinput"><code translate="no" dir="ltr">textInput</code></a> widget's validation field, it can specify the character limit and input type for this text input widget. <h5 id="set_a_character_limit_for_a_text_input_widget" data-text="Set a character limit for a text input widget" tabindex="-1">Set a character limit for a text input widget</h5> <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="json_6" data-text="JSON" tabindex="-1">JSON</h3><div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JSON"><code translate="no" dir="ltr">{ "sections": [ { "header": "Tell us about yourself", "collapsible": true, "uncollapsibleWidgetsCount": 2, "widgets": [ { "textInput": { "name": "favoriteColor", "label": "Favorite color", "type": "SINGLE_LINE", "validation": {"character_limit":15}, "onChangeAction":{ "all_widgets_are_required": true } } } ] } ] } </code></pre></devsite-code></section> </div> <h5 id="set_the_input_type_for_a_text_input_widget" data-text="Set the input type for a text input widget" tabindex="-1">Set the input type for a text input widget</h5> <div class="ds-selector-tabs" data-ds-scope="code-sample"> <section><h3 id="json_7" data-text="JSON" tabindex="-1">JSON</h3><div></div><devsite-code><pre class="devsite-click-to-copy" translate="no" dir="ltr" is-upgraded syntax="JSON"><code translate="no" dir="ltr">{ "sections": [ { "header": "Validate text inputs by input types", "collapsible": true, "uncollapsibleWidgetsCount": 2, "widgets": [ { "textInput": { "name": "mailing_address", "label": "Please enter a valid email address", "type": "SINGLE_LINE", "validation": { "input_type": "EMAIL" }, "onChangeAction": { "all_widgets_are_required": true } } }, { "textInput": { "name": "validate_integer", "label": "Please enter a number", "type": "SINGLE_LINE", "validation": { "input_type": "INTEGER" } } }, { "textInput": { "name": "validate_float", "label": "Please enter a number with a decimal", "type": "SINGLE_LINE", "validation": { "input_type": "FLOAT" } } } ] } ] } </code></pre></devsite-code></section> </div> <h2 id="troubleshoot" data-text="Troubleshoot" tabindex="-1">Troubleshoot</h2> When a Google Chat app or <a href="/web/20241006202532/https://developers.google.com/workspace/chat/create-messages#create">card</a> returns an error, the Chat interface surfaces a message saying "Something went wrong." or "Unable to process your request." Sometimes the Chat UI doesn't display any error message, but the Chat app or card produces an unexpected result; for example, a card message might not appear. Although an error message might not display in the Chat UI, descriptive error messages and log data are available to help you fix errors when error logging for Chat apps is turned on. For help viewing, debugging, and fixing errors, see <a href="/web/20241006202532/https://developers.google.com/workspace/chat/troubleshoot">Troubleshoot and fix Google Chat errors</a>. <h2 id="related-topics" data-text="Related topics" tabindex="-1">Related topics</h2> <ul> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#buttonlist"><code translate="no" dir="ltr">ButtonList</code></a></li> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#button"><code translate="no" dir="ltr">Button</code></a></li> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#color"><code translate="no" dir="ltr">Color</code></a></li> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/format-messages#builtinicons"><code translate="no" dir="ltr">knownIcon</code></a></li> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#selectioninput"><code translate="no" dir="ltr">SelectionInput</code></a></li> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#textinput"><code translate="no" dir="ltr">TextInput</code></a></li> <li><a href="/web/20241006202532/https://developers.google.com/workspace/chat/api/reference/rest/v1/cards#datetimepicker"><code translate="no" dir="ltr">DateTimePicker</code> widget</a></li> </ul> <devsite-hats-survey class="nocontent" hats-id="SrQ6jyjMz0eGRuQsCn30Qs2P7pj5" listnr-id="717201"></devsite-hats-survey> </div> <devsite-recommendations display="in-page" hidden yield> </devsite-recommendations> <devsite-thumb-rating position="footer"> </devsite-thumb-rating> <devsite-feedback position="footer" project-name="Google Chat" product-id="717201" bucket="google-chat" context="" version="t-devsite-webserver-20240919-r00-rc00.463620002459465250" 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=350158&template=1047215" project-icon="https://www.gstatic.com/images/branding/productlogos/chat_2023q4/v2/web-64dp/logo_chat_2023q4_color_1x_web_64dp.png" project-support-url="https://developers.google.com/workspace/chat/support"> <button> Send feedback </button> </devsite-feedback> <devsite-recommendations id="recommendations-link" yield></devsite-recommendations> </article> <devsite-content-footer class="nocontent"> Except as otherwise noted, the content of this page is licensed under the <a href="https://web.archive.org/web/20241006202532/https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 License</a>, and code samples are licensed under the <a href="https://web.archive.org/web/20241006202532/https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0 License</a>. For details, see the <a href="https://web.archive.org/web/20241006202532/https://developers.google.com/site-policies">Google Developers Site Policies</a>. Java is a registered trademark of Oracle and/or its affiliates. Last updated 2024-10-04 UTC. </devsite-content-footer> <devsite-notification> </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-down-categories"> [{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] </template> <template class="devsite-thumb-rating-up-categories"> [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }] </template> <template class="devsite-thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Google Chat" product-id="717201" bucket="google-chat" context="" version="t-devsite-webserver-20240919-r00-rc00.463620002459465250" 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=350158&template=1047215" project-icon="https://www.gstatic.com/images/branding/productlogos/chat_2023q4/v2/web-64dp/logo_chat_2023q4_color_1x_web_64dp.png" project-support-url="https://developers.google.com/workspace/chat/support"> <button> Need to tell us more? </button> </devsite-feedback> </template> <template class="devsite-lifecycle-data"> {"lastModified": "Last updated 2024-10-04 UTC."} </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-04 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://web.archive.org/web/20241006202532/https://developers.googleblog.com/search/?query=Google+Workspace" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" target="_blank" data-category="Workspace Footer" data-label="Promo - Google Workspace Developers Blog"> <picture> <img class="devsite-footer-promo-icon" src="https://web.archive.org/web/20241006202532im_/https://www.gstatic.com/images/branding/product/2x/google_cloud_64dp.png" loading="lazy" alt="Blog"> </picture> Blog </a> <div class="devsite-footer-promo-description">Read the Google Workspace Developers blog</div> </li> <li class="devsite-footer-promo"> <a href="https://web.archive.org/web/20241006202532/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="/web/20241006202532im_/https://developers.google.com/static/site-assets/logo-x.svg" loading="lazy" alt="X (Twitter)"> </picture> X (Twitter) </a> <div class="devsite-footer-promo-description">Follow @workspacedevs on X (Twitter)</div> </li> <li class="devsite-footer-promo"> <a href="https://web.archive.org/web/20241006202532/https://github.com/googleworkspace" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Promo - Google Workspace Github" data-category="Workspace Footer" target="_blank"> <picture> <img class="devsite-footer-promo-icon" src="/web/20241006202532im_/https://developers.google.com/static/site-assets/logo-github.svg" loading="lazy" alt="Code Samples"> </picture> Code Samples </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://web.archive.org/web/20241006202532/https://codelabs.developers.google.com/?product=googleworkspace" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" target="_blank" data-label="Promo - Google Workspace Codelabs" data-category="Workspace Footer"> <picture> <img class="devsite-footer-promo-icon" src="/web/20241006202532im_/https://developers.google.com/static/site-assets/developers-logo-color.svg" loading="lazy" alt="Codelabs"> </picture> Codelabs </a> <div class="devsite-footer-promo-description">Try a guided, hands-on coding experience</div> </li> <li class="devsite-footer-promo"> <a href="https://web.archive.org/web/20241006202532/https://www.youtube.com/channel/UCUcg6az6etU_gRtZVAhBXaw" class="devsite-footer-promo-title gc-analytics-event" data-category="Site-Wide Custom Events" target="_blank" data-label="Promo - Google Workspace on YouTube" data-category="Workspace Footer"> <picture> <img class="devsite-footer-promo-icon" src="/web/20241006202532im_/https://developers.google.com/static/site-assets/logo-youtube.svg" loading="lazy" alt="Videos"> </picture> Videos </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="/web/20241006202532/https://developers.google.com/workspace" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer" data-label="Linkbox - Platform overview"> Platform overview </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20241006202532/https://developers.google.com/workspace/products" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Linkbox - Developer products" data-category="Workspace Footer"> Developer products </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20241006202532/https://developers.google.com/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="/web/20241006202532/https://developers.google.com/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://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532/https://script.google.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer" target="_blank" data-label="Linkbox - Apps Script Dashboard"> Apps Script Dashboard </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.archive.org/web/20241006202532/https://console.cloud.google.com/workspace-api" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Linkbox - Google Cloud console" target="console" data-category="Workspace Footer"> Google Cloud console </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20241006202532/https://developers.google.com/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://web.archive.org/web/20241006202532/https://developers.googleblog.com/search/?query=Google+Workspace" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" target="_blank" data-label="Linkbox - Blog" data-category="Workspace Footer"> Blog </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/web/20241006202532/https://developers.google.com/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://web.archive.org/web/20241006202532/https://twitter.com/workspacedevs" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-category="Workspace Footer" data-label="Linkbox - X (Twitter)" target="_blank"> X (Twitter) </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://web.archive.org/web/20241006202532/https://www.youtube.com/channel/UCUcg6az6etU_gRtZVAhBXaw" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" target="_blank" data-category="Workspace Footer" data-label="Linkbox - YouTube"> 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://web.archive.org/web/20241006202532/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://web.archive.org/web/20241006202532im_/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2/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="//web.archive.org/web/20241006202532/https://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="//web.archive.org/web/20241006202532/https://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="//web.archive.org/web/20241006202532/https://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="//web.archive.org/web/20241006202532/https://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="//web.archive.org/web/20241006202532/https://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="/web/20241006202532/https://developers.google.com/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="/web/20241006202532/https://developers.google.com/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="//web.archive.org/web/20241006202532/https://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"> Sign up for the Google for Developers newsletter <a class="devsite-footer-utility-link gc-analytics-event" href="/web/20241006202532/https://developers.google.com/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": {"dimension6": "en", "dimension1": "Signed out", "dimension11": false, "dimension5": "en", "dimension4": "Google Chat", "dimension3": false}, "gaid": "UA-24532603-1", "metrics": {"ratings_count": "metric2", "ratings_value": "metric1"}, "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 Chat", "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="UlVcS8p6zhBTPqiKDpL7RWTLJdkPvM"> (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://web.archive.org/web/20241006202532/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2/developers/js/app_loader.js', '[1,"en",null,"/js/devsite_app_module.js","https://web.archive.org/web/20241006202532/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2","https://web.archive.org/web/20241006202532/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2/developers","https://web.archive.org/web/20241006202532/https://developers-dot-devsite-v2-prod.appspot.com",null,null,["/_pwa/developers/manifest.json","https://web.archive.org/web/20241006202532/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2/images/video-placeholder.svg","https://web.archive.org/web/20241006202532/https://www.gstatic.com/devrel-devsite/prod/vdf5af65c45d9e2fdd493c581ff01cb1d11a21b4420a9fcc957400a26863da9d2/developers/images/favicon-new.png","https://web.archive.org/web/20241006202532/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,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,["Search__enable_ai_search_summaries","TpcFeatures__enable_required_headers","Search__enable_suggestions_from_borg","Search__enable_ai_search_summaries_restricted","MiscFeatureFlags__developers_footer_image","EngEduTelemetry__enable_engedu_telemetry","MiscFeatureFlags__enable_project_variables","Profiles__enable_dashboard_curated_recommendations","Concierge__enable_concierge","Cloud__enable_cloud_shell_fte_user_flow","CloudShell__cloud_code_overflow_menu","Profiles__enable_page_saving","Search__enable_ai_eligibility_checks","Concierge__enable_concierge_restricted","Cloud__enable_llm_concierge_chat","Profiles__enable_release_notes_notifications","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__enable_view_transitions","Search__enable_page_map","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__emergency_css","Cloud__enable_cloudx_ping","Cloud__enable_legacy_calculator_redirect","Cloud__enable_cloud_shell","Analytics__enable_all_tenant_analytics","Profiles__enable_awarding_url","Cloud__enable_cloud_dlp_service","Analytics__enable_cookie_bar","Profiles__require_profile_eligibility_for_signin","Cloud__enable_cloud_facet_chat","Profiles__enable_recognition_badges","MiscFeatureFlags__enable_explain_this_code","Profiles__enable_public_developer_profiles","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_profile_collections","Cloud__enable_cloudx_experiment_ids","CloudShell__cloud_shell_button","Search__enable_dynamic_content_confidential_banner","Concierge__enable_pushui","MiscFeatureFlags__enable_variable_operator","Experiments__reqs_query_experiments","BookNav__enable_tenant_cache_key","MiscFeatureFlags__developers_footer_dark_image","Significatio__enable_by_tenant","Cloud__enable_free_trial_server_call"],null,null,"AIzaSyBLEMok-5suZ67qRPzx0qUtbnLmyT_kCVE","https://web.archive.org/web/20241006202532/https://developerscontentserving-pa.clients6.google.com","AIzaSyCM4QpTRSqP5qI4Dvjt4OAScIN8sOUlO-k","https://web.archive.org/web/20241006202532/https://developerscontentsearch-pa.clients6.google.com",1,4,null,"https://web.archive.org/web/20241006202532/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],[[6,5],[12,9],[14,11],[15,12],[1,1],[4,3],[11,8],[16,13],[5,4],[3,2],[13,10]],[[2,2],[1,1]]],null,4,null,null,null,null,null,null,null,null,null,null,null,null,null,"developers.devsite.google"]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Add interactive UI elements to cards | Google Chat | Google for Developers