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.13.6"/><meta data-react-helmet="true" name="description" content="Developer documentation for products at Zendesk"/><meta data-react-helmet="true" property="og:title" content="Building a server-side app - Part 2: Displaying server-side content in a Zendesk app"/><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="Building a server-side app - Part 2: Displaying server-side content in a Zendesk app"/><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*/ data-styled.g113[id="tableOfContents__TOCListItem-sc-nfi473-1"]{content:"fIzhkw,frsGSE,"}/*!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">Building a server-side app - Part 2: Displaying server-side content in a Zendesk app | 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>Build An 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>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 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="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">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 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=":R1iiml5:--panel:0" aria-hidden="false" aria-labelledby=":R1iiml5:--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-build-an-app-building-a-server-side-app-part-1-core-concepts"><a tabindex="0" 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"><div class="sidebarListItem__CurrentPageListItem-sc-3bcm75-0 kHDXqi">Building a server-side app - Part 2: Displaying server-side content in a Zendesk app</div></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="0" 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="0" 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="0" 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="0" 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="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">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 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=":Remml5:--panel:0" aria-hidden="true" aria-labelledby=":Remml5:--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-support-sidebar-apps-support"><a tabindex="-1" 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"><a tabindex="-1" href="/documentation/apps/app-design-guidelines/support/topbar-apps-support/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Top bar 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=":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="Creating a basic framework app" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#creating-a-basic-framework-app">Creating a basic framework app</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Creating a web application" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#creating-a-web-application">Creating a web application</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Setting up the web application" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#setting-up-the-web-application">Setting up the web application</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Python gotchas" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#python-gotchas">Python gotchas</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Displaying server-side content in the Zendesk app" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#displaying-server-side-content-in-the-zendesk-app">Displaying server-side content in the Zendesk app</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Testing the Zendesk app" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#testing-the-zendesk-app">Testing the Zendesk app</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">Building a server-side app - Part 2: Displaying server-side content in a Zendesk app</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="Creating a basic framework app" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#creating-a-basic-framework-app">Creating a basic framework app</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Creating a web application" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#creating-a-web-application">Creating a web application</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Setting up the web application" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#setting-up-the-web-application">Setting up the web application</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Python gotchas" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#python-gotchas">Python gotchas</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Displaying server-side content in the Zendesk app" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#displaying-server-side-content-in-the-zendesk-app">Displaying server-side content in the Zendesk app</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 frsGSE"><a data-text="Testing the Zendesk app" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/#testing-the-zendesk-app">Testing the Zendesk app</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">.kkmMiz{display:table;margin:0;padding:12px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;background-color:#f8f9f9;color:#2f3941;}/*!sc*/ data-styled.g114[id="StyledCodeBlock-sc-5wky57-0"]{content:"kkmMiz,"}/*!sc*/ .ejUpFz{-webkit-transition:box-shadow 0.1s ease-in-out;transition:box-shadow 0.1s ease-in-out;overflow:auto;}/*!sc*/ .ejUpFz:focus{outline:none;}/*!sc*/ .ejUpFz:focus-visible,.ejUpFz[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*/ data-styled.g115[id="StyledCodeBlockContainer-sc-14zgbfw-0"]{content:"ejUpFz,"}/*!sc*/ .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*/ .oQNqW{line-height:19px;font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:13px;font-weight:400;direction:ltr;}/*!sc*/ .oQNqW[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*/ .bRzZjY{line-height:normal;color:#68737d;font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:calc(1em - 1px);direction:ltr;}/*!sc*/ .bRzZjY[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,oQNqW,bRzZjY,"}/*!sc*/ .gnwyVV{display:table-row;height:20px;direction:ltr;}/*!sc*/ .gnwyVV::before{display:table-cell;padding-right:24px;width:1px;text-align:right;color:#68737d;content:counter(linenumber);counter-increment:linenumber;}/*!sc*/ .gnwyVV::after{display:inline-block;width:12px;content:'';}/*!sc*/ .NikiF{display:table-row;height:20px;direction:ltr;background-color:rgba(0,0,0,0.1);}/*!sc*/ .NikiF::before{display:table-cell;padding-right:24px;width:1px;text-align:right;color:#68737d;content:counter(linenumber);counter-increment:linenumber;}/*!sc*/ .NikiF::after{display:inline-block;width:12px;content:'';}/*!sc*/ data-styled.g117[id="StyledCodeBlockLine-sc-1goay17-0"]{content:"gnwyVV,NikiF,"}/*!sc*/ .zghgj{display:inline-block;}/*!sc*/ .zghgj.bold:not(.diff){font-weight:600;}/*!sc*/ .zghgj.coord{padding-left:0.75em;}/*!sc*/ .zghgj.italic{font-style:italic;}/*!sc*/ .zghgj.prefix{width:2em;text-align:center;}/*!sc*/ .zghgj.builtin,.zghgj.class-name,.zghgj.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script){color:#02a191;}/*!sc*/ .zghgj.doctype,.zghgj.prolog,.zghgj.tag.punctuation:not(.attr-value):not(.script):not(.spread){color:#681219;}/*!sc*/ .zghgj.attribute.value,.zghgj.attr-value,.zghgj.atrule,.zghgj.cdata,.zghgj.string,.zghgj.url.content{color:#8c232c;}/*!sc*/ .zghgj.constant,.zghgj.interpolation-punctuation{color:#3091ec;}/*!sc*/ .zghgj.attr-name,.zghgj.attr-value.spread,.zghgj.environment,.zghgj.interpolation,.zghgj.parameter,.zghgj.property,.zghgj.property-access,.zghgj.variable{color:#e34f32;}/*!sc*/ .zghgj.parameter.punctuation,.zghgj.attr-name + .attr-value.punctuation{color:inherit;}/*!sc*/ .zghgj.regex{color:#e35b66;}/*!sc*/ .zghgj.boolean,.zghgj.bold:not(.diff),.zghgj.entity,.zghgj.important,.zghgj.tag:not(.punctuation):not(.attr-name):not(.attr-value):not(.script):not(.class-name){color:#3353e2;}/*!sc*/ .zghgj.number,.zghgj.unit{color:#038153;}/*!sc*/ .zghgj.assign-left,.zghgj.function,.zghgj.selector:not(.attribute){color:#b35827;}/*!sc*/ .zghgj.atrule.rule,.zghgj.keyword{color:#cf62a8;}/*!sc*/ .zghgj.blockquote,.zghgj.comment,.zghgj.shebang{color:#2e8200;}/*!sc*/ .StyledCodeBlock-sc-5wky57-0.language-css .zghgj.zghgj.plain{color:#8c232c;}/*!sc*/ .StyledCodeBlock-sc-5wky57-0.language-diff .zghgj.zghgj.coord{color:#6a27b8;}/*!sc*/ .StyledCodeBlock-sc-5wky57-0.language-diff .zghgj.zghgj.deleted{color:#8c232c;}/*!sc*/ .StyledCodeBlock-sc-5wky57-0.language-diff .zghgj.zghgj.diff{color:#703815;}/*!sc*/ .StyledCodeBlock-sc-5wky57-0.language-diff .zghgj.zghgj.inserted{color:#186146;}/*!sc*/ data-styled.g118[id="StyledCodeBlockToken-sc-1hkshdq-0"]{content:"zghgj,"}/*!sc*/ .cPdjYE{border-radius:2px;padding:1.5px;background-color:#e9ebed;color:#49545c;}/*!sc*/ a .StyledCode-sc-l8yvmf-0{color:inherit;}/*!sc*/ data-styled.g119[id="StyledCode-sc-l8yvmf-0"]{content:"cPdjYE,"}/*!sc*/ .ebHyzw{direction:ltr;margin:0;margin-left:24px;padding:0;list-style-position:outside;list-style-type:decimal;}/*!sc*/ data-styled.g120[id="StyledList__StyledOrderedList-sc-jdbsfi-0"]{content:"ebHyzw,"}/*!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*/ .jwXWQC{margin-left:-4px;padding-left:4px;line-height:1.4285714285714286;padding-top:4px;}/*!sc*/ .StyledList__StyledOrderedList-sc-jdbsfi-0 > .StyledListItem__StyledOrderedListItem-sc-9rsipg-0:first-child,.StyledList__StyledUnorderedList-sc-jdbsfi-1 > .jwXWQC:first-child{padding-top:0;}/*!sc*/ .StyledList__StyledOrderedList-sc-jdbsfi-0 .StyledList__StyledOrderedList-sc-jdbsfi-0 > .StyledListItem__StyledOrderedListItem-sc-9rsipg-0:first-child,.StyledList__StyledOrderedList-sc-jdbsfi-0 .StyledList__StyledUnorderedList-sc-jdbsfi-1 > .jwXWQC:first-child,.StyledList__StyledUnorderedList-sc-jdbsfi-1 .StyledList__StyledUnorderedList-sc-jdbsfi-1 > .jwXWQC:first-child,.StyledList__StyledUnorderedList-sc-jdbsfi-1 .StyledList__StyledUnorderedList-sc-jdbsfi-1 > .jwXWQC:first-child{padding-top:4px;}/*!sc*/ data-styled.g122[id="StyledListItem__StyledOrderedListItem-sc-9rsipg-0"]{content:"jwXWQC,"}/*!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*/ </style><div><p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In the previous tutorial in this series, you learned core concepts about server-side Zendesk apps. In this tutorial, you'll build a small web app that displays server-side content in a Zendesk app.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The tutorial covers the following tasks:</p> <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"><a href="#creating-a-basic-framework-app">Creating a basic framework app</a></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"><a href="#creating-a-web-application">Creating a web application</a></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"><a href="#displaying-server-side-content-in-the-zendesk-app">Displaying server-side content in the Zendesk app</a></li> </ul> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">This tutorial is the second part of a series on building a server-side Zendesk app:</p> <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"><a href="/documentation/apps/build-an-app/building-a-server-side-app/part-1-core-concepts/">Part 1: Core concepts</a></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">Part 2: Displaying server-side content in a Zendesk app - YOU ARE HERE</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"><a href="/documentation/apps/build-an-app/building-a-server-side-app/part-3-access-external-apis/">Part 3: Accessing external APIs</a></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"><a href="/documentation/apps/build-an-app/building-a-server-side-app/part-4-access-framework-apis/">Part 4: Accessing framework APIs</a></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"><a href="/documentation/apps/build-an-app/building-a-server-side-app/part-5-secure-the-app/">Part 5: Securing the app</a></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"><a href="/documentation/apps/build-an-app/building-a-server-side-app/part-6-deploy-the-app/">Part 6: Deploying the app</a></li> </ul> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">You'll build the web app using a Python micro web framework named <a href="http://bottlepy.org/docs/dev/">Bottle</a>. The framework helps keep technical details to a minimum so you can focus on the logic, which you can apply in another framework if you want.</p> <h2 id="creating-a-basic-framework-app" style="position:relative"><a href="#creating-a-basic-framework-app" aria-label="creating a basic framework app 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>Creating a basic framework app</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Even when building a server-side web app, you still need to create a basic framework app with the required files and folders. You can generate these files using ZCLI.</p> <ol data-garden-id="typography.ordered_list" data-garden-version="8.76.4" class="StyledList__StyledOrderedList-sc-jdbsfi-0 ebHyzw"> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Create a folder named <strong>tutorial_apps</strong>. Example:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-tsx" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">mkdir tutorial_apps</span></code></pre></div></pre> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In your shell, navigate to the <strong>tutorial_apps</strong> folder. Example:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-tsx" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">cd tutorial_apps</span></code></pre></div></pre> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In the <strong>tutorial_apps</strong> folder, run:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-tsx" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">zcli apps</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">:</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">new</span></code></pre></div></pre> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">When prompted, enter the following information:</p> <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">Directory name: <strong>app_local</strong></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">Author's name: Your name</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">Author's email: Your email address</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">Author's website: Leave blank and press Enter.</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">App name: <strong>Server-side App Tutorial</strong></li> </ul> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">ZCLI creates app starter files in the <strong>app_local</strong> folder.</p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In the <strong>app_local</strong> folder, open <strong>manifest.json</strong> in your text editor. In the file, replace the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">ticket_sidebar</code> property's <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">url</code> value with the following:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-json" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">...</span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"location"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">:</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"support"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">:</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"ticket_sidebar"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">:</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW NikiF token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"url"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">:</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token string" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"http://localhost:8080/sidebar"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">,</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"flexible"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">:</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token boolean" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">true</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">,</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">...</span></code></pre></div></pre> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">You'll need to change the URL again when you deploy the web app.</p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Save <strong>manifest.json</strong></p> </li> </ol> <h2 id="creating-a-web-application" style="position:relative"><a href="#creating-a-web-application" aria-label="creating a web application 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>Creating a web application</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Next, develop and test the web app using Python.</p> <h3 id="setting-up-the-web-application" style="position:relative"><a href="#setting-up-the-web-application" aria-label="setting up the web application 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>Setting up the web application</h3> <ol data-garden-id="typography.ordered_list" data-garden-version="8.76.4" class="StyledList__StyledOrderedList-sc-jdbsfi-0 ebHyzw"> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In your shell, run:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-tsx" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">pip3 install bottle requests</span></code></pre></div></pre> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The command installs the <a href="http://bottlepy.org/docs/dev/index.html">Bottle</a> and <a href="https://requests.readthedocs.io/en/latest/">Requests</a> packages for Python.</p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In the <strong>tutorial_apps</strong> folder, create a folder named <strong>app_remote</strong>. Example:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-tsx" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">cd tutorial_apps</span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">mkdir app_remote</span></code></pre></div></pre> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In the <strong>app_remote</strong> folder, create a text file named <strong>app.py</strong>.</p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Open <strong>app.py</strong> in a text editor and paste the following into the file:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-tsx" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">from bottle </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">import</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> route</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">,</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> run</span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"># app code goes here</span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">run</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">(</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">host</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token string" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">'localhost'</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">,</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> port</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token number" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">8080</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">)</span></code></pre></div></pre> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The first line imports the Bottle <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">route()</code> and <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">run()</code> methods to create routes to pages and run the web app.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The Bottle framework has a built-in development server you can use to test your changes. The <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">run()</code> method starts and runs the web server on port 8080.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">To learn more about the framework, see <a href="http://bottlepy.org/docs/dev/">Bottle: Python Web Framework</a> on the Bottle website.</p> </li> </ol> <h3 id="python-gotchas" style="position:relative"><a href="#python-gotchas" aria-label="python gotchas 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>Python gotchas</h3> <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"><strong>Indentation matters in Python</strong>. When copying the examples in this tutorial, make sure to indent your lines appropriately. So far all the lines are flush with the left margin.</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"><strong>Indent with 4 spaces, not a tab</strong>. Python will stop executing and report an indentation error if it encounters a tab character.</li> </ul> <h2 id="displaying-server-side-content-in-the-zendesk-app" style="position:relative"><a href="#displaying-server-side-content-in-the-zendesk-app" aria-label="displaying server side content in the zendesk app 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>Displaying server-side content in the Zendesk app</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">To display server-side content in the iframe app in Zendesk Support, create a route in the web app to handle requests from the iframe. To refresh your memory, Zendesk Support makes an initial request to <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">http://localhost:8080/sidebar</code>, the URL specified in your <strong>manifest.json</strong> file.</p> <ol data-garden-id="typography.ordered_list" data-garden-version="8.76.4" class="StyledList__StyledOrderedList-sc-jdbsfi-0 ebHyzw"> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In <strong>app.py</strong>, replace the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"># app code goes here</code> comment with the following route:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-tsx" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">@</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">route</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">(</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token string" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">'/sidebar'</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">)</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">def </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">send_iframe_html</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">(</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">)</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">:</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span></code><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">return</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token string" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">'<p>App content from the server</p>'</span></code></pre></div></pre> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">send_iframe_html()</code> function returns the line of HTML in response to any HTTP request to the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">/sidebar</code> route. You can test it using the built-in development server in Bottle.</p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In your shell, navigate to the <strong>app_remote</strong> folder.</p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Run the following command to start the local server:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-tsx" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">python3 app</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">.</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">py</span></code></pre></div></pre> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Wait a moment to allow the server to start, then open <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">http://localhost:8080/sidebar</code> in a browser.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The following HTML page is displayed:</p> <img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/server_app_localhost.png" width="500" class="screenshot"/> </li> </ol> <h3 id="testing-the-zendesk-app" style="position:relative"><a href="#testing-the-zendesk-app" aria-label="testing the zendesk app 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>Testing the Zendesk app</h3> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">You can already test the app in Zendesk Support's Agent Workspace:</p> <ol data-garden-id="typography.ordered_list" data-garden-version="8.76.4" class="StyledList__StyledOrderedList-sc-jdbsfi-0 ebHyzw"> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Make sure your Bottle server is still running. Zendesk Support will request the initial page from it.</p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In another terminal session, navigate to the <strong>app_local</strong> folder.</p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Start a local ZCLI web server by running the following command:</p> <pre><div data-garden-id="typography.codeblock_container" data-garden-version="8.76.4" class="StyledCodeBlockContainer-sc-14zgbfw-0 ejUpFz"><pre class="StyledCodeBlock-sc-5wky57-0 kkmMiz prism-code language-tsx" data-garden-id="typography.codeblock" data-garden-version="8.76.4"><code class="StyledFont-sc-1iildbo-0 StyledCodeBlockLine-sc-1goay17-0 oQNqW gnwyVV token-line" data-garden-id="typography.codeblock_code" data-garden-version="8.76.4"><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">zcli apps</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">:</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">server</span></code></pre></div></pre> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In your browser's private or incognito window, sign in to Zendesk Support and go to the Agent Workspace. From the workspace, open a new or existing ticket.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The URL should look like this:</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu"><code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">https://{subdomain}.zendesk.com/agent/tickets/{ticket_id}</code></p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Append <strong>?zcli_apps=true</strong> to the ticket URL, and reload the page. The URL should look like this:</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu"><code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">https://{subdomain}.zendesk.com/agent/tickets/{ticket_id}?zcli_apps=true</code></p> </li> <li data-garden-id="typography.ordered_list_item" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledListItem__StyledOrderedListItem-sc-9rsipg-0 kXVLDw jwXWQC"> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Click the Apps icon.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu"><img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/localizing-app-apps-icon.png" width="500" class="screenshot"/></p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The app displays the HTML served by the Bottle web server.</p> <img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/server_app_iframe.png" width="300" class="screenshot"/> </li> </ol> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">That's all there is to displaying server-side content in a Zendesk app. The rest is just the details of building the web app, including creating pages that can access both external and framework APIs.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In this tutorial, you built and ran a web app that displayed content in the iframe in Zendesk Support. In the next tutorial, you'll learn how to request and display external data in Zendesk Support. See <a href="/documentation/apps/build-an-app/building-a-server-side-app/part-3-access-external-apis/">Part 3 - Accessing external APIs</a>.</p></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/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/";/*]]>*/</script> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-c810cc938f8d5f6a30c7.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-c0143259e936bb2e38a0.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="46f9e4e109c9b72df5e3";</script><script src="/webpack-runtime-073552febaaa89f76f7d.js" async></script><script src="/framework-d7d4501dd622ab1f8e40.js" async></script><script src="/app-c810cc938f8d5f6a30c7.js" async></script></body></html>