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 your first Sell app - Part 3: Creating and inserting templates"/><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 your first Sell app - Part 3: Creating and inserting templates"/><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*/ data-styled.g113[id="tableOfContents__TOCListItem-sc-nfi473-1"]{content:"fIzhkw,"}/*!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 your first Sell app - Part 3: Creating and inserting templates | 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 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 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="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 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 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=":Raiml5:--panel:0" aria-hidden="false" aria-labelledby=":Raiml5:--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-build-your-first-sell-app-building-your-first-sell-app-part-1-laying-the-groundwork"><a tabindex="0" 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="0" 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"><div class="sidebarListItem__CurrentPageListItem-sc-3bcm75-0 kHDXqi">Building your first Sell app - Part 3: Creating and inserting templates</div></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="0" 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="0" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-5-installing-the-app-in-zendesk-sell/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Sell app - Part 5: Installing the app in Zendesk Sell</a></li></ul></div></section></div></div></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":Reiml5:--trigger:0" role="button" tabindex="0" aria-controls=":Reiml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Building your first Chat app</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":Reiml5:--panel:0" aria-hidden="true" aria-labelledby=":Reiml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-1-laying-the-groundwork"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-1-laying-the-groundwork/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Chat app - Part 1: Laying the groundwork</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-2-designing-the-user-interface"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-2-designing-the-user-interface/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Chat app - Part 2: Designing the user interface</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-3-creating-and-inserting-templates"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-3-creating-and-inserting-templates/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Chat app - Part 3: Creating and inserting templates</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-4-getting-data"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-4-getting-data/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building your first Chat app - Part 4: Getting data</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-build-your-first-chat-app-part-5-installing-the-app-in-zendesk-chat"><a tabindex="-1" href="/documentation/apps/build-an-app/build-your-first-chat-app/part-5-installing-the-app-in-zendesk-chat/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw"> Building your first Chat app - Part 5: Installing the app in Zendesk Chat</a></li></ul></div></section></div></div></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-support-ticket-editor-app"><a tabindex="0" href="/documentation/apps/build-an-app/building-a-support-ticket-editor-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Building a Support ticket editor app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-localizing-a-support-app"><a tabindex="0" href="/documentation/apps/build-an-app/localizing-a-support-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Localizing a Support app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-adding-third-party-oauth-to-a-support-app"><a tabindex="0" href="/documentation/apps/build-an-app/adding-third-party-oauth-to-a-support-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Adding third-party OAuth to a Support app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-using-react-in-a-support-app"><a tabindex="0" href="/documentation/apps/build-an-app/using-react-in-a-support-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Using React in a Support app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-dynamically-changing-app-icons"><a tabindex="0" href="/documentation/apps/build-an-app/dynamically-changing-app-icons/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Dynamically changing app icons</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-using-ai-to-summarize-conversations-in-a-support-app"><a tabindex="0" href="/documentation/apps/build-an-app/using-ai-to-summarize-conversations-in-a-support-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Using AI to summarize conversations in a Support app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-empowering-support-agents-to-resolve-customer-complaints"><a tabindex="0" href="/documentation/apps/build-an-app/empowering-support-agents-to-resolve-customer-complaints/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Empowering support agents to resolve customer complaints</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-prompt-and-personalized-service-with-a-single-view-for-your-customer"><a tabindex="0" href="/documentation/apps/build-an-app/prompt-and-personalized-service-with-a-single-view-for-your-customer/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Prompt and personalized service with a single view of your customer</a></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":R1iiml5:--trigger:0" role="button" tabindex="0" aria-controls=":R1iiml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Building a server-side app</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":R1iiml5:--panel:0" aria-hidden="true" aria-labelledby=":R1iiml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-1-core-concepts"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-1-core-concepts/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 1: Core concepts</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-2-display-server-side-content-in-a-zendesk-app"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-2-display-server-side-content-in-a-zendesk-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 2: Displaying server-side content in a Zendesk app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-3-access-external-apis"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-3-access-external-apis/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 3: Accessing external APIs</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-4-access-framework-apis"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-4-access-framework-apis/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 4: Accessing framework APIs</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-5-secure-the-app"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-5-secure-the-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 5: Securing the app</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-server-side-app-part-6-deploy-the-app"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-server-side-app/part-6-deploy-the-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a server-side app - Part 6: Deploying the app</a></li></ul></div></section></div></div></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-how-a-custom-objects-app-is-built-for-sell"><a tabindex="0" href="/documentation/apps/build-an-app/how-a-custom-objects-app-is-built-for-sell/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">How a custom objects app is built for Sell</a></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":R1qiml5:--trigger:0" role="button" tabindex="0" aria-controls=":R1qiml5:--panel:0" aria-expanded="false" type="button" class="StyledButton-sc-xj3hy7-0 MtdzK sidebarLinkList__CollapsibleSubsectionTitle-sc-1nf7cca-4 goMuhH" data-garden-id="accordions.button" data-garden-version="8.76.4">Building a Sell app using OAuth 2.0</button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" theme="[object Object]" data-garden-id="accordions.rotate_icon" data-garden-version="8.76.4" class="StyledRotateIcon-sc-hp435q-0 chjQnf"><path fill="currentColor" d="M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"></path></svg></div><section inert="" id=":R1qiml5:--panel:0" aria-hidden="true" aria-labelledby=":R1qiml5:--trigger:0" class="StyledPanel-sc-1piryze-0 bbgJYJ sidebarLinkList__StyledAccordionPanel-sc-1nf7cca-5 eqBtfC" data-garden-id="accordions.panel" data-garden-version="8.76.4"><div data-garden-id="accordions.step_inner_panel" data-garden-version="8.76.4" class="StyledInnerPanel-sc-8nbueg-0 gxjxDP"><ul><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-1-laying-the-groundwork"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-1-laying-the-groundwork/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 1: Laying the groundwork</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-2-installing-the-app-in-zendesk-sell"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-2-installing-the-app-in-zendesk-sell/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 2: Installing the app in Zendesk Sell</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-3-setting-up-oauth-2-0"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-3-setting-up-oauth-2-0/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 3: Setting up OAuth 2.0</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-4-creating-audiences-in-mailchimp"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-4-creating-audiences-in-mailchimp/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 4: Creating audiences in Mailchimp</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-building-a-sell-app-using-oauth-2-0-building-a-sell-app-using-oauth-2-0-part-5-getting-data-from-the-mailchimp-api"><a tabindex="-1" href="/documentation/apps/build-an-app/building-a-sell-app-using-oauth-2-0/building-a-sell-app-using-oauth-2-0-part-5-getting-data-from-the-mailchimp-api/" class="sidebarLink__LinkElement-sc-z1bjm7-0 hkNUaw">Building a Sell app using OAuth 2.0 - Part 5: Getting data from the Mailchimp API</a></li></ul></div></section></div></div></li><li data-testid="dev-docs-sidebar-link-documentation-apps-build-an-app-create-a-cicd-pipeline-for-a-zendesk-app"><a tabindex="0" href="/documentation/apps/build-an-app/create-a-cicd-pipeline-for-a-zendesk-app/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Create a CI/CD pipeline for a Zendesk app</a></li></ul></li><li><ul class="sidebarLinkList__SectionList-sc-1nf7cca-6 hrxShG"><li><h3 id="documentation-apps-app-design-guidelines" class="sidebarLinkList__SubsectionTitle-sc-1nf7cca-1 dpBvEZ">Designing Your App</h3></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-design-guidelines-ui-design-fundamentals"><a tabindex="0" href="/documentation/apps/app-design-guidelines/ui-design-fundamentals/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">UI Fundamentals</a></li><li data-testid="dev-docs-sidebar-link-documentation-apps-app-design-guidelines-using-zendesk-garden"><a tabindex="0" href="/documentation/apps/app-design-guidelines/using-zendesk-garden/" class="sidebarLink__LinkElement-sc-z1bjm7-0 gzxlnG">Designing with Zendesk Garden</a></li><li><div class="StyledAccordion-sc-niv9ic-0 dgZvap sidebarLinkList__StyledAccordion-sc-1nf7cca-2 entKmz" data-garden-id="accordions.accordion" data-garden-version="8.76.4"><div data-garden-id="accordions.section" data-garden-version="8.76.4" class="StyledSection-sc-v2t9bd-0 bFpvu"><div role="heading" aria-level="4" data-garden-container-id="containers.accordion" data-garden-container-version="3.0.9" class="StyledHeader-sc-2c6rbr-0 SqGSf sidebarLinkList__StyledAccordionHeader-sc-1nf7cca-3 uCfzH" data-garden-id="accordions.header" data-garden-version="8.76.4"><button id=":Remml5:--trigger:0" role="button" tabindex="0" aria-controls=":Remml5:--panel:0" aria-expanded="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="Adding a templating engine" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/#adding-a-templating-engine">Adding a templating engine</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Creating a template to display organization information" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/#creating-a-template-to-display-organization-information">Creating a template to display organization information</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Inserting the template in your app" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/#inserting-the-template-in-your-app">Inserting the template in your app</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Creating a template for error messages" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/#creating-a-template-for-error-messages">Creating a template for error messages</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 your first Sell app - Part 3: Creating and inserting templates</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="Adding a templating engine" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/#adding-a-templating-engine">Adding a templating engine</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Creating a template to display organization information" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/#creating-a-template-to-display-organization-information">Creating a template to display organization information</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Inserting the template in your app" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/#inserting-the-template-in-your-app">Inserting the template in your app</a></li><li class="tableOfContents__TOCListItem-sc-nfi473-1 fIzhkw"><a data-text="Creating a template for error messages" href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/#creating-a-template-for-error-messages">Creating a template for error messages</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*/ .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*/ .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*/ data-styled.g116[id="StyledFont-sc-1iildbo-0"]{content:"kXVLDw,bRzZjY,oQNqW,"}/*!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">This tutorial is part of a series on building a Zendesk Sell 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/build-your-first-sell-app/building-your-first-sell-app-part-1-laying-the-groundwork/">Part 1: Laying the groundwork</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/build-your-first-sell-app/building-your-first-sell-app-part-2-designing-the-user-interface/">Part 2: Designing the user interface</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 3 - Creating and inserting templates - 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/build-your-first-sell-app/building-your-first-sell-app-part-4-getting-data/">Part 4: Getting data</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/build-your-first-sell-app/building-your-first-sell-app-part-5-installing-the-app-in-zendesk-sell/">Part 5: Installing the app in Zendesk Sell</a></li> </ul> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In the previous tutorials, you created starter files for an app named Related Leads and modified the HTML file that's iframed into Zendesk Sell. Aside from the footer, the app so far only displays placeholder values. In this tutorial, you'll create templates to display data in the app's user interface (UI).</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Templates are typically the building blocks of an app's user interface. They define different states, or views, for an application. For example, one template can contain an HTML form for entering search terms, and another template can dynamically list the search results.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">This tutorial covers the following tasks:</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"><a href="#adding-a-templating-engine">Adding a templating engine</a></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"><a href="#creating-a-template-to-display-organization-information">Creating a template to display organization information</a></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"><a href="#inserting-the-template-in-your-app">Inserting the template in your app</a></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"><a href="#creating-a-template-for-error-messages">Creating a template for error messages</a></li> </ol> <h2 id="adding-a-templating-engine" style="position:relative"><a href="#adding-a-templating-engine" aria-label="adding a templating engine 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>Adding a templating engine</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">You can use any templating engine and whatever version you like with your apps. This app uses <a href="http://handlebarsjs.com/">Handlebars.js</a>.</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">Import the Handlebars library into your app by inserting the following <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><script></code> tag in <strong>iframe.html</strong> <em>before</em> the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><script></code> tag that references your <strong>main.js</strong> file:</li> </ul> <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 tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">script</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">src</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation attr-equals" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="244c454a4048414645565764100a130a13">[email protected]</a>/dist/handlebars.min.js</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">script</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span></code></pre></div></pre> <h2 id="creating-a-template-to-display-organization-information" style="position:relative"><a href="#creating-a-template-to-display-organization-information" aria-label="creating a template to display organization information 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 template to display organization information</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Based on the design requirements in <a href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-1-laying-the-groundwork/">Planning the app</a>, the app requires a template to display the following data:</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">The organization's 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">A list of new leads for the organization</li> </ul> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In Handlebars, you can define templates by including them in <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><script></code> tags.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu"><strong>To create the template</strong></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>iframe.html</strong>, add the following organization template <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><script></code> tag before the other <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><script></code> tags:</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 tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">script</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">id</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation attr-equals" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">org-template</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">type</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation attr-equals" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">text/x-handlebars-template</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain-text" 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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> <h2>New leads for {{orgName}}</h2></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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> <ul></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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> {{#each leads}}</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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> <li><a href="{{url}}" target="_blank">{{name}}</a></li></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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> {{/each}}</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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </ul></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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">script</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag 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">This template contains several <a href="http://handlebarsjs.com/">Handlebars</a> expressions. A Handlebars expression typically consists of a variable inside double curly braces. For example: <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">{{name}}</code>. When it runs, the app will replace these expressions with values from a Javascript data object. For the organization template, this object should contain:</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">The organization's name (<code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">{{orgName}}</code>)</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">An array of new leads (<code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">{{leads}}</code>) for the organization. Each item in the array is an object. Each object in the array should contain: <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">The URL of the <strong>Lead</strong> page for the lead (<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>)</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">The lead's full name (<code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">{{name}}</code>)</li> </ul> </li> </ul> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The template also uses an <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">{{#each}}</code> helper to add a list item for each lead in the leads array.</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">Enclose the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><h2></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"><ul></code> tags with <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">{{#if}}...{{else}}</code> helpers (highlighted):</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-handlebars" 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 tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">script</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">id</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation attr-equals" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">org-template</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">type</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation attr-equals" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">text/x-handlebars-template</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars block keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">#if</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars variable" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">leads</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">h2</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript maybe-class-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">New</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> leads </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript keyword control-flow" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">for</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars variable" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">orgName</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">/</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">h2</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">ul</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars block keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">#each</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars variable" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">leads</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">li</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">a href</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript string" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript string handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript string handlebars language-handlebars variable" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">url</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript string handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript string" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> target</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript string" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"_blank"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars variable" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">name</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">/</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">a</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">/</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">li</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars block keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">/each</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">/</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">ul</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars variable" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">else</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">h2</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript maybe-class-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">No</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">new</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript class-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">leads</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> found </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript keyword control-flow" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">for</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars variable" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">orgName</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">.</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">/</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">h2</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript operator" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars block keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">/if</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript handlebars language-handlebars delimiter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">}}</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token script language-javascript" 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 script language-javascript" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">script</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag 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">If an organization doesn't have any new leads, the list in the UI will be blank. To create a better user experience, the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">{{#if}}...{{else}}</code> helpers hide the list and display an alternative heading if there are no new leads for the organization.</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>iframe.html</strong>.</p> </li> </ol> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">If you refresh the app, it doesn't change. You haven't inserted the template in the HTML yet. The next step is to insert the template and confirm that it works.</p> <h2 id="inserting-the-template-in-your-app" style="position:relative"><a href="#inserting-the-template-in-your-app" aria-label="inserting the template in your 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>Inserting the template in your app</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">You insert templates into an element of your choice in the document. You add a <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><div></code> tag in your HTML file for inserting templates at runtime. Only one template at a time can be inserted, but you can switch to a different template. For example, you can start by displaying the splash page and then switch to another page after the user clicks a button.</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>iframe.html</strong>, delete the following tags:</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 tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">h2</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">New leads for the organization</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">h2</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag 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 tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">ul</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain-text" 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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">li</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><a href="" target="_blank">Lead one</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">a</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">li</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain-text" 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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">li</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><a href="" target="_blank">Lead two</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">a</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">li</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain-text" 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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">ul</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></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">Replace the deleted tags 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-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 tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">div</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">id</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation attr-equals" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">content</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">div</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></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 <strong>main.js</strong>, add the following <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">displayLeads()</code> function call (highlighted) to the self-invoking function:</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-javascript" 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 punctuation" 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">function</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 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><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 keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">const</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> client </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 maybe-class-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">ZAFClient</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 method function property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">init</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 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"> client</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 method function property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">invoke</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">"resize"</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><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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token literal-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">width</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">"100%"</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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token literal-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">height</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">"150px"</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 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 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 function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">displayLeads</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 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 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 punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">;</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">Add the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">displayLeads()</code> function definition after the self-invoking function:</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-javascript" 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 keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">function</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 function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">displayLeads</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><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 keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">const</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> orgData </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 literal-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">orgName</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">"XYZ Widget Co."</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 literal-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">leads</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 punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">{</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token string-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"name"</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">"Alice Aragorn"</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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token string-property 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">"https://app.futuresimple.com/leads/2104416001"</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 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 string-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"name"</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">"Bob Baggins"</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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token string-property 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">"https://app.futuresimple.com/leads/2104416001"</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 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><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">renderTemplate</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">"org-template"</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"> orgData</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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token string" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"content"</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><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">In the first part of the function, the <strong>orgData</strong> object defines hard-coded values to pass to the Handlebars template. You'll later replace these values with live data from an API.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">The second part contains a call 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">renderTemplate()</code> function. This function passes data to the template and renders the template as HTML. It requires three arguments:</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">The ID of the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><script></code> tag <strong>iframe.html</strong> that contains the template (<code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">"org-template"</code>)</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">The data object to pass to the template (<code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">orgData</code>)</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">The ID of the tag in <strong>iframe.html</strong> that'll contain the rendered HTML (<code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">"content"</code>)</li> </ul> </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">Add the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">renderTemplate()</code> function definition directly after the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">displayLeads()</code> function definition:</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-javascript" 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 keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">function</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 function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">renderTemplate</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 parameter" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">templateId</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token parameter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">,</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token parameter" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> dataObject</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token parameter punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">,</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token parameter" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> divId</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><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 keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">const</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> source </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 dom variable" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">document</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 method function property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">getElementById</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">templateId</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 property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">innerHTML</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 keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">const</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> template </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 maybe-class-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">Handlebars</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 method function property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">compile</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">source</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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">const</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> compiledHtml </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 function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">template</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">dataObject</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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token dom variable" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">document</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 method function property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">getElementById</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">divId</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 property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">innerHTML</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 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"> compiledHtml</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></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">Save <strong>iframe.html</strong> and <strong>main.js</strong>. To review your changes, click the refresh icon.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">If your ZCLI server is not already running, see <a href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-2-designing-the-user-interface/#testing-the-app">Testing the app</a> in part 2 of this series.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Handlebars sets the HTML content of the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><div id="content"></code> tag in the <strong>iframe.html</strong> file:</p> <img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/related_leads_app_template.png" alt="" width="400"/> </li> </ol> <h2 id="creating-a-template-for-error-messages" style="position:relative"><a href="#creating-a-template-for-error-messages" aria-label="creating a template for error messages 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 template for error messages</h2> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">If the app encounters a problem retrieving an organization's leads or other data, you want the user to see an error message about what went wrong.</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>iframe.html</strong>, add the following error template after your <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">org-template</code> script tag:</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 tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"><</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">script</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">id</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation attr-equals" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">error-template</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> </span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">type</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation attr-equals" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">=</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">text/x-handlebars-template</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag attr-value punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain-text" 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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> <p>{{status}} - {{statusText}} error. Please report a bug at the link below.</p></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-text" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"></</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">script</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token tag 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 template will display an HTTP status error message, such as "404 - Not found error".</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 <strong>main.js</strong>, add the following function to render the template:</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-javascript" 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 keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">function</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 function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">displayError</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><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 keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">const</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> errorData </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 string-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">'status'</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 number" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">404</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 string-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">'statusText'</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">'Not found'</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><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">renderTemplate</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">"error-template"</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"> errorData</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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token string" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">"content"</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><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> </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">Call the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">displayError()</code> function (highlighted) from your self-invoking function:</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-javascript" 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 punctuation" 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">function</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 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><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 keyword" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">const</span><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token plain" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4"> client </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 maybe-class-name" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">ZAFClient</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 method function property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">init</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 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"> client</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 method function property-access" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">invoke</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">"resize"</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><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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token literal-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">width</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">"100%"</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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token literal-property property" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">height</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">"150px"</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 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><span class="StyledCodeBlockToken-sc-1hkshdq-0 zghgj token function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">displayLeads</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 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 function" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">displayError</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 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 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 punctuation" data-garden-id="typography.codeblock_token" data-garden-version="8.76.4">;</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">To test it, comment out <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE">displayLeads();</code> with double forward-slashes, save <strong>main.js</strong> and <strong>iframe.html</strong>, and then refresh the app.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">Similar to the organization template, Handlebars inserts the values of your <strong>errorData</strong> object into the error template and generates the final HTML. The app then sets as the HTML content of the <code data-garden-id="typography.code" data-garden-version="8.76.4" class="StyledFont-sc-1iildbo-0 StyledCode-sc-l8yvmf-0 bRzZjY cPdjYE"><div id="content"></code> tag in <strong>iframe.html</strong>.</p> <img src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/related_leads_app_error_template.png" width="400"/> </li> </ol> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">If you're moving to the next tutorial, you can leave the ZCLI server running. If you're done for this session, you can shut down the server by switching to your command-line interface and pressing Ctrl+C.</p> <p data-garden-id="typography.paragraph" data-garden-version="8.76.4" class="StyledParagraph-sc-zkuftz-0 fPpIbu">In the next tutorial, you'll learn how to get an organization's data using the Sell APIs. Continue to <a href="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-4-getting-data/">Part 4 - Getting data</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 data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/documentation/apps/build-an-app/build-your-first-sell-app/building-your-first-sell-app-part-3-creating-and-inserting-templates/";/*]]>*/</script> <script id="gatsby-chunk-mapping" > window.___chunkMapping="{\"app\":[\"/app-fc963563d8488938dabb.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="b936c719e8e06b5ce372";</script><script src="/webpack-runtime-073552febaaa89f76f7d.js" async></script><script src="/framework-d7d4501dd622ab1f8e40.js" async></script><script src="/app-fc963563d8488938dabb.js" async></script></body></html>