CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><script type="text/javascript">!(function () { var analytics = (window.analytics = window.analytics || []); var deferredAnalytics = (window.deferredAnalytics = window.deferredAnalytics || []); if (!analytics.initialize) if (analytics.invoked) window.console && console.error && console.error("Segment snippet included twice."); else { analytics.invoked = !0; analytics.methods = [ "trackSubmit", "trackClick", "trackLink", "trackForm", "pageview", "identify", "reset", "group", "track", "ready", "alias", "debug", "page", "once", "off", "on", ]; analytics.factory = function (t) { return function () { var e = Array.prototype.slice.call(arguments); e.unshift(t); deferredAnalytics.push(e); return analytics; }; }; for (var t = 0; t < analytics.methods.length; t++) { var e = analytics.methods[t]; analytics[e] = analytics.factory(e); } analytics.load = function (t, tt, e) { var n = document.createElement("script"); /** * Wait for OneTrust Analytics Cookies to be accepted * Client-Side Cookie Management: * https://my.onetrust.com/s/article/UUID-518074a1-a6da-81c3-be52-bae7685d9c94?language=en_US */ n.type = "text/plain"; n.className = 'optanon-category-C0002'; // END OneTrust requirements n.async = !0; n.src = ("https:" === document.location.protocol ? "https://" : "http://") + (tt ? "static.zdassets.com" : "static-staging.zdassets.com") + "/customer_analytics_integration/" + t + "/cai.min.js"; var o = document.getElementsByTagName("script")[0]; o.parentNode.insertBefore(n, o); analytics._loadOptions = e; }; analytics.SNIPPET_VERSION = "4.1.0"; if (window.location.hostname === "developer.zendesk.com") { analytics.load("developer_docs", true); } else { analytics.load("developer_docs_dev", false); } analytics.page(); } })();</script><meta name="generator" content="Gatsby 5.14.0"/><meta data-react-helmet="true" name="description" content="Developer documentation for products at Zendesk"/><meta data-react-helmet="true" property="og:title" content="Top bar apps (Support)"/><meta data-react-helmet="true" property="og:description" content="Developer documentation for products at Zendesk"/><meta data-react-helmet="true" property="og:type" content="website"/><meta data-react-helmet="true" name="twitter:card" content="summary"/><meta data-react-helmet="true" name="twitter:creator" content="@zendesk"/><meta data-react-helmet="true" name="twitter:title" content="Top bar apps (Support)"/><meta data-react-helmet="true" name="twitter:description" content="Developer documentation for products at Zendesk"/><meta name="theme-color" content="#ffffff"/><meta name="zd-site-verification" content="sqmumxplix7elko0w5is"/><style data-href="/styles.6232c0f5b276a380a223.css" data-identity="gatsby-global-css">/*! * Copyright Zendesk, Inc. * * Use of this source code is governed under the Apache License, Version 2.0 * found at http://www.apache.org/licenses/LICENSE-2.0. */*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15;tab-size:4}body{margin:0}hr{color:inherit;height:0}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:root{--zd-color-black:#000;--zd-color-green-100:#edf8f4;--zd-color-green-200:#d1e8df;--zd-color-green-300:#aecfc2;--zd-color-green-400:#5eae91;--zd-color-green-500:#228f67;--zd-color-green-600:#038153;--zd-color-green-700:#186146;--zd-color-green-800:#0b3b29;--zd-color-grey-100:#f8f9f9;--zd-color-grey-200:#e9ebed;--zd-color-grey-300:#d8dcde;--zd-color-grey-400:#c2c8cc;--zd-color-grey-500:#87929d;--zd-color-grey-600:#68737d;--zd-color-grey-700:#49545c;--zd-color-grey-800:#2f3941;--zd-color-blue-100:#edf7ff;--zd-color-blue-200:#cee2f2;--zd-color-blue-300:#adcce4;--zd-color-blue-400:#5293c7;--zd-color-blue-500:#337fbd;--zd-color-blue-600:#1f73b7;--zd-color-blue-700:#144a75;--zd-color-blue-800:#0f3554;--zd-color-kale-100:#f5fcfc;--zd-color-kale-200:#daeded;--zd-color-kale-300:#bdd9d7;--zd-color-kale-400:#90bbbb;--zd-color-kale-500:#467b7c;--zd-color-kale-600:#17494d;--zd-color-kale-700:#03363d;--zd-color-kale-800:#012b30;--zd-color-red-100:#fff0f1;--zd-color-red-200:#f5d5d8;--zd-color-red-300:#f5b5ba;--zd-color-red-400:#e35b66;--zd-color-red-500:#d93f4c;--zd-color-red-600:#cc3340;--zd-color-red-700:#8c232c;--zd-color-red-800:#681219;--zd-color-yellow-100:#fff7ed;--zd-color-yellow-200:#ffeedb;--zd-color-yellow-300:#fed6a8;--zd-color-yellow-400:#ffb057;--zd-color-yellow-500:#f79a3e;--zd-color-yellow-600:#ed8f1c;--zd-color-yellow-700:#ad5918;--zd-color-yellow-800:#703815;--zd-color-white:#fff;--zd-color-secondary-azure-400:#3091ec;--zd-color-secondary-azure-600:#1371d6;--zd-color-secondary-crimson-400:#e34f32;--zd-color-secondary-crimson-600:#c72a1c;--zd-color-secondary-fuschia-400:#d653c2;--zd-color-secondary-fuschia-600:#a81897;--zd-color-secondary-lemon-400:#ffd424;--zd-color-secondary-lemon-600:#ffbb10;--zd-color-secondary-lime-400:#43b324;--zd-color-secondary-lime-600:#2e8200;--zd-color-secondary-mint-400:#00a656;--zd-color-secondary-mint-600:#058541;--zd-color-secondary-orange-400:#de701d;--zd-color-secondary-orange-600:#bf5000;--zd-color-secondary-pink-400:#ec4d63;--zd-color-secondary-pink-600:#d42054;--zd-color-secondary-purple-400:#b552e2;--zd-color-secondary-purple-600:#6a27b8;--zd-color-secondary-royal-400:#5d7df5;--zd-color-secondary-royal-600:#3353e2;--zd-color-secondary-teal-400:#02a191;--zd-color-secondary-teal-600:#028079;--zd-color-secondary-azure-M400:#5f8dcf;--zd-color-secondary-azure-M600:#3a70b2;--zd-color-secondary-crimson-M400:#cc6c5b;--zd-color-secondary-crimson-M600:#b24a3c;--zd-color-secondary-fuschia-M400:#cf62a8;--zd-color-secondary-fuschia-M600:#a8458c;--zd-color-secondary-lemon-M400:#e7a500;--zd-color-secondary-lemon-M600:#c38f00;--zd-color-secondary-lime-M400:#519e2d;--zd-color-secondary-lime-M600:#47782c;--zd-color-secondary-mint-M400:#299c66;--zd-color-secondary-mint-M600:#2e8057;--zd-color-secondary-orange-M400:#d4772c;--zd-color-secondary-orange-M600:#b35827;--zd-color-secondary-pink-M400:#d57287;--zd-color-secondary-pink-M600:#b23a5d;--zd-color-secondary-purple-M400:#b072cc;--zd-color-secondary-purple-M600:#9358b0;--zd-color-secondary-royal-M400:#7986d8;--zd-color-secondary-royal-M600:#4b61c3;--zd-color-secondary-teal-M400:#2d9e8f;--zd-color-secondary-teal-M600:#3c7873;--zd-color-chat-orange:#f79a3e;--zd-color-connect-red:#ff6224;--zd-color-explore-blue:#30aabc;--zd-color-gather-pink:#f6c8be;--zd-color-guide-pink:#ff6224;--zd-color-message-green:#37b8af;--zd-color-sell-gold:#c38f00;--zd-color-support-green:#00a656;--zd-color-talk-yellow:#efc93d;--zd-font-family-monospace:SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;--zd-font-family-system:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;--zd-font-size-xs:10px;--zd-font-size-sm:12px;--zd-font-size-md:14px;--zd-font-size-lg:18px;--zd-font-size-xl:22px;--zd-font-size-xxl:26px;--zd-font-size-xxxl:36px;--zd-font-size-sm-monospace:11px;--zd-font-size-md-monospace:13px;--zd-font-size-lg-monospace:17px;--zd-font-weight-thin:100;--zd-font-weight-extralight:200;--zd-font-weight-light:300;--zd-font-weight-regular:400;--zd-font-weight-medium:500;--zd-font-weight-semibold:600;--zd-font-weight-bold:700;--zd-font-weight-extrabold:800;--zd-font-weight-black:900;--zd-font-weight-ultralight:200;--zd-font-weight-ultrabold:800;--zd-font-weight-heavy:900;--zd-line-height-sm:16px;--zd-line-height-md:20px;--zd-line-height-lg:24px;--zd-line-height-xl:28px;--zd-line-height-xxl:32px;--zd-line-height-xxxl:44px;--zd-spacing-xxs:4px;--zd-spacing-xs:8px;--zd-spacing-sm:12px;--zd-spacing:20px;--zd-spacing-lg:32px;--zd-spacing-xl:40px;--zd-spacing-xxl:48px;--zd-anchor-color:var(--zd-color-blue-600);--zd-html-background-color:var(--zd-color-white);--zd-html-box-sizing:border-box;--zd-html-font-family:var(--zd-font-family-system);--zd-html-font-feature-settings:"kern";--zd-html-font-kerning:normal;--zd-html-font-size:var(--zd-font-size-md);--zd-html-line-height:var(--zd-spacing);--zd-html-text-color:var(--zd-color-grey-800)}html{font-feature-settings:"kern",normal;background-color:#fff;box-sizing:border-box;color:#2f3941;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;font-kerning:normal;font-size:14px;line-height:20px;min-height:100%;overflow-y:scroll}*{font-weight:inherit}*,:after,:before{box-sizing:inherit}a{border-radius:4px;color:#1f73b7;outline:2px solid transparent;outline-offset:1px;transition:outline-color .1s ease-in-out,color .25s ease-in-out}a,ins,u{-webkit-text-decoration:none;text-decoration:none}a:hover{color:#144a75;-webkit-text-decoration:underline;text-decoration:underline}a:active{color:#0f3554}a:focus-visible{outline-color:#1f73b7;-webkit-text-decoration:none;text-decoration:none}a:focus-visible:hover{-webkit-text-decoration:underline;text-decoration:underline}b{font-weight:600}button{cursor:pointer;padding:0}button,input,optgroup,select,textarea{font-family:inherit;line-height:inherit}code{font-size:.95em}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace}em{font-style:inherit}fieldset,iframe{border:0}h1,h2,h3,h4,h5,h6{font-size:inherit}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin:0;padding:0}hr{border:none;border-top:1px solid}ol,ul{list-style:none}img{max-width:100%}strong{font-weight:inherit}svg{max-height:100%}[tabindex="-1"]:focus{outline:none!important}</style><style data-styled="" data-styled-version="5.3.11">.cxMMcO{-webkit-transition:-webkit-transform 0.25s ease-in-out,color 0.25s ease-in-out;-webkit-transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;}/*!sc*/ .duLvlg{-webkit-transition:-webkit-transform 0.25s ease-in-out,color 0.25s ease-in-out;-webkit-transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;margin-right:8px;}/*!sc*/ .lcENVT{-webkit-transition:-webkit-transform 0.25s ease-in-out,color 0.25s ease-in-out;-webkit-transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;margin-left:8px;}/*!sc*/ data-styled.g1[id="StyledIcon-sc-19meqgg-0"]{content:"cxMMcO,duLvlg,lcENVT,"}/*!sc*/ .cUkOjO{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:1px solid transparent;border-radius:100px;cursor:pointer;overflow:hidden;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-weight:400;-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;padding:0 1.0714285714285714em;height:40px;line-height:38px;font-size:14px;outline-color:transparent;background-color:transparent;color:#1f73b7;}/*!sc*/ .cUkOjO::-moz-focus-inner{border:0;padding:0;}/*!sc*/ .cUkOjO:focus-visible,.cUkOjO[data-garden-focus-visible="true"]{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .cUkOjO:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .cUkOjO:active,.cUkOjO[aria-pressed='true'],.cUkOjO[aria-pressed='mixed']{-webkit-transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .cUkOjO:hover{background-color:rgba(31,115,183,0.08);color:#144a75;}/*!sc*/ .cUkOjO:focus{outline:none;}/*!sc*/ .cUkOjO:focus-visible,.cUkOjO[data-garden-focus-visible="true"]{outline:2px solid transparent;outline-offset:1px;box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1f73b7;}/*!sc*/ .cUkOjO:active,.cUkOjO[aria-pressed='true'],.cUkOjO[aria-pressed='mixed']{background-color:rgba(31,115,183,0.2);color:#0f3554;}/*!sc*/ .cUkOjO:disabled{border-color:transparent;background-color:#e9ebed;color:#5293c7;}/*!sc*/ .cUkOjO:disabled .StyledIcon-sc-19meqgg-0{color:#5293c7;}/*!sc*/ .cUkOjO:disabled{cursor:default;}/*!sc*/ .cUkOjO .StyledIcon-sc-19meqgg-0{width:16px;min-width:16px;height:16px;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO{position:relative;-webkit-transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,margin-left 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,margin-left 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;border:1px solid transparent;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:focus-visible,.StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO[data-garden-focus-visible="true"]{border-color:#1f73b7;box-shadow: 0 0 0 1px #1f73b7, 0 0 0 3px transparent;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:hover,.StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:active,.StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:focus-visible,.StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO[data-garden-focus-visible="true"]{z-index:1;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:disabled{z-index:-1;background-color:#e9ebed;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:not(:first-of-type){margin-left:1px;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:not(:first-of-type):disabled{margin-left:1px;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:not(:first-of-type):not(:last-of-type){border-radius:0;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:first-of-type:not(:last-of-type){border-top-right-radius:0;border-bottom-right-radius:0;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:last-of-type:not(:first-of-type){border-top-left-radius:0;border-bottom-left-radius:0;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:first-of-type:not(:last-of-type) .StyledIcon-sc-19meqgg-0{margin-right:-2px;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .cUkOjO.cUkOjO:last-of-type:not(:first-of-type) .StyledIcon-sc-19meqgg-0{margin-left:-2px;}/*!sc*/ .AmQGV{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:1px solid transparent;border-radius:4px;cursor:pointer;width:100%;overflow:hidden;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-weight:400;-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;padding:0 1.0714285714285714em;height:40px;line-height:38px;font-size:14px;outline-color:transparent;border-color:#1f73b7;background-color:transparent;color:#1f73b7;}/*!sc*/ .AmQGV::-moz-focus-inner{border:0;padding:0;}/*!sc*/ .AmQGV:focus-visible,.AmQGV[data-garden-focus-visible="true"]{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .AmQGV:hover{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .AmQGV:active,.AmQGV[aria-pressed='true'],.AmQGV[aria-pressed='mixed']{-webkit-transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .AmQGV:hover{border-color:#144a75;background-color:rgba(31,115,183,0.08);color:#144a75;}/*!sc*/ .AmQGV:focus{outline:none;}/*!sc*/ .AmQGV:focus-visible,.AmQGV[data-garden-focus-visible="true"]{outline:2px solid transparent;outline-offset:1px;box-shadow: 0 0 0 1px #fff, 0 0 0 3px #1f73b7;}/*!sc*/ .AmQGV:active,.AmQGV[aria-pressed='true'],.AmQGV[aria-pressed='mixed']{border-color:#0f3554;background-color:rgba(31,115,183,0.2);color:#0f3554;}/*!sc*/ .AmQGV:disabled{border-color:transparent;background-color:#e9ebed;color:#5293c7;}/*!sc*/ .AmQGV:disabled .StyledIcon-sc-19meqgg-0{color:#5293c7;}/*!sc*/ .AmQGV:disabled{cursor:default;}/*!sc*/ .AmQGV .StyledIcon-sc-19meqgg-0{width:16px;min-width:16px;height:16px;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV{position:relative;-webkit-transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,margin-left 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,margin-left 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;border:1px solid revert;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:focus-visible,.StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV[data-garden-focus-visible="true"]{border-color:#1f73b7;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:hover,.StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:active,.StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:focus-visible,.StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV[data-garden-focus-visible="true"]{z-index:1;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:disabled{z-index:-1;background-color:#e9ebed;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:not(:first-of-type){margin-left:-1px;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:not(:first-of-type):disabled{margin-left:1px;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:not(:first-of-type):not(:last-of-type){border-radius:0;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:first-of-type:not(:last-of-type){border-top-right-radius:0;border-bottom-right-radius:0;}/*!sc*/ .StyledButtonGroup-sc-1fbpzef-0 .AmQGV.AmQGV:last-of-type:not(:first-of-type){border-top-left-radius:0;border-bottom-left-radius:0;}/*!sc*/ data-styled.g3[id="StyledButton-sc-qe3ace-0"]{content:"cUkOjO,AmQGV,"}/*!sc*/ .LgIrp{border:none;padding:0;width:40px;min-width:40px;color:#68737d;}/*!sc*/ .LgIrp:hover{color:#49545c;}/*!sc*/ .LgIrp:active,.LgIrp[aria-pressed='true'],.LgIrp[aria-pressed='mixed']{color:#2f3941;}/*!sc*/ .LgIrp:disabled{background-color:transparent;}/*!sc*/ .LgIrp .StyledIcon-sc-19meqgg-0{width:16px;height:16px;}/*!sc*/ .LgIrp .StyledIcon-sc-19meqgg-0 > svg{-webkit-transition:opacity 0.15s ease-in-out;transition:opacity 0.15s ease-in-out;}/*!sc*/ data-styled.g4[id="StyledIconButton-sc-1t0ughp-0"]{content:"LgIrp,"}/*!sc*/ .bxswUK{display:block;width:175px;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .bxswUK:focus{box-shadow:0 0 0 3px rgba(31,115,183,0.35) inset;}/*!sc*/ .hvRtLc{display:block;width:180px;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .hvRtLc:focus{box-shadow:0 0 0 3px rgba(31,115,183,0.35) inset;}/*!sc*/ data-styled.g5[id="logoLink__StyledLink-sc-eciko0-0"]{content:"bxswUK,hvRtLc,"}/*!sc*/ .gmExZQ{display:block;}/*!sc*/ .gmExZQ path,.gmExZQ polygon{fill:#17494d;}/*!sc*/ data-styled.g6[id="logoLink__LogoIcon-sc-eciko0-1"]{content:"gmExZQ,"}/*!sc*/ .hMvAgy{position:relative;z-index:10;box-shadow:0 16px 24px 0 rgba(47,57,65,0.05);}/*!sc*/ data-styled.g58[id="mobile__Container-sc-owexzg-0"]{content:"hMvAgy,"}/*!sc*/ .fhuwhz{display:grid;grid-gap:12px;grid-template-areas:"menu logo search";grid-template-columns:min-content 1fr min-content;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center;padding:8px 12px;background-color:#fff;}/*!sc*/ data-styled.g59[id="mobile__HeaderGrid-sc-owexzg-1"]{content:"fhuwhz,"}/*!sc*/ .hpPcuQ{color:#68737d;}/*!sc*/ data-styled.g60[id="mobile__SearchIcon-sc-owexzg-2"]{content:"hpPcuQ,"}/*!sc*/ .gZjxLs{color:#68737d;}/*!sc*/ data-styled.g61[id="mobile__MenuIcon-sc-owexzg-3"]{content:"gZjxLs,"}/*!sc*/ .hSnzkC{position:relative;z-index:10;display:grid;grid-gap:20px;grid-template-areas:"logo nav search";grid-template-columns:360px max-content auto;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 20px;background-color:#fff;box-shadow:0 16px 24px 0 rgba(47,57,65,0.05);}/*!sc*/ data-styled.g63[id="desktop__Container-sc-agcvml-0"]{content:"hSnzkC,"}/*!sc*/ .dbqRZa{grid-area:logo;}/*!sc*/ data-styled.g64[id="desktop__LogoCol-sc-agcvml-1"]{content:"dbqRZa,"}/*!sc*/ .bpVKFd{grid-area:nav;}/*!sc*/ data-styled.g65[id="desktop__NavCol-sc-agcvml-2"]{content:"bpVKFd,"}/*!sc*/ .jjBhsw{display:inline-block;padding:28px;color:#2f3941;white-space:nowrap;border-color:transparent;border-bottom-width:3px;border-bottom-style:solid;border-color:#1f73b7;color:#1f73b7;}/*!sc*/ .jjBhsw:hover,.jjBhsw:focus{color:#337fbd;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .jjBhsw:focus{box-shadow:0 0 0 3px rgba(31,115,183,0.35) inset;}/*!sc*/ .klhA-DR{display:inline-block;padding:28px;color:#2f3941;white-space:nowrap;border-color:transparent;border-bottom-width:3px;border-bottom-style:solid;}/*!sc*/ .klhA-DR:hover,.klhA-DR:focus{color:#337fbd;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .klhA-DR:focus{box-shadow:0 0 0 3px rgba(31,115,183,0.35) inset;}/*!sc*/ data-styled.g66[id="desktop__NavLink-sc-agcvml-3"]{content:"jjBhsw,klhA-DR,"}/*!sc*/ .ciRQNE{grid-area:search;width:100%;max-width:340px;}/*!sc*/ data-styled.g67[id="desktop__SearchCol-sc-agcvml-4"]{content:"ciRQNE,"}/*!sc*/ .eSmuup{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:0 12px;color:#2f3941;background-color:#fff;border-color:#d8dcde;}/*!sc*/ .eSmuup:hover,.eSmuup:focus{color:#2f3941;background-color:rgba(237,247,255,0.5);border-color:#1f73b7;}/*!sc*/ data-styled.g68[id="desktop__SearchButton-sc-agcvml-5"]{content:"eSmuup,"}/*!sc*/ .bTDXCw{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;text-align:left;}/*!sc*/ data-styled.g69[id="desktop__SearchButtonLabel-sc-agcvml-6"]{content:"bTDXCw,"}/*!sc*/ .gGGuih{padding:3px;color:#68737d;font-size:10px;line-height:1;text-align:center;background-color:#f8f9f9;border:1px solid #e9ebed;border-radius:2px;}/*!sc*/ .gGGuih.gGGuih{width:20px;height:20px;}/*!sc*/ data-styled.g70[id="desktop__SearchKeyboardHint-sc-agcvml-7"]{content:"gGGuih,"}/*!sc*/ .bOxcFp{color:#68737d;}/*!sc*/ data-styled.g71[id="desktop__StyledSearchIcon-sc-agcvml-8"]{content:"bOxcFp,"}/*!sc*/ body{background-color:#fff;}/*!sc*/ data-styled.g72[id="sc-global-htVoeb1"]{content:"sc-global-htVoeb1,"}/*!sc*/ .hnrrDA{display:grid;grid-template-areas:"header header" "nav main";grid-template-rows:auto 1fr;grid-template-columns:360px 1fr;height:100vh;}/*!sc*/ @media (max-width:991.98px){.hnrrDA{grid-template-areas:"header" "nav" "main";grid-template-rows:auto max-content 1fr;grid-template-columns:1fr;}}/*!sc*/ data-styled.g73[id="layout__Container-sc-1to7dem-0"]{content:"hnrrDA,"}/*!sc*/ .lfqAMv{grid-area:header;}/*!sc*/ data-styled.g74[id="layout__HeaderRow-sc-1to7dem-1"]{content:"lfqAMv,"}/*!sc*/ .hdcSnV{grid-area:nav;overflow-y:scroll;}/*!sc*/ data-styled.g75[id="layout__Navigation-sc-1to7dem-2"]{content:"hdcSnV,"}/*!sc*/ .jPiydL{grid-area:main;overflow-y:scroll;}/*!sc*/ data-styled.g76[id="layout__Main-sc-1to7dem-3"]{content:"jPiydL,"}/*!sc*/ .dlMbmL{display:grid;-webkit-transition:padding 0.25s ease-in-out,grid-template-rows 0.25s ease-in-out;transition:padding 0.25s ease-in-out,grid-template-rows 0.25s ease-in-out;overflow:hidden;grid-template-rows:0fr;border-bottom:1px solid;padding:0px 20px 0px;line-height:1.4285714285714286;font-size:14px;border-bottom-color:#d8dcde;}/*!sc*/ .bbgJYJ{display:grid;-webkit-transition:padding 0.25s ease-in-out,grid-template-rows 0.25s ease-in-out;transition:padding 0.25s ease-in-out,grid-template-rows 0.25s ease-in-out;overflow:hidden;grid-template-rows:0fr;border-bottom:1px solid;padding:0px 12px 0px;line-height:1.4285714285714286;font-size:14px;border-bottom-color:transparent;}/*!sc*/ .gLWFVj{display:grid;-webkit-transition:padding 0.25s ease-in-out,grid-template-rows 0.25s ease-in-out;transition:padding 0.25s ease-in-out,grid-template-rows 0.25s ease-in-out;overflow:hidden;grid-template-rows:1fr;border-bottom:1px solid;padding:8px 12px 16px;line-height:1.4285714285714286;font-size:14px;border-bottom-color:transparent;}/*!sc*/ data-styled.g78[id="StyledPanel-sc-1piryze-0"]{content:"dlMbmL,bbgJYJ,gLWFVj,"}/*!sc*/ .bFpvu:last-child .StyledPanel-sc-1piryze-0{border:none;}/*!sc*/ data-styled.g79[id="StyledSection-sc-v2t9bd-0"]{content:"bFpvu,"}/*!sc*/ .SqGSf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:box-shadow 0.1s ease-in-out;transition:box-shadow 0.1s ease-in-out;font-size:14px;}/*!sc*/ .SqGSf:hover{cursor:pointer;}/*!sc*/ .SqGSf:focus{outline:none;}/*!sc*/ .SqGSf:focus-within{outline:2px solid transparent;outline-offset:1px;}/*!sc*/ data-styled.g80[id="StyledHeader-sc-2c6rbr-0"]{content:"SqGSf,"}/*!sc*/ .cwpZnL{-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:20px;width:100%;text-align:left;line-height:1.4285714285714286;font-family:inherit;font-size:14px;font-weight:600;color:#2f3941;}/*!sc*/ .cwpZnL:hover{cursor:pointer;color:#2f3941;}/*!sc*/ .cwpZnL::-moz-focus-inner{border:0;}/*!sc*/ .cwpZnL:hover{cursor:pointer;}/*!sc*/ .MtdzK{-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out;outline:none;border:none;background:transparent;padding:8px 12px;width:100%;text-align:left;line-height:1.4285714285714286;font-family:inherit;font-size:14px;font-weight:600;color:#2f3941;}/*!sc*/ .MtdzK:hover{cursor:pointer;color:#2f3941;}/*!sc*/ .MtdzK::-moz-focus-inner{border:0;}/*!sc*/ .MtdzK:hover{cursor:pointer;}/*!sc*/ data-styled.g81[id="StyledButton-sc-xj3hy7-0"]{content:"cwpZnL,MtdzK,"}/*!sc*/ .bMaXIE{-webkit-transition:-webkit-transform 0.25s ease-in-out,color 0.1s ease-in-out;-webkit-transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:20px;width:16px;min-width:16px;height:16px;vertical-align:middle;color:#68737d;}/*!sc*/ .bMaXIE:hover{color:#68737d;}/*!sc*/ .chjQnf{-webkit-transition:-webkit-transform 0.25s ease-in-out,color 0.1s ease-in-out;-webkit-transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:6px 12px;width:16px;min-width:16px;height:16px;vertical-align:middle;color:#68737d;}/*!sc*/ .chjQnf:hover{color:#68737d;}/*!sc*/ .eacCpz{-webkit-transform:rotate(+180deg);-ms-transform:rotate(+180deg);transform:rotate(+180deg);-webkit-transition:-webkit-transform 0.25s ease-in-out,color 0.1s ease-in-out;-webkit-transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;transition:transform 0.25s ease-in-out,color 0.1s ease-in-out;box-sizing:content-box;padding:6px 12px;width:16px;min-width:16px;height:16px;vertical-align:middle;color:#68737d;}/*!sc*/ .eacCpz:hover{color:#68737d;}/*!sc*/ data-styled.g82[id="StyledRotateIcon-sc-hp435q-0"]{content:"bMaXIE,chjQnf,eacCpz,"}/*!sc*/ .gxjxDP{overflow:hidden;line-height:inherit;font-size:inherit;}/*!sc*/ .StyledPanel-sc-1piryze-0[aria-hidden='true'] > .StyledInnerPanel-sc-8nbueg-0{-webkit-transition:visibility 0s 0.25s;transition:visibility 0s 0.25s;visibility:hidden;}/*!sc*/ .StyledPanel-sc-1piryze-0[aria-hidden='false'] > .StyledInnerPanel-sc-8nbueg-0{visibility:visible;}/*!sc*/ data-styled.g83[id="StyledInnerPanel-sc-8nbueg-0"]{content:"gxjxDP,"}/*!sc*/ .fMkpfy{margin:0 -8px;border-top:1px solid #e9ebed !important;}/*!sc*/ data-styled.g84[id="sidebarAccordion__StyledAccordionPanel-sc-kev29k-0"]{content:"fMkpfy,"}/*!sc*/ .kNDXzi{padding:0 4px;}/*!sc*/ data-styled.g85[id="sidebarAccordion__StyledAccordionHeader-sc-kev29k-1"]{content:"kNDXzi,"}/*!sc*/ .iYBhat{color:#2f3941;}/*!sc*/ data-styled.g87[id="sidebarAccordion__StyledAccordionLabel-sc-kev29k-3"]{content:"iYBhat,"}/*!sc*/ .kBOxcm{margin:0 4px;}/*!sc*/ data-styled.g88[id="sidebarAccordion__StyledArrowIcon-sc-kev29k-4"]{content:"kBOxcm,"}/*!sc*/ .gzxlnG{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:8px;padding:8px;color:#2f3941;-webkit-text-decoration:none;text-decoration:none;border-radius:4px;-webkit-transition:background 0.2s;transition:background 0.2s;}/*!sc*/ .gzxlnG:hover,.gzxlnG:active{color:#2f3941;-webkit-text-decoration:none;text-decoration:none;background-color:rgba(47,57,65,0.05);}/*!sc*/ .gzxlnG:focus{color:#2f3941;-webkit-text-decoration:none;text-decoration:none;box-shadow:0 0 0 3px rgba(31,115,183,0.35) inset;}/*!sc*/ .hkNUaw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:8px;padding:8px;color:#2f3941;-webkit-text-decoration:none;text-decoration:none;border-radius:4px;-webkit-transition:background 0.2s;transition:background 0.2s;margin-right:0;}/*!sc*/ .hkNUaw:hover,.hkNUaw:active{color:#2f3941;-webkit-text-decoration:none;text-decoration:none;background-color:rgba(47,57,65,0.05);}/*!sc*/ .hkNUaw:focus{color:#2f3941;-webkit-text-decoration:none;text-decoration:none;box-shadow:0 0 0 3px rgba(31,115,183,0.35) inset;}/*!sc*/ data-styled.g89[id="sidebarLink__LinkElement-sc-z1bjm7-0"]{content:"gzxlnG,hkNUaw,"}/*!sc*/ .kHDXqi{margin:8px 8px;padding:8px;color:#2f3941;background-color:rgba(47,57,65,0.1);border-radius:4px;margin-right:0;}/*!sc*/ data-styled.g93[id="sidebarListItem__CurrentPageListItem-sc-3bcm75-0"]{content:"kHDXqi,"}/*!sc*/ .hNouDM{margin:0 16px 32px;font-weight:600;font-size:18px;}/*!sc*/ data-styled.g95[id="sidebarLinkList__ParentSectionTitle-sc-1nf7cca-0"]{content:"hNouDM,"}/*!sc*/ .dpBvEZ{margin:0 8px;padding:8px;color:#17494d;font-weight:600;text-transform:uppercase;}/*!sc*/ data-styled.g96[id="sidebarLinkList__SubsectionTitle-sc-1nf7cca-1"]{content:"dpBvEZ,"}/*!sc*/ .entKmz{margin:8px;}/*!sc*/ data-styled.g97[id="sidebarLinkList__StyledAccordion-sc-1nf7cca-2"]{content:"entKmz,"}/*!sc*/ .uCfzH{color:#2f3941;font-weight:400;border-radius:4px;}/*!sc*/ .uCfzH:hover,.uCfzH:active{color:#2f3941;background-color:rgba(47,57,65,0.05);}/*!sc*/ data-styled.g98[id="sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3"]{content:"uCfzH,"}/*!sc*/ .goMuhH{padding:8px;color:inherit;font-weight:inherit;}/*!sc*/ .goMuhH:hover,.goMuhH:active,.goMuhH:focus{color:inherit;}/*!sc*/ data-styled.g99[id="sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4"]{content:"goMuhH,"}/*!sc*/ .eqBtfC{padding-top:inherit;padding-right:0;padding-bottom:inherit;}/*!sc*/ data-styled.g100[id="sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5"]{content:"eqBtfC,"}/*!sc*/ .hrxSfg{margin:16px 0;}/*!sc*/ .hrxShG{margin:32px 0;}/*!sc*/ data-styled.g101[id="sidebarLinkList__SectionList-sc-1nf7cca-6"]{content:"hrxSfg,hrxShG,"}/*!sc*/ .fXenCz{min-height:100%;overflow:hidden;color:#2f3941;font-size:14px;background-color:rgba(246,244,244,1.0);}/*!sc*/ data-styled.g102[id="sidebar__Container-sc-1pmgx5z-0"]{content:"fXenCz,"}/*!sc*/ .dgNrif{padding:64px 12px;}/*!sc*/ data-styled.g103[id="sidebar__SidebarColumn-sc-1pmgx5z-1"]{content:"dgNrif,"}/*!sc*/ .fdZbQc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:auto 16px;color:#2f3941;font-weight:600;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .fdZbQc:hover{color:#2f3941;}/*!sc*/ .fdZbQc:focus{box-shadow:0 0 0 3px rgba(31,115,183,0.35) inset;}/*!sc*/ data-styled.g104[id="sidebar__HomeLink-sc-1pmgx5z-2"]{content:"fdZbQc,"}/*!sc*/ .hDiORq{margin-right:8px;}/*!sc*/ data-styled.g105[id="sidebar__HomeArrow-sc-1pmgx5z-3"]{content:"hDiORq,"}/*!sc*/ .gGJduk{margin-bottom:20px;color:#03363d;font-weight:700;font-size:48px;line-height:52px;}/*!sc*/ @media (max-width:767.98px){.gGJduk{font-size:36px;line-height:44px;}}/*!sc*/ data-styled.g106[id="typography__H1-sc-1ghj4c6-0"]{content:"gGJduk,"}/*!sc*/ .cRAXCC{margin-bottom:64px;}/*!sc*/ data-styled.g111[id="contentHeader__Container-sc-npikjn-0"]{content:"cRAXCC,"}/*!sc*/ .isSuxn{margin-bottom:12px;color:#17494d;font-weight:600;font-size:14px;line-height:20px;text-transform:uppercase;}/*!sc*/ data-styled.g112[id="tableOfContents__TOCHeading-sc-nfi473-0"]{content:"isSuxn,"}/*!sc*/ .fIzhkw.fIzhkw{list-style:none;}/*!sc*/ .fIzhkw a{display:block;padding:4px 0 4px 16px;color:#1f73b7;border-left:1px solid #d8dcde;}/*!sc*/ .fIzhkw a:hover,.fIzhkw a:active{padding-left:15px;font-weight:600;-webkit-text-decoration:none;text-decoration:none;border-left:2px solid #1f73b7;}/*!sc*/ .fIzhkw a::after{display:block;height:0;overflow:hidden;font-weight:600;visibility:hidden;content:attr(data-text);content:attr(data-text) / "";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;}/*!sc*/ @media speech{.fIzhkw a::after{display:none;}}/*!sc*/ .fIzhkw:first-child a{padding-top:0;}/*!sc*/ .fIzhkw:last-child a{padding-bottom:0;}/*!sc*/ .frsGSE.frsGSE{list-style:none;}/*!sc*/ .frsGSE a{display:block;padding:4px 0 4px 32px;color:#1f73b7;border-left:1px solid #d8dcde;}/*!sc*/ .frsGSE a:hover,.frsGSE a:active{padding-left:31px;font-weight:600;-webkit-text-decoration:none;text-decoration:none;border-left:2px solid #1f73b7;}/*!sc*/ .frsGSE a::after{display:block;height:0;overflow:hidden;font-weight:600;visibility:hidden;content:attr(data-text);content:attr(data-text) / "";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;}/*!sc*/ @media speech{.frsGSE a::after{display:none;}}/*!sc*/ .frsGSE:first-child a{padding-top:0;}/*!sc*/ .frsGSE:last-child a{padding-bottom:0;}/*!sc*/ .jzqjwA.jzqjwA{list-style:none;}/*!sc*/ .jzqjwA a{display:block;padding:4px 0 4px 48px;color:#1f73b7;border-left:1px solid #d8dcde;}/*!sc*/ .jzqjwA a:hover,.jzqjwA a:active{padding-left:47px;font-weight:600;-webkit-text-decoration:none;text-decoration:none;border-left:2px solid #1f73b7;}/*!sc*/ .jzqjwA a::after{display:block;height:0;overflow:hidden;font-weight:600;visibility:hidden;content:attr(data-text);content:attr(data-text) / "";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;}/*!sc*/ @media speech{.jzqjwA a::after{display:none;}}/*!sc*/ .jzqjwA:first-child a{padding-top:0;}/*!sc*/ .jzqjwA:last-child a{padding-bottom:0;}/*!sc*/ data-styled.g113[id="tableOfContents__TOCListItem-sc-nfi473-1"]{content:"fIzhkw,frsGSE,jzqjwA,"}/*!sc*/ .fpHWEM h1,.fpHWEM h2,.fpHWEM h3{color:#03363d;}/*!sc*/ .fpHWEM h4,.fpHWEM h5{color:#17494d;}/*!sc*/ .fpHWEM * + h1,.fpHWEM * + h2,.fpHWEM * + h3,.fpHWEM * + h4,.fpHWEM * + h5{margin-top:40px;}/*!sc*/ .fpHWEM h1,.fpHWEM h2,.fpHWEM h3,.fpHWEM h4,.fpHWEM h5{margin-bottom:20px;font-weight:600;}/*!sc*/ .fpHWEM h2{font-size:26px;line-height:32px;}/*!sc*/ .fpHWEM h3{font-size:22px;line-height:28px;}/*!sc*/ .fpHWEM h4{font-size:18px;line-height:24px;}/*!sc*/ .fpHWEM h5{font-size:14px;line-height:20px;}/*!sc*/ .fpHWEM * + pre,.fpHWEM * + ul,.fpHWEM * + ol,.fpHWEM * + img,.fpHWEM * + .table-container{margin-top:20px;margin-bottom:20px;}/*!sc*/ .fpHWEM p > img,.fpHWEM li > img{margin-top:0;margin-bottom:0;}/*!sc*/ .fpHWEM img.screenshot{box-shadow:0 2px 6px 0 rgba(0,0,0,0.27);}/*!sc*/ .fpHWEM li > img.screenshot{margin-top:20px;}/*!sc*/ .fpHWEM a,.fpHWEM a[data-garden-id="buttons.anchor"]{color:#1f73b7;}/*!sc*/ .fpHWEM a:hover,.fpHWEM a[data-garden-id="buttons.anchor"]:hover,.fpHWEM a:active,.fpHWEM a[data-garden-id="buttons.anchor"]:active,.fpHWEM a:focus,.fpHWEM a[data-garden-id="buttons.anchor"]:focus,.fpHWEM a[aria-pressed="true"],.fpHWEM a[data-garden-id="buttons.anchor"][aria-pressed="true"],.fpHWEM a[aria-pressed="mixed"],.fpHWEM a[data-garden-id="buttons.anchor"][aria-pressed="mixed"],.fpHWEM a[data-garden-focus-visible],.fpHWEM a[data-garden-id="buttons.anchor"][data-garden-focus-visible]{color:#1f73b7;-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ .fpHWEM pre{white-space:pre-wrap;}/*!sc*/ .fpHWEM hr{margin:20px 0;border-color:#d8dcde;}/*!sc*/ .fpHWEM code[data-garden-id="typography.code"]{color:#2f3941;overflow-wrap:break-word;background-color:Garden Default;}/*!sc*/ .fpHWEM pre[data-garden-id="typography.codeblock"]{background-color:Garden Default;}/*!sc*/ .fpHWEM table[data-garden-id="tables.table"]{min-width:100%;color:#2f3941;table-layout:auto;}/*!sc*/ .fpHWEM thead[data-garden-id="tables.head"]{color:Garden Default;}/*!sc*/ .fpHWEM tr[data-garden-id="tables.header_row"],.fpHWEM tr[data-garden-id="tables.row"]{border-color:Garden Default;}/*!sc*/ .fpHWEM tr[data-garden-id="tables.header_row"]:hover,.fpHWEM tr[data-garden-id="tables.row"]:hover{background-color:Garden Default;}/*!sc*/ .fpHWEM strong{font-weight:600;}/*!sc*/ data-styled.g143[id="documentContent__DocumentContent-sc-196ktpv-0"]{content:"fpHWEM,"}/*!sc*/ .SvBlU{width:100%;margin-top:48px;padding:48px 8px 48px 8px;text-align:center;background-color:#fff;border-top:1px solid #e9ebed;}/*!sc*/ .SvBlU a{color:#1f73b7;}/*!sc*/ data-styled.g144[id="footer__Container-sc-1o148d7-0"]{content:"SvBlU,"}/*!sc*/ .bmfauJ{margin-right:8px;color:#2f3941;font-weight:600;}/*!sc*/ data-styled.g145[id="footer__CompanyName-sc-1o148d7-1"]{content:"bmfauJ,"}/*!sc*/ .jtnqlv{margin-top:48px;margin-bottom:12px;color:#68737d;font-size:12px;}/*!sc*/ data-styled.g146[id="footer__Address-sc-1o148d7-2"]{content:"jtnqlv,"}/*!sc*/ .cFqiom{color:#17494d;font-weight:600;font-size:14px;}/*!sc*/ data-styled.g147[id="footer__Heading-sc-1o148d7-3"]{content:"cFqiom,"}/*!sc*/ .gBEHkz{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 8px;padding-top:20px;font-size:14px;}/*!sc*/ .gBEHkz svg{margin-right:8px;}/*!sc*/ data-styled.g148[id="footer__LinkWithIcon-sc-1o148d7-4"]{content:"gBEHkz,"}/*!sc*/ .dUSfiG{font-size:12px;}/*!sc*/ .dUSfiG a{display:inline-block;padding:0 12px;border-right:1px solid #68737d;}/*!sc*/ .dUSfiG a:last-child{border-right:none;}/*!sc*/ data-styled.g149[id="footer__LegalLinks-sc-1o148d7-5"]{content:"dUSfiG,"}/*!sc*/ .jXavIW{display:grid;grid-template-areas:"main toc";grid-template-columns:2fr 1fr;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:64px 40px;color:#2f3941;background-color:#fff;}/*!sc*/ @media (max-width:1363.98px){.jXavIW{display:block;}}/*!sc*/ @media (max-width:991.98px){.jXavIW{padding-right:24px;padding-left:24px;}}/*!sc*/ data-styled.g150[id="pageLayout__Container-sc-11clxmd-0"]{content:"jXavIW,"}/*!sc*/ .hiHozz{grid-area:main;}/*!sc*/ data-styled.g151[id="pageLayout__MainColumn-sc-11clxmd-1"]{content:"hiHozz,"}/*!sc*/ .EfzbW{width:700px;margin:0 auto;padding-right:40px;}/*!sc*/ @media (max-width:1363.98px){.EfzbW{width:auto;max-width:700px;margin:auto;padding-right:0;}}/*!sc*/ data-styled.g152[id="pageLayout__MainColumnInner-sc-11clxmd-2"]{content:"EfzbW,"}/*!sc*/ .dtMaIX{position:-webkit-sticky;position:sticky;top:64px;grid-area:toc;-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;max-width:280px;max-height:calc(100vh - 60px - (64px * 2));overflow-y:auto;}/*!sc*/ @media (max-width:1363.98px){.dtMaIX{width:auto;max-width:280px;}}/*!sc*/ data-styled.g153[id="pageLayout__TOCColumn-sc-11clxmd-3"]{content:"dtMaIX,"}/*!sc*/ @media (max-width:1363.98px){.fmTfzH{margin-top:20px;}}/*!sc*/ data-styled.g154[id="pageLayout__TOCColumnInner-sc-11clxmd-4"]{content:"fmTfzH,"}/*!sc*/ .jEJgaa{margin-top:32px;}/*!sc*/ data-styled.g155[id="pageLayout__InlineTableOfContents-sc-11clxmd-5"]{content:"jEJgaa,"}/*!sc*/ </style><link rel="sitemap" type="application/xml" href="/sitemap-index.xml"/><title data-react-helmet="true">Top bar apps (Support) | Zendesk Developer Docs</title><style data-react-helmet="true" type="text/css">.fresnel-container{margin:0;padding:0;} @media not all and (min-width:0px) and (max-width:575.98px){.fresnel-at-xs{display:none!important;}} @media not all and (min-width:576px) and (max-width:767.98px){.fresnel-at-sm{display:none!important;}} @media not all and (min-width:768px) and (max-width:991.98px){.fresnel-at-md{display:none!important;}} @media not all and (min-width:992px) and (max-width:1363.98px){.fresnel-at-lg{display:none!important;}} @media not all and (min-width:1364px){.fresnel-at-xl{display:none!important;}} @media not all and (max-width:575.98px){.fresnel-lessThan-sm{display:none!important;}} @media not all and (max-width:767.98px){.fresnel-lessThan-md{display:none!important;}} @media not all and (max-width:991.98px){.fresnel-lessThan-lg{display:none!important;}} @media not all and (max-width:1363.98px){.fresnel-lessThan-xl{display:none!important;}} @media not all and (min-width:576px){.fresnel-greaterThan-xs{display:none!important;}} @media not all and (min-width:768px){.fresnel-greaterThan-sm{display:none!important;}} @media not all and (min-width:992px){.fresnel-greaterThan-md{display:none!important;}} @media not all and (min-width:1364px){.fresnel-greaterThan-lg{display:none!important;}} @media not all and (min-width:0px){.fresnel-greaterThanOrEqual-xs{display:none!important;}} @media not all and (min-width:576px){.fresnel-greaterThanOrEqual-sm{display:none!important;}} @media not all and (min-width:768px){.fresnel-greaterThanOrEqual-md{display:none!important;}} @media not all and (min-width:992px){.fresnel-greaterThanOrEqual-lg{display:none!important;}} @media not all and (min-width:1364px){.fresnel-greaterThanOrEqual-xl{display:none!important;}} @media not all and (min-width:0px) and (max-width:575.98px){.fresnel-between-xs-sm{display:none!important;}} @media not all and (min-width:0px) and (max-width:767.98px){.fresnel-between-xs-md{display:none!important;}} @media not all and (min-width:0px) and (max-width:991.98px){.fresnel-between-xs-lg{display:none!important;}} @media not all and (min-width:0px) and (max-width:1363.98px){.fresnel-between-xs-xl{display:none!important;}} @media not all and (min-width:576px) and (max-width:767.98px){.fresnel-between-sm-md{display:none!important;}} @media not all and (min-width:576px) and (max-width:991.98px){.fresnel-between-sm-lg{display:none!important;}} @media not all and (min-width:576px) and (max-width:1363.98px){.fresnel-between-sm-xl{display:none!important;}} @media not all and (min-width:768px) and (max-width:991.98px){.fresnel-between-md-lg{display:none!important;}} @media not all and (min-width:768px) and (max-width:1363.98px){.fresnel-between-md-xl{display:none!important;}} @media not all and (min-width:992px) and (max-width:1363.98px){.fresnel-between-lg-xl{display:none!important;}}</style><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+'';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer', 'GTM-TTKJWLK');</script><style>.gatsby-image-wrapper{position:relative;overflow:hidden}.gatsby-image-wrapper picture.object-fit-polyfill{position:static!important}.gatsby-image-wrapper img{bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;position:absolute;right:0;top:0;width:100%;object-fit:cover}.gatsby-image-wrapper [data-main-image]{opacity:0;transform:translateZ(0);transition:opacity .25s linear;will-change:opacity}.gatsby-image-wrapper-constrained{display:inline-block;vertical-align:top}</style><noscript><style>.gatsby-image-wrapper noscript [data-main-image]{opacity:1!important}.gatsby-image-wrapper [data-placeholder-image]{opacity:0!important}</style></noscript><script type="module">const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){const t=e.target;if(void 0===t.dataset.mainImage)return;if(void 0===t.dataset.gatsbyImageSsr)return;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch((()=>{})).then((()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")}))}),!0);</script><style type="text/css"> .anchor.before { position: absolute; top: 0; left: 0; transform: translateX(-100%); padding-right: 4px; } .anchor.after { display: inline-block; padding-left: 4px; } h1 .anchor svg, h2 .anchor svg, h3 .anchor svg, h4 .anchor svg, h5 .anchor svg, h6 .anchor svg { visibility: hidden; } h1:hover .anchor svg, h2:hover .anchor svg, h3:hover .anchor svg, h4:hover .anchor svg, h5:hover .anchor svg, h6:hover .anchor svg, h1 .anchor:focus svg, h2 .anchor:focus svg, h3 .anchor:focus svg, h4 .anchor:focus svg, h5 .anchor:focus svg, h6 .anchor:focus svg { visibility: visible; } </style><script> document.addEventListener("DOMContentLoaded", function(event) { var hash = window.decodeURI(location.hash.replace('#', '')) if (hash !== '') { var element = document.getElementById(hash) if (element) { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop var clientTop = document.documentElement.clientTop || document.body.clientTop || 0 var offset = element.getBoundingClientRect().top + scrollTop - clientTop // Wait for the browser to finish rendering before scrolling. setTimeout((function() { window.scrollTo(0, offset - 0) }), 0) } } }) </script><style type="text/css"> .anchor.before { position: absolute; top: 0; left: 0; transform: translateX(-100%); padding-right: 4px; } .anchor.after { display: inline-block; padding-left: 4px; } h1 .anchor svg, h2 .anchor svg, h3 .anchor svg, h4 .anchor svg, h5 .anchor svg, h6 .anchor svg { visibility: hidden; } h1:hover .anchor svg, h2:hover .anchor svg, h3:hover .anchor svg, h4:hover .anchor svg, h5:hover .anchor svg, h6:hover .anchor svg, h1 .anchor:focus svg, h2 .anchor:focus svg, h3 .anchor:focus svg, h4 .anchor:focus svg, h5 .anchor:focus svg, h6 .anchor:focus svg { visibility: visible; } </style><script> document.addEventListener("DOMContentLoaded", function(event) { var hash = window.decodeURI(location.hash.replace('#', '')) if (hash !== '') { var element = document.getElementById(hash) if (element) { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop var clientTop = document.documentElement.clientTop || document.body.clientTop || 0 var offset = element.getBoundingClientRect().top + scrollTop - clientTop // Wait for the browser to finish rendering before scrolling. setTimeout((function() { window.scrollTo(0, offset - 0) }), 0) } } }) </script><link rel="icon" href="/favicon-32x32.png?v=eda544f803a28e8193436df02ebc401d" type="image/png"/><link rel="icon" href="/favicon.svg?v=eda544f803a28e8193436df02ebc401d" type="image/svg+xml"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=eda544f803a28e8193436df02ebc401d"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=eda544f803a28e8193436df02ebc401d"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=eda544f803a28e8193436df02ebc401d"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=eda544f803a28e8193436df02ebc401d"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=eda544f803a28e8193436df02ebc401d"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=eda544f803a28e8193436df02ebc401d"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=eda544f803a28e8193436df02ebc401d"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=eda544f803a28e8193436df02ebc401d"/></head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TTKJWLK" height="0" width="0" style="display: none; visibility: hidden" aria-hidden="true"></iframe></noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div><div data-testid="dev-docs-layout-container" class="layout__Container-sc-1to7dem-0 hnrrDA"><div class="layout__HeaderRow-sc-1to7dem-1 lfqAMv"><div class="fresnel-container fresnel-lessThan-lg fresnel-:R1d5:"><header class="mobile__Container-sc-owexzg-0 hMvAgy"><div class="mobile__HeaderGrid-sc-owexzg-1 fhuwhz"><button data-testid="dev-docs-header-nav-toggle" aria-label="Open navigation" data-garden-id="buttons.icon_button" data-garden-version="8.76.4" type="button" class="StyledButton-sc-qe3ace-0 StyledIconButton-sc-1t0ughp-0 cUkOjO LgIrp"><svg aria-hidden="true" data-garden-id="buttons.icon" data-garden-version="8.76.4" class="mobile__MenuIcon-sc-owexzg-3 gZjxLs StyledIcon-sc-19meqgg-0 cxMMcO" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M1.5 3.5h13m-13 4h13m-13 4h13"></path></svg></button><a aria-label="Home" class="logoLink__StyledLink-sc-eciko0-0 bxswUK" href="/"><svg aria-hidden="true" class="logoLink__LogoIcon-sc-eciko0-1 gmExZQ" viewBox="0 0 320 80"><defs><style>.cls-1{fill:#00363d;}</style></defs><title>zendev_horizontal</title><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M93.13,45.3a6.48,6.48,0,0,0,4.6-1.79L100,46a9,9,0,0,1-6.85,2.7C87.6,48.67,84,45,84,40a8.53,8.53,0,0,1,8.67-8.7c5.53,0,8.67,4.21,8.4,10.05H88c.46,2.42,2.17,4,5.15,4m4-6.75c-.35-2.26-1.7-3.93-4.41-3.93A4.49,4.49,0,0,0,88,38.54Z"></path><polygon class="cls-1" points="7.25 45.11 17.32 34.89 7.49 34.89 7.49 31.68 21.99 31.68 21.99 34.95 11.92 45.18 22.12 45.18 22.12 48.39 7.25 48.39 7.25 45.11"></polygon><path class="cls-1" d="M33.42,45.3A6.48,6.48,0,0,0,38,43.51L40.31,46a9,9,0,0,1-6.85,2.7c-5.57,0-9.17-3.69-9.17-8.7A8.53,8.53,0,0,1,33,31.27c5.53,0,8.67,4.21,8.4,10.05H28.28c.46,2.42,2.17,4,5.15,4m4-6.75c-.35-2.26-1.7-3.93-4.41-3.93a4.49,4.49,0,0,0-4.72,3.93Z"></path><path class="cls-1" d="M63.09,40a8.35,8.35,0,0,1,8.39-8.69A7.23,7.23,0,0,1,77,33.8V23.94h3.56v24.4H77V46a7.15,7.15,0,0,1-5.6,2.64A8.42,8.42,0,0,1,63.09,40m14.16,0a5.3,5.3,0,1,0-5.3,5.45,5.29,5.29,0,0,0,5.3-5.45"></path><path class="cls-1" d="M103.38,44.79l3.22-1.67a4.78,4.78,0,0,0,4.3,2.44c2,0,3.05-1,3.05-2.21,0-1.34-1.95-1.64-4.06-2.07-2.85-.6-5.81-1.54-5.81-5,0-2.64,2.52-5.08,6.48-5a7.65,7.65,0,0,1,6.74,3.24l-3,1.64a4.33,4.33,0,0,0-3.76-1.91c-1.91,0-2.89.94-2.89,2s1.54,1.54,4,2.07c2.75.6,5.87,1.5,5.87,5,0,2.31-2,5.41-6.78,5.38-3.49,0-5.94-1.4-7.35-3.88"></path><polygon class="cls-1" points="127.16 40.92 124.34 43.99 124.34 48.34 120.79 48.34 120.79 23.94 124.34 23.94 124.34 39.91 131.9 31.63 136.22 31.63 129.68 38.78 136.39 48.34 132.37 48.34 127.16 40.92"></polygon><path class="cls-1" d="M52.34,31.29c-4.23,0-7.77,2.74-7.77,7.29v9.76H48.2V39c0-2.74,1.58-4.38,4.26-4.38s4,1.64,4,4.38v9.31h3.62V38.58c0-4.55-3.54-7.29-7.77-7.29"></path><path class="cls-1" d="M145.79,40a8.34,8.34,0,0,1,8.36-8.7,7.2,7.2,0,0,1,5.55,2.51V23.95h3.54V48.37H159.7V46.06a7.11,7.11,0,0,1-5.59,2.64A8.41,8.41,0,0,1,145.79,40Zm14.11,0a5.29,5.29,0,1,0-5.28,5.45A5.28,5.28,0,0,0,159.9,40Z"></path><path class="cls-1" d="M165.93,40.07a8.61,8.61,0,0,1,8.7-8.76,8.29,8.29,0,0,1,8.6,8.53v1.4H169.37a5.12,5.12,0,0,0,5.38,4.28,5.24,5.24,0,0,0,4.88-3l2.94,1.64a8.9,8.9,0,0,1-16.66-4.08Zm3.61-1.87h10a4.67,4.67,0,0,0-4.95-3.75A5.2,5.2,0,0,0,169.54,38.2Z"></path><path class="cls-1" d="M184,31.64h3.78l4.45,12.07,4.38-12.07h3.71L194,48.37h-3.58Z"></path><path class="cls-1" d="M201,40.07a8.61,8.61,0,0,1,8.7-8.76,8.29,8.29,0,0,1,8.6,8.53v1.4H204.43a5.12,5.12,0,0,0,5.38,4.28,5.24,5.24,0,0,0,4.88-3l2.94,1.64A8.9,8.9,0,0,1,201,40.07Zm3.61-1.87h10a4.67,4.67,0,0,0-4.95-3.75A5.2,5.2,0,0,0,204.6,38.2Z"></path><path class="cls-1" d="M221,23.95h3.58V48.37H221Z"></path><path class="cls-1" d="M227.31,40A8.68,8.68,0,1,1,236,48.7,8.61,8.61,0,0,1,227.31,40Zm13.81,0A5.14,5.14,0,1,0,236,45.36,5.24,5.24,0,0,0,241.13,40Z"></path><path class="cls-1" d="M250.89,46.29v9.77h-3.55V31.64h3.55V34a7,7,0,0,1,5.59-2.68,8.31,8.31,0,0,1,8.33,8.7,8.41,8.41,0,0,1-8.3,8.7A7.07,7.07,0,0,1,250.89,46.29ZM261.26,40A5.29,5.29,0,1,0,256,45.42,5.28,5.28,0,0,0,261.26,40Z"></path><path class="cls-1" d="M267,40.07a8.61,8.61,0,0,1,8.7-8.76,8.29,8.29,0,0,1,8.6,8.53v1.4H270.46a5.12,5.12,0,0,0,5.38,4.28,5.24,5.24,0,0,0,4.88-3l2.94,1.64A8.9,8.9,0,0,1,267,40.07Zm3.61-1.87h10a4.67,4.67,0,0,0-4.95-3.75A5.2,5.2,0,0,0,270.63,38.2Z"></path><path class="cls-1" d="M287,31.64h3.58v2.64a5.1,5.1,0,0,1,4.88-2.64h1.61v3.41h-2.17c-3,0-4.28,1.54-4.28,5v8.3H287Z"></path><path class="cls-1" d="M298.4,44.92l3.21-1.74A4.84,4.84,0,0,0,306,45.59c2.07,0,3.14-1,3.14-2.17,0-1.37-2-1.67-4.15-2.14-2.84-.57-5.85-1.51-5.85-5,0-2.64,2.54-5.08,6.52-5.05,3.24,0,5.42,1.2,6.82,3.24l-3,1.64a4.28,4.28,0,0,0-3.81-1.91c-2,0-2.91.9-2.91,2s1.44,1.47,4,2c2.81.6,6,1.54,6,5.05,0,2.51-2.24,5.38-6.89,5.35C302.24,48.7,299.83,47.4,298.4,44.92Z"></path></g></svg></a><button aria-label="Open search modal" data-garden-id="buttons.icon_button" data-garden-version="8.76.4" type="button" class="StyledButton-sc-qe3ace-0 StyledIconButton-sc-1t0ughp-0 cUkOjO LgIrp"><svg aria-hidden="true" data-garden-id="buttons.icon" data-garden-version="8.76.4" class="mobile__SearchIcon-sc-owexzg-2 hpPcuQ StyledIcon-sc-19meqgg-0 cxMMcO" width="16" height="16" focusable="false" viewBox="0 0 16 16"><circle cx="6" cy="6" r="5.5" fill="none" stroke="currentColor"></circle><path stroke="currentColor" stroke-linecap="round" d="M15 15l-5-5"></path></svg></button></div></header></div><div class="fresnel-container fresnel-greaterThanOrEqual-lg fresnel-:R2d5:"><header data-testid="dev-docs-header-desktop-container" class="desktop__Container-sc-agcvml-0 hSnzkC"><div class="desktop__LogoCol-sc-agcvml-1 dbqRZa"><a aria-label="Home" class="logoLink__StyledLink-sc-eciko0-0 hvRtLc" href="/"><svg aria-hidden="true" class="logoLink__LogoIcon-sc-eciko0-1 gmExZQ" viewBox="0 0 320 80"><defs><style>.cls-1{fill:#00363d;}</style></defs><title>zendev_horizontal</title><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M93.13,45.3a6.48,6.48,0,0,0,4.6-1.79L100,46a9,9,0,0,1-6.85,2.7C87.6,48.67,84,45,84,40a8.53,8.53,0,0,1,8.67-8.7c5.53,0,8.67,4.21,8.4,10.05H88c.46,2.42,2.17,4,5.15,4m4-6.75c-.35-2.26-1.7-3.93-4.41-3.93A4.49,4.49,0,0,0,88,38.54Z"></path><polygon class="cls-1" points="7.25 45.11 17.32 34.89 7.49 34.89 7.49 31.68 21.99 31.68 21.99 34.95 11.92 45.18 22.12 45.18 22.12 48.39 7.25 48.39 7.25 45.11"></polygon><path class="cls-1" d="M33.42,45.3A6.48,6.48,0,0,0,38,43.51L40.31,46a9,9,0,0,1-6.85,2.7c-5.57,0-9.17-3.69-9.17-8.7A8.53,8.53,0,0,1,33,31.27c5.53,0,8.67,4.21,8.4,10.05H28.28c.46,2.42,2.17,4,5.15,4m4-6.75c-.35-2.26-1.7-3.93-4.41-3.93a4.49,4.49,0,0,0-4.72,3.93Z"></path><path class="cls-1" d="M63.09,40a8.35,8.35,0,0,1,8.39-8.69A7.23,7.23,0,0,1,77,33.8V23.94h3.56v24.4H77V46a7.15,7.15,0,0,1-5.6,2.64A8.42,8.42,0,0,1,63.09,40m14.16,0a5.3,5.3,0,1,0-5.3,5.45,5.29,5.29,0,0,0,5.3-5.45"></path><path class="cls-1" d="M103.38,44.79l3.22-1.67a4.78,4.78,0,0,0,4.3,2.44c2,0,3.05-1,3.05-2.21,0-1.34-1.95-1.64-4.06-2.07-2.85-.6-5.81-1.54-5.81-5,0-2.64,2.52-5.08,6.48-5a7.65,7.65,0,0,1,6.74,3.24l-3,1.64a4.33,4.33,0,0,0-3.76-1.91c-1.91,0-2.89.94-2.89,2s1.54,1.54,4,2.07c2.75.6,5.87,1.5,5.87,5,0,2.31-2,5.41-6.78,5.38-3.49,0-5.94-1.4-7.35-3.88"></path><polygon class="cls-1" points="127.16 40.92 124.34 43.99 124.34 48.34 120.79 48.34 120.79 23.94 124.34 23.94 124.34 39.91 131.9 31.63 136.22 31.63 129.68 38.78 136.39 48.34 132.37 48.34 127.16 40.92"></polygon><path class="cls-1" d="M52.34,31.29c-4.23,0-7.77,2.74-7.77,7.29v9.76H48.2V39c0-2.74,1.58-4.38,4.26-4.38s4,1.64,4,4.38v9.31h3.62V38.58c0-4.55-3.54-7.29-7.77-7.29"></path><path class="cls-1" d="M145.79,40a8.34,8.34,0,0,1,8.36-8.7,7.2,7.2,0,0,1,5.55,2.51V23.95h3.54V48.37H159.7V46.06a7.11,7.11,0,0,1-5.59,2.64A8.41,8.41,0,0,1,145.79,40Zm14.11,0a5.29,5.29,0,1,0-5.28,5.45A5.28,5.28,0,0,0,159.9,40Z"></path><path class="cls-1" d="M165.93,40.07a8.61,8.61,0,0,1,8.7-8.76,8.29,8.29,0,0,1,8.6,8.53v1.4H169.37a5.12,5.12,0,0,0,5.38,4.28,5.24,5.24,0,0,0,4.88-3l2.94,1.64a8.9,8.9,0,0,1-16.66-4.08Zm3.61-1.87h10a4.67,4.67,0,0,0-4.95-3.75A5.2,5.2,0,0,0,169.54,38.2Z"></path><path class="cls-1" d="M184,31.64h3.78l4.45,12.07,4.38-12.07h3.71L194,48.37h-3.58Z"></path><path class="cls-1" d="M201,40.07a8.61,8.61,0,0,1,8.7-8.76,8.29,8.29,0,0,1,8.6,8.53v1.4H204.43a5.12,5.12,0,0,0,5.38,4.28,5.24,5.24,0,0,0,4.88-3l2.94,1.64A8.9,8.9,0,0,1,201,40.07Zm3.61-1.87h10a4.67,4.67,0,0,0-4.95-3.75A5.2,5.2,0,0,0,204.6,38.2Z"></path><path class="cls-1" d="M221,23.95h3.58V48.37H221Z"></path><path class="cls-1" d="M227.31,40A8.68,8.68,0,1,1,236,48.7,8.61,8.61,0,0,1,227.31,40Zm13.81,0A5.14,5.14,0,1,0,236,45.36,5.24,5.24,0,0,0,241.13,40Z"></path><path class="cls-1" d="M250.89,46.29v9.77h-3.55V31.64h3.55V34a7,7,0,0,1,5.59-2.68,8.31,8.31,0,0,1,8.33,8.7,8.41,8.41,0,0,1-8.3,8.7A7.07,7.07,0,0,1,250.89,46.29ZM261.26,40A5.29,5.29,0,1,0,256,45.42,5.28,5.28,0,0,0,261.26,40Z"></path><path class="cls-1" d="M267,40.07a8.61,8.61,0,0,1,8.7-8.76,8.29,8.29,0,0,1,8.6,8.53v1.4H270.46a5.12,5.12,0,0,0,5.38,4.28,5.24,5.24,0,0,0,4.88-3l2.94,1.64A8.9,8.9,0,0,1,267,40.07Zm3.61-1.87h10a4.67,4.67,0,0,0-4.95-3.75A5.2,5.2,0,0,0,270.63,38.2Z"></path><path class="cls-1" d="M287,31.64h3.58v2.64a5.1,5.1,0,0,1,4.88-2.64h1.61v3.41h-2.17c-3,0-4.28,1.54-4.28,5v8.3H287Z"></path><path class="cls-1" d="M298.4,44.92l3.21-1.74A4.84,4.84,0,0,0,306,45.59c2.07,0,3.14-1,3.14-2.17,0-1.37-2-1.67-4.15-2.14-2.84-.57-5.85-1.51-5.85-5,0-2.64,2.54-5.08,6.52-5.05,3.24,0,5.42,1.2,6.82,3.24l-3,1.64a4.28,4.28,0,0,0-3.81-1.91c-2,0-2.91.9-2.91,2s1.44,1.47,4,2c2.81.6,6,1.54,6,5.05,0,2.51-2.24,5.38-6.89,5.35C302.24,48.7,299.83,47.4,298.4,44.92Z"></path></g></svg></a></div><div class="desktop__NavCol-sc-agcvml-2 bpVKFd"><a aria-current="true" class="desktop__NavLink-sc-agcvml-3 jjBhsw" href="/documentation/">Documentation</a><a aria-current="false" class="desktop__NavLink-sc-agcvml-3 klhA-DR" href="/api-reference/">API Reference</a></div><div data-testid="dev-docs-header-search-bar" class="desktop__SearchCol-sc-agcvml-4 ciRQNE"><button class="StyledButton-sc-qe3ace-0 AmQGV desktop__SearchButton-sc-agcvml-5 eSmuup" data-garden-id="buttons.button" data-garden-version="8.76.4" type="button"><svg position="start" data-garden-id="buttons.icon" data-garden-version="8.76.4" class="desktop__StyledSearchIcon-sc-agcvml-8 bOxcFp StyledIcon-sc-19meqgg-0 duLvlg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><circle cx="6" cy="6" r="5.5" fill="none" stroke="currentColor"></circle><path stroke="currentColor" stroke-linecap="round" d="M15 15l-5-5"></path></svg><span class="desktop__SearchButtonLabel-sc-agcvml-6 bTDXCw">Search</span><div aria-hidden="true" data-garden-id="buttons.icon" data-garden-version="8.76.4" class="desktop__SearchKeyboardHint-sc-agcvml-7 gGGuih StyledIcon-sc-19meqgg-0 lcENVT">/</div></button></div></header></div></div><aside data-testid="dev-docs-layout-navigation" class="layout__Navigation-sc-1to7dem-2 hdcSnV"><div data-testid="dev-docs-sidebar-container" class="sidebar__Container-sc-1pmgx5z-0 fXenCz"><div class="fresnel-container fresnel-lessThan-lg fresnel-:R1l5:"><div data-garden-id="accordions.accordion" data-garden-version="8.76.4" class="StyledAccordion-sc-niv9ic-0 dgZvap"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarAccordion__StyledAccordionHeader-sc-kev29k-1 kNDXzi" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":R5l5:--trigger:0" role="button" tabindex="0" aria-controls=":R5l5:--panel:0" aria-expanded="false" type="button" data-testid="dev-docs-sidebar-accordion-label" class="StyledButton-sc-xj3hy7-0 cwpZnL sidebarAccordion__StyledAccordionLabel-sc-kev29k-3 iYBhat" data-garden-id="accordions.button" data-garden-version="8.76.4">Apps<svg class="sidebarAccordion__StyledArrowIcon-sc-kev29k-4 kBOxcm" width="12" height="12" focusable="false" viewBox="0 0 12 12"><path fill="currentColor" d="M3.646 10.354a.5.5 0 01-.057-.638l.057-.07L7.293 6 3.646 2.354a.5.5 0 01-.057-.638l.057-.07a.5.5 0 01.638-.057l.07.057 4 4a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.708 0z"></path></svg>Designing Your App<svg class="sidebarAccordion__StyledArrowIcon-sc-kev29k-4 kBOxcm" width="12" height="12" focusable="false" viewBox="0 0 12 12"><path fill="currentColor" d="M3.646 10.354a.5.5 0 01-.057-.638l.057-.07L7.293 6 3.646 2.354a.5.5 0 01-.057-.638l.057-.07a.5.5 0 01.638-.057l.07.057 4 4a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.708 0z"></path></svg>Support app locations</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 bMaXIE"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":R5l5:--panel:0" aria-hidden="true" aria-labelledby=":R5l5:--trigger:0" data-testid="dev-docs-sidebar-accordion-panel" class="StyledPanel-sc-1piryze-0 dlMbmL sidebarAccordion__StyledAccordionPanel-sc-kev29k-0 fMkpfy" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"></div></section></div></div></div><div class="fresnel-container fresnel-greaterThanOrEqual-lg fresnel-:R2l5:"><div data-testid="dev-docs-sidebar-sidebar-column" class="sidebar__SidebarColumn-sc-1pmgx5z-1 dgNrif"><nav aria-label="Sidebar navigation" role="navigation"><a data-testid="dev-docs-sidebar-home-link" class="sidebar__HomeLink-sc-1pmgx5z-2 fdZbQc" href="/documentation/"><svg class="sidebar__HomeArrow-sc-1pmgx5z-3 hDiORq" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M1 8.5h14.5m-10-5L.9 8.1c-.2.2-.2.5 0 .7l4.6 4.6"></path></svg> Home</a><ul><li><ul class="sidebarLinkList__SectionList-sc-1nf7cca-6 hrxSfg"><li><h2 id="documentation-apps" class="sidebarLinkList__ParentSectionTitle-sc-1nf7cca-0 hNouDM">Apps</h2></li><li data-testid="dev-docs-sidebar-link-documentation-apps"><a tabindex="0" href="/documentation/apps/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Introduction</a></li><li><ul class="sidebarLinkList__SectionList-sc-1nf7cca-6 hrxShG"><li><h3 id="documentation-apps-getting-started" class="sidebarLinkList__SubsectionTitle-sc-1nf7cca-1 dpBvEZ">Getting Started</h3></li><li data-testid="dev-docs-sidebar-link-documentation-apps-getting-started-overview"><a tabindex="0" href="/documentation/apps/getting-started/overview/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Overview</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-getting-started-zendesk-app-quick-start"><a tabindex="0" href="/documentation/apps/getting-started/zendesk-app-quick-start/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Zendesk app quick start</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-getting-started-test-drive-the-apps-framework"><a tabindex="0" href="/documentation/apps/getting-started/test-drive-the-apps-framework/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Test drive the Apps framework</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-getting-started-using-zcli"><a tabindex="0" href="/documentation/apps/getting-started/using-zcli/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Using the Zendesk Command Line Interface (ZCLI)</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-getting-started-choose-your-own-app-adventure"><a tabindex="0" href="/documentation/apps/getting-started/choose-your-own-app-adventure/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Choose your own app adventure</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-getting-started-setting-up-new-apps"><a tabindex="0" href="/documentation/apps/getting-started/setting-up-new-apps/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Setting up new apps</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-getting-started-uploading-and-installing-a-private-app"><a tabindex="0" href="/documentation/apps/getting-started/uploading-and-installing-a-private-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Uploading and installing a private app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-getting-started-glossary"><a tabindex="0" href="/documentation/apps/getting-started/glossary/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Glossary</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-getting-started-zendesk-apps-resources"><a tabindex="0" href="/documentation/apps/getting-started/zendesk-apps-resources/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Zendesk apps resources</a></li></ul></li><li><ul class="sidebarLinkList__SectionList-sc-1nf7cca-6 hrxShG"><li><h3 id="documentation-apps-app-developer-guide" class="sidebarLinkList__SubsectionTitle-sc-1nf7cca-1 dpBvEZ">App Developer Guide</h3></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-getting_started"><a tabindex="0" href="/documentation/apps/app-developer-guide/getting_started/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Getting started</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-using-the-apps-framework"><a tabindex="0" href="/documentation/apps/app-developer-guide/using-the-apps-framework/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Using the Apps framework</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-making-api-requests-from-a-zendesk-app"><a tabindex="0" href="/documentation/apps/app-developer-guide/making-api-requests-from-a-zendesk-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Making API requests from a Zendesk app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-apps_requirements"><a tabindex="0" href="/documentation/apps/app-developer-guide/apps_requirements/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Specifying app requirements</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-multiproduct_apps"><a tabindex="0" href="/documentation/apps/app-developer-guide/multiproduct_apps/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Working with multi-product apps</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-styling"><a tabindex="0" href="/documentation/apps/app-developer-guide/styling/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Styles and assets</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-deploying"><a tabindex="0" href="/documentation/apps/app-developer-guide/deploying/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Deploying apps</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-manifest"><a tabindex="0" href="/documentation/apps/app-developer-guide/manifest/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Manifest reference</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-best-practices-for-zendesk-apps-developers"><a tabindex="0" href="/documentation/apps/app-developer-guide/best-practices-for-zendesk-apps-developers/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Best practices for Zendesk apps developers</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-about-the-zendesk-react-app-scaffold"><a tabindex="0" href="/documentation/apps/app-developer-guide/about-the-zendesk-react-app-scaffold/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">About the Zendesk React app scaffold</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-known-app-limitations"><a tabindex="0" href="/documentation/apps/app-developer-guide/known-app-limitations/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Known app limitations</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-developer-guide-versions"><a tabindex="0" href="/documentation/apps/app-developer-guide/versions/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Framework versions</a></li></ul></li><li><ul class="sidebarLinkList__SectionList-sc-1nf7cca-6 hrxShG"><li><h3 id="documentation-apps-build-an-app" class="sidebarLinkList__SubsectionTitle-sc-1nf7cca-1 dpBvEZ">Build An App</h3></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":R6iml5:--trigger:0" role="button" tabindex="0" aria-controls=":R6iml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Building your first Support app</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":R6iml5:--panel:0" aria-hidden="true" aria-labelledby=":R6iml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-support-app-part-1-laying-the-groundwork"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-support-app/part-1-laying-the-groundwork/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Support app - Part 1: Laying the groundwork</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-support-app-part-2-designing-the-user-interface"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-support-app/part-2-designing-the-user-interface/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Support app - Part 2: Designing the user interface</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-support-app-part-3-creating-and-inserting-templates"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-support-app/part-3-creating-and-inserting-templates/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Support app - Part 3: Creating and inserting templates</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-support-app-part-4-getting-data"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-support-app/part-4-getting-data/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Support app - Part 4: Getting data</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-support-app-part-5-installing-the-app-in-zendesk-support"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-support-app/part-5-installing-the-app-in-zendesk-support/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Support app - Part 5: Installing the app in Zendesk Support</a></li></ul></div></section></div></div></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":Raiml5:--trigger:0" role="button" tabindex="0" aria-controls=":Raiml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Building your first Sell app</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":Raiml5:--panel:0" aria-hidden="true" aria-labelledby=":Raiml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-sell-app-building-your-first-sell-app-part-1-laying-the-groundwork"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-1-laying-the-groundwork/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Sell app - Part 1: Laying the groundwork</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-sell-app-building-your-first-sell-app-part-2-designing-the-user-interface"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-2-designing-the-user-interface/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Sell app - Part 2: Designing the user interface</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-sell-app-building-your-first-sell-app-part-3-creating-and-inserting-templates"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Sell app - Part 3: Creating and inserting templates</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-sell-app-building-your-first-sell-app-part-4-getting-data"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-4-getting-data/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Sell app - Part 4: Getting data</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-sell-app-building-your-first-sell-app-part-5-installing-the-app-in-zendesk-sell"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-5-installing-the-app-in-zendesk-sell/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Sell app - Part 5: Installing the app in Zendesk Sell</a></li></ul></div></section></div></div></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":Reiml5:--trigger:0" role="button" tabindex="0" aria-controls=":Reiml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Building your first Chat app</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":Reiml5:--panel:0" aria-hidden="true" aria-labelledby=":Reiml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-1-laying-the-groundwork"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-1-laying-the-groundwork/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Chat app - Part 1: Laying the groundwork</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-2-designing-the-user-interface"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-2-designing-the-user-interface/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Chat app - Part 2: Designing the user interface</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-3-creating-and-inserting-templates"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-3-creating-and-inserting-templates/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Chat app - Part 3: Creating and inserting templates</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-4-getting-data"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-4-getting-data/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Chat app - Part 4: Getting data</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-5-installing-the-app-in-zendesk-chat"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-5-installing-the-app-in-zendesk-chat/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw"> Building your first Chat app - Part 5: Installing the app in Zendesk Chat</a></li></ul></div></section></div></div></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-support-ticket-editor-app"><a tabindex="0" href="/documentation/apps/build-an-app/building-a-support-ticket-editor-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Building a Support ticket editor app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-localizing-a-support-app"><a tabindex="0" href="/documentation/apps/build-an-app/localizing-a-support-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Localizing a Support app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-adding-third-party-oauth-to-a-support-app"><a tabindex="0" href="/documentation/apps/build-an-app/adding-third-party-oauth-to-a-support-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Adding third-party OAuth to a Support app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-using-react-in-a-support-app"><a tabindex="0" href="/documentation/apps/build-an-app/using-react-in-a-support-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Using React in a Support app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-dynamically-changing-app-icons"><a tabindex="0" href="/documentation/apps/build-an-app/dynamically-changing-app-icons/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Dynamically changing app icons</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-using-ai-to-summarize-conversations-in-a-support-app"><a tabindex="0" href="/documentation/apps/build-an-app/using-ai-to-summarize-conversations-in-a-support-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Using AI to summarize conversations in a Support app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-empowering-support-agents-to-resolve-customer-complaints"><a tabindex="0" href="/documentation/apps/build-an-app/empowering-support-agents-to-resolve-customer-complaints/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Empowering support agents to resolve customer complaints</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-prompt-and-personalized-service-with-a-single-view-for-your-customer"><a tabindex="0" href="/documentation/apps/build-an-app/prompt-and-personalized-service-with-a-single-view-for-your-customer/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Prompt and personalized service with a single view of your customer</a></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":R1iiml5:--trigger:0" role="button" tabindex="0" aria-controls=":R1iiml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Building a server-side app</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":R1iiml5:--panel:0" aria-hidden="true" aria-labelledby=":R1iiml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-1-core-concepts"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-1-core-concepts/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 1: Core concepts</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-2-display-server-side-content-in-a-zendesk-app"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 2: Displaying server-side content in a Zendesk app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-3-access-external-apis"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-3-access-external-apis/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 3: Accessing external APIs</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-4-access-framework-apis"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-4-access-framework-apis/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 4: Accessing framework APIs</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-5-secure-the-app"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-5-secure-the-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 5: Securing the app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-6-deploy-the-app"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-6-deploy-the-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 6: Deploying the app</a></li></ul></div></section></div></div></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-how-a-custom-objects-app-is-built-for-sell"><a tabindex="0" href="/documentation/apps/build-an-app/how-a-custom-objects-app-is-built-for-sell/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">How a custom objects app is built for Sell</a></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":R1qiml5:--trigger:0" role="button" tabindex="0" aria-controls=":R1qiml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Building a Sell app using OAuth 2.0</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":R1qiml5:--panel:0" aria-hidden="true" aria-labelledby=":R1qiml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-1-laying-the-groundwork"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-1-laying-the-groundwork/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 1: Laying the groundwork</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-2-installing-the-app-in-zendesk-sell"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-2-installing-the-app-in-zendesk-sell/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 2: Installing the app in Zendesk Sell</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-3-setting-up-oauth-2-0"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-3-setting-up-oauth-2-0/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 3: Setting up OAuth 2.0</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-4-creating-audiences-in-mailchimp"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-4-creating-audiences-in-mailchimp/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 4: Creating audiences in Mailchimp</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-5-getting-data-from-the-mailchimp-api"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-5-getting-data-from-the-mailchimp-api/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 5: Getting data from the Mailchimp API</a></li></ul></div></section></div></div></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-create-a-cicd-pipeline-for-a-zendesk-app"><a tabindex="0" href="/documentation/apps/build-an-app/create-a-cicd-pipeline-for-a-zendesk-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Create a CI/CD pipeline for a Zendesk app</a></li></ul></li><li><ul class="sidebarLinkList__SectionList-sc-1nf7cca-6 hrxShG"><li><h3 id="documentation-apps-app-design-guidelines" class="sidebarLinkList__SubsectionTitle-sc-1nf7cca-1 dpBvEZ">Designing Your App</h3></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-design-guidelines-ui-design-fundamentals"><a tabindex="0" href="/documentation/apps/app-design-guidelines/ui-design-fundamentals/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">UI Fundamentals</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-design-guidelines-using-zendesk-garden"><a tabindex="0" href="/documentation/apps/app-design-guidelines/using-zendesk-garden/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Designing with Zendesk Garden</a></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":Remml5:--trigger:0" role="button" tabindex="0" aria-controls=":Remml5:--panel:0" aria-expanded="true" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Support app locations</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 eacCpz"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section id=":Remml5:--panel:0" aria-hidden="false" aria-labelledby=":Remml5:--trigger:0" class="StyledPanel-sc-1piryze-0 gLWFVj sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-app-design-guidelines-support-sidebar-apps-support"><a tabindex="0" href="/documentation/apps/app-design-guidelines/support/sidebar-apps-support/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Sidebar apps</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-design-guidelines-support-topbar-apps-support"><div class="sidebarListItem__CurrentPageListItem-sc-3bcm75-0 kHDXqi">Top bar apps</div></li></ul></div></section></div></div></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":Rimml5:--trigger:0" role="button" tabindex="0" aria-controls=":Rimml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Sell app locations</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":Rimml5:--panel:0" aria-hidden="true" aria-labelledby=":Rimml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-app-design-guidelines-sell-sidebar-apps-sell"><a tabindex="-1" href="/documentation/apps/app-design-guidelines/sell/sidebar-apps-sell/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Sidebar apps</a></li></ul></div></section></div></div></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":Rmmml5:--trigger:0" role="button" tabindex="0" aria-controls=":Rmmml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Chat app locations</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":Rmmml5:--panel:0" aria-hidden="true" aria-labelledby=":Rmmml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-app-design-guidelines-chat-sidebar-apps-chat"><a tabindex="-1" href="/documentation/apps/app-design-guidelines/chat/sidebar-apps-chat/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Sidebar apps</a></li></ul></div></section></div></div></li></ul></li><li><ul class="sidebarLinkList__SectionList-sc-1nf7cca-6 hrxShG"><li><h3 id="documentation-apps-zendesk-app-tools-zat" class="sidebarLinkList__SubsectionTitle-sc-1nf7cca-1 dpBvEZ">Zendesk Apps Tools (ZAT)</h3></li><li data-testid="dev-docs-sidebar-link-documentation-apps-zendesk-app-tools-zat-installing-and-using-zat"><a tabindex="0" href="/documentation/apps/zendesk-app-tools-zat/installing-and-using-zat/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Installing and using ZAT</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-zendesk-app-tools-zat-zat-commands"><a tabindex="0" href="/documentation/apps/zendesk-app-tools-zat/zat-commands/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">ZAT commands</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-zendesk-app-tools-zat-zat-known-issues"><a tabindex="0" href="/documentation/apps/zendesk-app-tools-zat/zat-known-issues/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">ZAT - Known issues</a></li></ul></li></ul></li></ul></nav></div></div></div></aside><main data-testid="dev-docs-layout-main" tabindex="-1" class="layout__Main-sc-1to7dem-3 jPiydL"><div class="pageLayout__Container-sc-11clxmd-0 jXavIW"><div class="pageLayout__TOCColumn-sc-11clxmd-3 dtMaIX"><div class="fresnel-container fresnel-greaterThanOrEqual-xl fresnel-:R6t5:"><div class="pageLayout__TOCColumnInner-sc-11clxmd-4 fmTfzH"><aside><nav aria-label="Table of Contents" role="navigation"><h2 class="tableOfContents__TOCHeading-sc-nfi473-0 isSuxn">On this page</h2><ul><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Introduction" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#introduction">Introduction</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Where do top bar apps live" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#where-do-top-bar-apps-live">Where do top bar apps live</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="How are they accessed" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#how-are-they-accessed">How are they accessed</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Come one come all to the Marketplace" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#come-one-come-all-to-the-marketplace">Come one come all to the Marketplace</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Where are the apps saved?" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#where-are-the-apps-saved">Where are the apps saved?</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Reordering of apps" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#reordering-of-apps">Reordering of apps</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="App icon guideline" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#app-icon-guideline">App icon guideline</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Icon specifications" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#icon-specifications">Icon specifications</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Do’s and Don’ts" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#dos-and-donts">Do’s and Don’ts</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Avoid custom fill properties" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#avoid-custom-fill-properties">Avoid custom fill properties</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Help your logo appear as it is" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#help-your-logo-appear-as-it-is">Help your logo appear as it is</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Aim for simplicity" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#aim-for-simplicity">Aim for simplicity</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Aim for consistency" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#aim-for-consistency">Aim for consistency</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Container" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#container">Container</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Dos and Don’ts" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#dos-and-donts-1">Dos and Don’ts</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Consider the components in your large format layout" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#consider-the-components-in-your-large-format-layout">Consider the components in your large format layout</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Further reading" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#further-reading">Further reading</a></li></ul></nav></aside></div></div></div><div class="pageLayout__MainColumn-sc-11clxmd-1 hiHozz"><div class="pageLayout__MainColumnInner-sc-11clxmd-2 EfzbW"><div class="contentHeader__Container-sc-npikjn-0 cRAXCC"><h1 class="typography__H1-sc-1ghj4c6-0 gGJduk">Top bar apps (Support)</h1><div class="fresnel-container fresnel-lessThan-xl fresnel-:R6qt5:"><aside><nav class="pageLayout__InlineTableOfContents-sc-11clxmd-5 jEJgaa" aria-label="Table of Contents" role="navigation"><h2 class="tableOfContents__TOCHeading-sc-nfi473-0 isSuxn">On this page</h2><ul><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Introduction" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#introduction">Introduction</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Where do top bar apps live" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#where-do-top-bar-apps-live">Where do top bar apps live</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="How are they accessed" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#how-are-they-accessed">How are they accessed</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Come one come all to the Marketplace" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#come-one-come-all-to-the-marketplace">Come one come all to the Marketplace</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Where are the apps saved?" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#where-are-the-apps-saved">Where are the apps saved?</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Reordering of apps" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#reordering-of-apps">Reordering of apps</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="App icon guideline" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#app-icon-guideline">App icon guideline</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Icon specifications" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#icon-specifications">Icon specifications</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Do’s and Don’ts" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#dos-and-donts">Do’s and Don’ts</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Avoid custom fill properties" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#avoid-custom-fill-properties">Avoid custom fill properties</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Help your logo appear as it is" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#help-your-logo-appear-as-it-is">Help your logo appear as it is</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Aim for simplicity" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#aim-for-simplicity">Aim for simplicity</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Aim for consistency" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#aim-for-consistency">Aim for consistency</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Container" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#container">Container</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Dos and Don’ts" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#dos-and-donts-1">Dos and Don’ts</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 jzqjwA"><a data-text="Consider the components in your large format layout" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#consider-the-components-in-your-large-format-layout">Consider the components in your large format layout</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Further reading" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/#further-reading">Further reading</a></li></ul></nav></aside></div></div><div class="documentContent__DocumentContent-sc-196ktpv-0 fpHWEM"><style data-styled="true" data-styled-version="5.3.11">.kXVLDw{direction:ltr;}/*!sc*/ .kXVLDw[hidden]{display:inline;border:0;-webkit-clip:rect(0 0 0 0);clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}/*!sc*/ data-styled.g116[id="StyledFont-sc-1iildbo-0"]{content:"kXVLDw,"}/*!sc*/ .jXJwrs{direction:ltr;margin:0;margin-left:24px;padding:0;list-style-position:outside;list-style-type:disc;}/*!sc*/ data-styled.g121[id="StyledList__StyledUnorderedList-sc-jdbsfi-1"]{content:"jXJwrs,"}/*!sc*/ .cmaSZm{line-height:1.4285714285714286;padding-top:4px;}/*!sc*/ .StyledList__StyledOrderedList-sc-jdbsfi-0 > .StyledListItem__StyledUnorderedListItem-sc-9rsipg-1:first-child,.StyledList__StyledUnorderedList-sc-jdbsfi-1 > .cmaSZm:first-child{padding-top:0;}/*!sc*/ .StyledList__StyledOrderedList-sc-jdbsfi-0 .StyledList__StyledOrderedList-sc-jdbsfi-0 > .StyledListItem__StyledUnorderedListItem-sc-9rsipg-1:first-child,.StyledList__StyledOrderedList-sc-jdbsfi-0 .StyledList__StyledUnorderedList-sc-jdbsfi-1 > .cmaSZm:first-child,.StyledList__StyledUnorderedList-sc-jdbsfi-1 .StyledList__StyledUnorderedList-sc-jdbsfi-1 > .cmaSZm:first-child,.StyledList__StyledUnorderedList-sc-jdbsfi-1 .StyledList__StyledUnorderedList-sc-jdbsfi-1 > .cmaSZm:first-child{padding-top:4px;}/*!sc*/ data-styled.g123[id="StyledListItem__StyledUnorderedListItem-sc-9rsipg-1"]{content:"cmaSZm,"}/*!sc*/ .fPpIbu{margin:0;padding:0;direction:ltr;}/*!sc*/ .StyledParagraph-sc-zkuftz-0 + .StyledParagraph-sc-zkuftz-0,blockquote + .fPpIbu{margin-top:20px;}/*!sc*/ data-styled.g124[id="StyledParagraph-sc-zkuftz-0"]{content:"fPpIbu,"}/*!sc*/ .iQFraf{display:table;border:none;width:100%;table-layout:fixed;border-collapse:collapse;border-spacing:0;line-height:20px;color:#2f3941;font-size:14px;}/*!sc*/ data-styled.g127[id="StyledTable-sc-gje7na-0"]{content:"iQFraf,"}/*!sc*/ .kFCBvR{display:table-cell;-webkit-transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out;box-sizing:border-box;padding:10px 12px;}/*!sc*/ data-styled.g128[id="StyledCell-sc-8hpncx-0"]{content:"kFCBvR,"}/*!sc*/ .fJgbCY{display:table-row;-webkit-transition:background-color 0.1s ease-in-out;transition:background-color 0.1s ease-in-out;border-bottom:1px solid #e9ebed;vertical-align:top;box-sizing:border-box;}/*!sc*/ data-styled.g131[id="StyledRow__StyledBaseRow-sc-ek66ow-0"]{content:"fJgbCY,"}/*!sc*/ .gGkQMS{height:40px;}/*!sc*/ .gGkQMS:hover{border-bottom-color:#cee2f2;background-color:rgba(31,115,183,0.08);}/*!sc*/ .gGkQMS:hover .StyledOverflowButton-sc-1eba2ml-0{opacity:1;}/*!sc*/ .gGkQMS:focus{outline:none;}/*!sc*/ .gGkQMS .StyledCell-sc-8hpncx-0:first-of-type:focus{box-shadow:inset 3px 0 0 0 #1f73b7;}/*!sc*/ data-styled.g132[id="StyledRow-sc-ek66ow-1"]{content:"gGkQMS,"}/*!sc*/ .jTgiQE{border-bottom-color:#d8dcde;height:48px;vertical-align:bottom;font-weight:600;}/*!sc*/ .jTgiQE .StyledOverflowButton-sc-1eba2ml-0{opacity:1;margin-top:0;margin-bottom:calc(24px - 1em);}/*!sc*/ data-styled.g133[id="StyledHeaderRow-sc-16ogvdx-0"]{content:"jTgiQE,"}/*!sc*/ .exiVod{text-align:left;font-weight:inherit;padding-top:10px;padding-bottom:10px;}/*!sc*/ data-styled.g140[id="StyledHeaderCell-sc-fzagoe-0"]{content:"exiVod,"}/*!sc*/ .lczzPf{overflow-x:auto;}/*!sc*/ data-styled.g142[id="renderToHtmlWithGarden__TableContainer-sc-1fq0tbl-0"]{content:"lczzPf,"}/*!sc*/ </style><div><h2 id="introduction" style="position:relative"><a href="#introduction" aria-label="introduction permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Introduction</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">This document outlines Zendesk’s design recommendations for top bar apps to help developers create a consistent experience with the rest of Zendesk’s products. This document is written whether or not you are using Garden, Zendesk’s design system, as many of these principles apply even if you are using your own design system or UI components.</p> <h2 id="where-do-top-bar-apps-live" style="position:relative"><a href="#where-do-top-bar-apps-live" aria-label="where do top bar apps live permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Where do top bar apps live</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Top bar apps are located in one of Zendesk's most prized positions in Support.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Top bar apps gives Agents the ability to improve their workflow with minimal distraction so they can focus on their work. The app location persists across Support much like a global setting.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Agents can click on any one of the apps in the top bar navigation whenever they need, without it taking over their workspace.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Top bar apps are useful to help amplify the way Agents work today.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">For apps that don’t require a full page view or a lot of screen real estate, top bar is a good choice of location for an Agent. If an app requires more focus time and input, this is where we recommend using the <a href="/documentation/apps/app-design-guidelines/support/sidebar-apps-support/">sidebar location</a>.</p> <h2 id="how-are-they-accessed" style="position:relative"><a href="#how-are-they-accessed" aria-label="how are they accessed permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>How are they accessed</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Top bar apps are installed directly into Admin Centre once an Agent installs it from the <a href="https://www.zendesk.com/apps/">Zendesk Marketplace</a>. Apps can also be uploaded privately via the Admin Centre.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Apps are available immediately in Support for Agents to begin using right away.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">One of the benefits of using Top Bar Apps is they can be re-ordered positioned in a way that makes sense to a workspace.</p> <h3 id="come-one-come-all-to-the-marketplace" style="position:relative"><a href="#come-one-come-all-to-the-marketplace" aria-label="come one come all to the marketplace permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Come one come all to the Marketplace</h3> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Top Bar Apps are found in the app directory on the <a href="https://www.zendesk.com/apps/">Zendesk Marketplace</a> for Admins to research, browse and install.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">While we currently do not support filtering by location, Admins can sort through apps on the Marketplace by product: e.g Support, Ticketing system.</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_app_directory_1.png"/> <h3 id="where-are-the-apps-saved" style="position:relative"><a href="#where-are-the-apps-saved" aria-label="where are the apps saved permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Where are the apps saved?</h3> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Once the app is installed, Admins can access installed apps in the Admin Centre under “Zendesk Support apps”.</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_my_apps_saved.png"/> <h3 id="reordering-of-apps" style="position:relative"><a href="#reordering-of-apps" aria-label="reordering of apps permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Reordering of apps</h3> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">While Agents do not have access to customise the order of how their apps are positioned in Support, Admins will be able to do this via the Admin Centre.</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_apps_reordering.png"/> <h2 id="app-icon-guideline" style="position:relative"><a href="#app-icon-guideline" aria-label="app icon guideline permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>App icon guideline</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Top bar layouts use uniform elements and spacing to encourage consistency across platforms, environments, and screen sizes.</p> <h3 id="icon-specifications" style="position:relative"><a href="#icon-specifications" aria-label="icon specifications permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Icon specifications</h3> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Your logo plays an important part of your brand identity. We’ve put together tried and tested tips for the most successful icon published in Support. Follow these guidelines below and you’ll be well on your way.</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_icon_outer_space-2.png" width="375"/> <h3 id="dos-and-donts" style="position:relative"><a href="#dos-and-donts" aria-label="dos and donts permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Do’s and Don’ts</h3> <h4 id="avoid-custom-fill-properties" style="position:relative"><a href="#avoid-custom-fill-properties" aria-label="avoid custom fill properties permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Avoid custom fill properties</h4> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">To maintain a cohesive appearance in the top navigation, Zendesk applies a consistent fill color to all app logos. Zendesk recommends you choose an icon design that remains recognizable when displayed in a single color. Avoid using the fill attribute within your app icon’s SVG file because hardcoding specific colors can result in visual inconsistencies with the standardized look of Zendesk and other third-party app icons in the top navigation.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">If your app icon appears inconsistent, check whether the fill attribute in your logo’s SVG is causing the issue.</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_icon_logo_white-2.png"/> <h4 id="help-your-logo-appear-as-it-is" style="position:relative"><a href="#help-your-logo-appear-as-it-is" aria-label="help your logo appear as it is permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Help your logo appear as it is</h4> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Setting your logo within a square shape will give your icon the best chance of appearing to scale (and not distorted).</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_icon_white_stretching-2.png"/> <h4 id="aim-for-simplicity" style="position:relative"><a href="#aim-for-simplicity" aria-label="aim for simplicity permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Aim for simplicity</h4> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">You’ll see in the example below simple shapes work better for your icon than a detailed design. Especially when the icon A simple icon design is much clearer and more recognizable at a smaller scale.</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_icon_white_simplicity-2.png"/> <h4 id="aim-for-consistency" style="position:relative"><a href="#aim-for-consistency" aria-label="aim for consistency permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Aim for consistency</h4> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Along with the icon you set for your top bar app, you have the ability to provide an image of your logo to sit within the top header of the app. Consider using similar colours and help tie the branding together. Another consideration is to ensure any shapes you have in your logo that overlap, may get lost once the logo is published given the size of the logo is quite small.</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_icon_consistency-2.png"/> <h2 id="container" style="position:relative"><a href="#container" aria-label="container permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Container</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The anatomy of a container window will help you better understand how the structure is created. The minimum width and minimum height (excluding header) of a container are both 100px.</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_container-2.png"/> <div class="renderToHtmlWithGarden__TableContainer-sc-1fq0tbl-0 lczzPf table-container"><table data-garden-id="tables.table" data-garden-version="8.76.4" class="StyledTable-sc-gje7na-0 iQFraf"><thead data-garden-id="tables.head" data-garden-version="8.76.4" class="StyledHead-sc-spf23a-0 johpeY"><tr data-garden-id="tables.header_row" data-garden-version="8.76.4" class="StyledRow__StyledBaseRow-sc-ek66ow-0 StyledHeaderRow-sc-16ogvdx-0 fJgbCY jTgiQE"><th data-garden-id="tables.header_cell" data-garden-version="8.76.4" class="StyledCell-sc-8hpncx-0 StyledHeaderCell-sc-fzagoe-0 kFCBvR exiVod">Font styling</th><th data-garden-id="tables.header_cell" data-garden-version="8.76.4" class="StyledCell-sc-8hpncx-0 StyledHeaderCell-sc-fzagoe-0 kFCBvR exiVod">H3</th></tr></thead><tbody data-garden-id="tables.body" data-garden-version="8.76.4" class="StyledBody-sc-14ud6y-0 cBLosE"><tr data-garden-id="tables.row" data-garden-version="8.76.4" tabindex="-1" class="StyledRow__StyledBaseRow-sc-ek66ow-0 StyledRow-sc-ek66ow-1 fJgbCY gGkQMS"><td data-garden-id="tables.cell" data-garden-version="8.76.4" class="StyledCell-sc-8hpncx-0 kFCBvR">Text styling</td><td data-garden-id="tables.cell" data-garden-version="8.76.4" class="StyledCell-sc-8hpncx-0 kFCBvR">#2F3941</td></tr><tr data-garden-id="tables.row" data-garden-version="8.76.4" tabindex="-1" class="StyledRow__StyledBaseRow-sc-ek66ow-0 StyledRow-sc-ek66ow-1 fJgbCY gGkQMS"><td data-garden-id="tables.cell" data-garden-version="8.76.4" class="StyledCell-sc-8hpncx-0 kFCBvR">Background colour</td><td data-garden-id="tables.cell" data-garden-version="8.76.4" class="StyledCell-sc-8hpncx-0 kFCBvR">#FFFFFF</td></tr></tbody></table></div> <h3 id="dos-and-donts-1" style="position:relative"><a href="#dos-and-donts-1" aria-label="dos and donts 1 permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Dos and Don’ts</h3> <h4 id="consider-the-components-in-your-large-format-layout" style="position:relative"><a href="#consider-the-components-in-your-large-format-layout" aria-label="consider the components in your large format layout permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Consider the components in your large format layout</h4> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Making use of a two column grid for the large container, will maximise the screen real estate that you have. When people are using your app they will be scrolling less.</p> <img style="padding:5px" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/garden_component_large_practice-2.png"/> <h2 id="further-reading" style="position:relative"><a href="#further-reading" aria-label="further reading permalink" class="anchor before"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M4.441 7.38l.095.083.939.939-.708.707-.939-.939-2 2-.132.142a2.829 2.829 0 003.99 3.99l.142-.132 2-2-.939-.939.707-.708.94.94a1 1 0 01.083 1.32l-.083.094-2 2A3.828 3.828 0 01.972 9.621l.15-.158 2-2A1 1 0 014.34 7.31l.101.07zm7.413-3.234a.5.5 0 01.057.638l-.057.07-7 7a.5.5 0 01-.765-.638l.057-.07 7-7a.5.5 0 01.708 0zm3.023-3.025a3.829 3.829 0 01.15 5.257l-.15.158-2 2a1 1 0 01-1.32.083l-.094-.083-.94-.94.708-.707.939.94 2-2 .132-.142a2.829 2.829 0 00-3.99-3.99l-.142.131-2 2 .939.939-.707.708-.94-.94a1 1 0 01-.082-1.32l.083-.094 2-2a3.828 3.828 0 015.414 0z"></path></svg></a>Further reading</h2> <ul data-garden-id="typography.unordered_list" data-garden-version="8.76.4" class="StyledList__StyledUnorderedList-sc-jdbsfi-1 jXJwrs"> <li data-garden-id="typography.unordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledUnorderedListItem-sc-9rsipg-1 kXVLDw cmaSZm"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Read up on some of the <a href="/documentation/apps/app-design-guidelines/ui-design-fundamentals/">UI fundamentals</a> Zendesk uses in all of it’s products.</p> </li> <li data-garden-id="typography.unordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledUnorderedListItem-sc-9rsipg-1 kXVLDw cmaSZm"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Learn about Zendesk’s <a href="https://garden.zendesk.com/content/voice-and-tone">tone and voice</a> to help write like Zendesk.</p> </li> <li data-garden-id="typography.unordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledUnorderedListItem-sc-9rsipg-1 kXVLDw cmaSZm"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Explore the <a href="https://garden.zendesk.com/">Garden website</a> to see all of the components available.</p> </li> </ul></div></div><footer class="footer__Container-sc-1o148d7-0 SvBlU"><div class="footer__Heading-sc-1o148d7-3 cFqiom">Join our developer community</div><a href="https://support.zendesk.com/hc/en-us/community/topics" target="_blank" rel="noreferrer noopener" class="footer__LinkWithIcon-sc-1o148d7-4 gBEHkz"><svg width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" d="M1 .5h14c.3 0 .5.2.5.5v10c0 .3-.2.5-.5.5H8l-3.6 3.6c-.3.3-.9.1-.9-.4v-3.3H1c-.3 0-.5-.2-.5-.5V1C.5.7.7.5 1 .5z"></path></svg>Forum</a><a href="https://developerblog.zendesk.com" target="_blank" rel="noreferrer noopener" class="footer__LinkWithIcon-sc-1o148d7-4 gBEHkz"><svg width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M4.5 7.5h7m-7 1.97h7m-7 2h7m3-7.27V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"></path></svg>Blog</a><a href="https://docs.google.com/forms/d/e/1FAIpQLScm_rDLWwzWnq6PpYWFOR_PwMaSBcaFft-1pYornQtBGAaiJA/viewform" target="_blank" rel="noreferrer noopener" class="footer__LinkWithIcon-sc-1o148d7-4 gBEHkz"><svg width="16" height="16" focusable="false" viewBox="0 0 16 16"><path fill="currentColor" d="M9.826 0a2.522 2.522 0 012.516 2.356l.006.166-.001 1.398A2.522 2.522 0 0115.217 8a2.522 2.522 0 01-1.573 4.342l-.166.006-1.398-.001A2.522 2.522 0 018 15.218a2.522 2.522 0 01-4.343-1.574l-.005-.166.001-1.398c-.294.148-.62.24-.965.262l-.166.006A2.522 2.522 0 01.782 8a2.522 2.522 0 011.574-4.343l.166-.006 1.398.001a2.507 2.507 0 01-.262-.965l-.006-.166A2.522 2.522 0 018 .782 2.511 2.511 0 019.826 0zM6.174 8.304c-.84 0-1.522.681-1.522 1.522v3.652a1.522 1.522 0 103.044 0V9.826c0-.84-.681-1.522-1.522-1.522zm3.652 3.653H8.304v1.521a1.522 1.522 0 101.522-1.521zM4.043 8.304H2.522a1.522 1.522 0 101.521 1.522V8.304zm9.435 0H9.826a1.522 1.522 0 100 3.044h3.652a1.522 1.522 0 100-3.044zM9.826 1c-.84 0-1.522.681-1.522 1.522v3.652a1.522 1.522 0 103.044 0V2.522c0-.84-.681-1.522-1.522-1.522zM6.174 4.652H2.522a1.522 1.522 0 100 3.044h3.652a1.522 1.522 0 100-3.044zm7.304 0c-.84 0-1.521.681-1.521 1.522v1.522h1.521a1.522 1.522 0 100-3.044zM6.174 1a1.522 1.522 0 100 3.043h1.522V2.522C7.696 1.682 7.015 1 6.174 1z"></path></svg>Slack</a><div class="footer__Address-sc-1o148d7-2 jtnqlv"><span class="footer__CompanyName-sc-1o148d7-1 bmfauJ">Zendesk</span>181 Fremont Street, 17th Floor, San Francisco, California 94105</div><div class="footer__LegalLinks-sc-1o148d7-5 dUSfiG"><a href="https://www.zendesk.com/company/agreements-and-terms/privacy-policy/" target="_blank" rel="noreferrer noopener">Privacy Policy</a><a href="https://www.zendesk.com/company/agreements-and-terms/master-subscription-agreement/" target="_blank" rel="noreferrer noopener">Terms & Conditions</a><a href="https://status.zendesk.com" target="_blank" rel="noreferrer noopener">System Status</a><a href="#onetrust-show-cookie-settings" class="ot-sdk-show-settings" id="onetrust-show-cookie-settings">Cookie Settings</a></div></footer></div></div></div></main></div></div></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/documentation/apps/app-design-guidelines/support/topbar-apps-support/";/*]]>*/</script> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-c19a009c133e5bbb45cf.js\"],\"component---src-pages-404-jsx\":[\"/component---src-pages-404-jsx-1a5ac3f60f4bfaf6a0b9.js\"],\"component---src-pages-algolia-poc-jsx\":[\"/component---src-pages-algolia-poc-jsx-33e68b08fbe0b98a3c91.js\"],\"component---src-pages-api-reference-jsx\":[\"/component---src-pages-api-reference-jsx-888c222ca70144d9f256.js\"],\"component---src-pages-documentation-jsx\":[\"/component---src-pages-documentation-jsx-df27a02103fa77d56470.js\"],\"component---src-templates-markdown-doc-page-jsx\":[\"/component---src-templates-markdown-doc-page-jsx-f780b795209f682cd4f6.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-api-reference-changelog-changelog-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-api-reference-changelog-changelog-mdx-b4c5ff377e5397a2fa07.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-amazon-eventbridge-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-amazon-eventbridge-index-mdx-ce59728786eb22d8e82c.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-api-basics-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-api-basics-index-mdx-1b46a71fb9103974e80e.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-apps-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-apps-index-mdx-fbb8abf31e4545674650.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-channel-framework-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-channel-framework-index-mdx-fe833b88330d10a574a8.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-classic-web-widget-sdks-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-classic-web-widget-sdks-index-mdx-c0fe08d2ce72cf102399.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-conversations-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-conversations-index-mdx-0bc894a4243c175d4207.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-custom-data-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-custom-data-index-mdx-2907537442e6511b2a5d.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-help-center-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-help-center-index-mdx-f8736721440e766b92d4.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-integration-services-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-integration-services-index-mdx-3f58da62a20bee2f5fa2.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-live-chat-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-live-chat-index-mdx-ffc888f670f9b0b241ce.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-marketplace-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-marketplace-index-mdx-717240e74dedb62d6133.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-sales-crm-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-sales-crm-index-mdx-288a5a23ce9fa3ae7e00.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-ticketing-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-ticketing-index-mdx-398b4591df2716a64b82.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-voice-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-voice-index-mdx-93d3f7f0e453d9d7cb16.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-webhooks-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-webhooks-index-mdx-4d80965f83d3b44674f6.js\"],\"component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-zendesk-web-widget-sdks-index-mdx\":[\"/component---src-templates-mdx-doc-page-jsx-content-file-path-src-documents-documentation-zendesk-web-widget-sdks-index-mdx-b5ae9227500bc01967fb.js\"],\"component---src-templates-use-case-page-jsx\":[\"/component---src-templates-use-case-page-jsx-bbac5bd695ff1f69ad9b.js\"]}"; </script> <script>window.___webpackCompilationHash="f1fa64ef5d8760491e03";</script><script src="/webpack-runtime-8ba4f3c1889bee4bb7bb.js" async></script><script src="/framework-d7d4501dd622ab1f8e40.js" async></script><script src="/app-c19a009c133e5bbb45cf.js" async></script></body></html>