CINXE.COM

<!DOCTYPE html><html lang="en" dir="ltr" data-has-toc data-has-sidebar data-theme="dark" class="astro-qtabznui"> <head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Installation flow | 2.11.0</title><link rel="canonical" href="https://www.netlify.com/sdk/get-started/installation-flow/"/><link rel="sitemap" href="/sitemap-index.xml"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Roboto+Mono:400"/><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-NMKKF2M');</script><link rel="sitemap" href="/sitemap-index.xml"/><link rel="shortcut icon" href="/sdk/favicon.svg" type="image/svg+xml"/><meta name="generator" content="Astro v4.15.7"/><meta name="generator" content="Starlight v0.28.1"/><meta property="og:title" content="Installation flow"/><meta property="og:type" content="article"/><meta property="og:url" content="https://www.netlify.com/sdk/get-started/installation-flow/"/><meta property="og:locale" content="en"/><meta property="og:description" content="Learn about the installation flow, permission scopes, and how to add custom logic to interact with other APIs when a user installs or uninstalls your extension."/><meta property="og:site_name" content="2.11.0"/><meta name="twitter:card" content="summary_large_image"/><meta name="description" content="Learn about the installation flow, permission scopes, and how to add custom logic to interact with other APIs when a user installs or uninstalls your extension."/><meta property="og:image" content="https://www.netlify.com/sdk/sdk-og.png"/><meta name="twitter:image" content="https://www.netlify.com/sdk/sdk-og.png"/><meta name="slack-app-id" content="A05P27DR8C8"/><script> window.StarlightThemeProvider = (() => { const storedTheme = typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme'); const theme = storedTheme || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark'; return { updatePickers(theme = storedTheme || 'auto') { document.querySelectorAll('starlight-theme-select').forEach((picker) => { const select = picker.querySelector('select'); if (select) select.value = theme; /** @type {HTMLTemplateElement | null} */ const tmpl = document.querySelector(`#theme-icons`); const newIcon = tmpl && tmpl.content.querySelector('.' + theme); if (newIcon) { const oldIcon = picker.querySelector('svg.label-icon'); if (oldIcon) { oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes); } } }); }, }; })(); </script><template id="theme-icons"><svg aria-hidden="true" class="light astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Zm.64 5-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 1.41 0l.71-.71A1 1 0 0 0 5.64 17ZM12 5a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1Zm5.66 2.34a1 1 0 0 0 .7-.29l.71-.71a1 1 0 1 0-1.41-1.41l-.66.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.29Zm-12-.29a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.71-.71a1.004 1.004 0 1 0-1.43 1.41l.73.71ZM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Zm-2.64 6A1 1 0 0 0 17 18.36l.71.71a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.76-.66ZM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0 3.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1Z"/></svg> <svg aria-hidden="true" class="dark astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.64 13a1 1 0 0 0-1.05-.14 8.049 8.049 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 10.14 10.14 9.784 9.784 0 0 0 2.1-.22 8.11 8.11 0 0 1-7.18 4.32v-.04Z"/></svg> <svg aria-hidden="true" class="auto astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg> </template><link rel="stylesheet" href="/_astro/index.C6Sq_s6n.css"> <style>:root{--sl-badge-default-border: var(--sl-color-accent);--sl-badge-default-bg: var(--sl-color-accent-low);--sl-badge-default-text: #fff;--sl-badge-note-border: var(--sl-color-blue);--sl-badge-note-bg: var(--sl-color-blue-low);--sl-badge-note-text: #fff;--sl-badge-danger-border: var(--sl-color-red);--sl-badge-danger-bg: var(--sl-color-red-low);--sl-badge-danger-text: #fff;--sl-badge-success-border: var(--sl-color-green);--sl-badge-success-bg: var(--sl-color-green-low);--sl-badge-success-text: #fff;--sl-badge-caution-border: var(--sl-color-orange);--sl-badge-caution-bg: var(--sl-color-orange-low);--sl-badge-caution-text: #fff;--sl-badge-tip-border: var(--sl-color-purple);--sl-badge-tip-bg: var(--sl-color-purple-low);--sl-badge-tip-text: #fff}[data-theme=light]:root{--sl-badge-default-bg: var(--sl-color-accent-high);--sl-badge-note-bg: var(--sl-color-blue-high);--sl-badge-danger-bg: var(--sl-color-red-high);--sl-badge-success-bg: var(--sl-color-green-high);--sl-badge-caution-bg: var(--sl-color-orange-high);--sl-badge-tip-bg: var(--sl-color-purple-high)}.sl-badge:where(.astro-uhv2njfm){display:inline-block;border:1px solid var(--sl-color-border-badge);border-radius:.25rem;font-family:var(--sl-font-system-mono);line-height:normal;color:var(--sl-color-text-badge);background-color:var(--sl-color-bg-badge);overflow-wrap:anywhere}.sidebar-content .sl-badge:where(.astro-uhv2njfm){line-height:1;font-size:var(--sl-text-xs);padding:.125rem .375rem}.sidebar-content a[aria-current=page]>.sl-badge:where(.astro-uhv2njfm){--sl-color-bg-badge: transparent;--sl-color-border-badge: currentColor;color:inherit}.default:where(.astro-uhv2njfm){--sl-color-bg-badge: var(--sl-badge-default-bg);--sl-color-border-badge: var(--sl-badge-default-border);--sl-color-text-badge: var(--sl-badge-default-text)}.note:where(.astro-uhv2njfm){--sl-color-bg-badge: var(--sl-badge-note-bg);--sl-color-border-badge: var(--sl-badge-note-border);--sl-color-text-badge: var(--sl-badge-note-text)}.danger:where(.astro-uhv2njfm){--sl-color-bg-badge: var(--sl-badge-danger-bg);--sl-color-border-badge: var(--sl-badge-danger-border);--sl-color-text-badge: var(--sl-badge-danger-text)}.success:where(.astro-uhv2njfm){--sl-color-bg-badge: var(--sl-badge-success-bg);--sl-color-border-badge: var(--sl-badge-success-border);--sl-color-text-badge: var(--sl-badge-success-text)}.tip:where(.astro-uhv2njfm){--sl-color-bg-badge: var(--sl-badge-tip-bg);--sl-color-border-badge: var(--sl-badge-tip-border);--sl-color-text-badge: var(--sl-badge-tip-text)}.caution:where(.astro-uhv2njfm){--sl-color-bg-badge: var(--sl-badge-caution-bg);--sl-color-border-badge: var(--sl-badge-caution-border);--sl-color-text-badge: var(--sl-badge-caution-text)}.small:where(.astro-uhv2njfm){font-size:var(--sl-text-xs);padding:.125rem .25rem}.medium:where(.astro-uhv2njfm){font-size:var(--sl-text-sm);padding:.175rem .35rem}.large:where(.astro-uhv2njfm){font-size:var(--sl-text-base);padding:.225rem .45rem}.sl-markdown-content :is(h1,h2,h3,h4,h5,h6) .sl-badge:where(.astro-uhv2njfm){vertical-align:middle} svg:where(.astro-bg6azcwr){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em} starlight-tabs:where(.astro-ui5sftem){display:block}.tablist-wrapper:where(.astro-ui5sftem){overflow-x:auto}:where(.astro-ui5sftem)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-ui5sftem){margin-bottom:-2px}.tab:where(.astro-ui5sftem)>:where(.astro-ui5sftem)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-ui5sftem) :where(.astro-ui5sftem)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-ui5sftem)~[role=tabpanel]{margin-top:1rem} .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}} .sl-link-button:where(.astro-dbfafs4m){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-dbfafs4m).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-dbfafs4m).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-dbfafs4m).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-dbfafs4m).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-dbfafs4m) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-dbfafs4m){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-dbfafs4m){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-dbfafs4m):not(:where(p *)){margin-block:1rem} </style><script type="module" src="/_astro/hoisted.C4op7Ona.js"></script> <script type="module" src="/_astro/page.7qqag-5g.js"></script><style>div:where(.astro-fr5qezfu){border:1px solid var(--colorGrayLight);color:var(--colorTextMutedInverse);border-radius:var(--bigRadius);box-shadow:0 2px 4px #0e1e251f;padding:.4rem .6rem;margin-top:.8rem;width:-moz-fit-content;width:fit-content;[data-theme=dark] &{border-color:var(--colorGray)}}:root div:where(.astro-fr5qezfu){font-size:var(--defaultText)}:root .beta-badge:where(.astro-fr5qezfu){color:var(--colorWarningText);background-color:var(--colorWarningLight);padding-left:6px;padding-right:6px;border-radius:40px;text-decoration:none;font-weight:var(--bold);[data-theme=dark] &{color:var(--facetsGold200)}}:root .beta-badge:where(.astro-fr5qezfu):hover{color:var(--colorWarning);text-decoration:underline} </style><style>div:where(.astro-taqzzmlm){border:1px solid var(--colorGrayLight);border-radius:var(--bigRadius);box-shadow:0 2px 4px #0e1e251f;padding:.4rem .6rem;margin-top:.8rem;width:-moz-fit-content;width:fit-content}:root div:where(.astro-taqzzmlm){font-size:var(--defaultText)}:root .beta-badge:where(.astro-taqzzmlm){color:var(--colorWarningText);background-color:var(--colorWarningLight);padding-left:6px;padding-right:6px;border-radius:40px;text-decoration:none;font-weight:var(--bold)}:root .beta-badge:where(.astro-taqzzmlm):hover{color:var(--colorWarning);text-decoration:underline} </style><style>:root[data-theme=dark] #svg-downvote circle{fill:var(--facetsRed900)}:root[data-theme=dark] #svg-downvote circle:hover{fill:var(--facetsRed800)}:root[data-theme=dark] #svg-downvote path{color:var(--facetsRed400)}:root[data-theme=dark] #downvote:checked+label #svg-downvote circle{fill:var(--facetsRed800)}#svg-downvote path{color:#6b2120}#svg-downvote circle{fill:var(--facetsRed000)}#svg-downvote circle:hover{fill:var(--facetsRed100)}#downvote:checked+label #svg-downvote circle{fill:var(--facetsRed400)} </style><style>#none:where(.astro-77rygnu7){display:none}#upvote:where(.astro-77rygnu7),#downvote:where(.astro-77rygnu7){height:0;opacity:0;position:absolute;width:0}#upvote:where(.astro-77rygnu7),#downvote:where(.astro-77rygnu7)+svg:where(.astro-77rygnu7){cursor:pointer}.vote-button:where(.astro-77rygnu7){align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:100%;justify-content:center;margin:10px;padding:0;width:100%}form:where(.astro-77rygnu7)[name=feedback] .votes:where(.astro-77rygnu7){display:flex;margin-top:0}.feedback:where(.astro-77rygnu7){align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}textarea:where(.astro-77rygnu7){background-color:var(--colorBg);border:1px solid var(--colorBorder);border-radius:var(--bigRadius);margin:1.25rem 0;min-height:130px;padding:.5rem 1rem;transition:box-shadow ease-in-out var(--transitionDuration);width:100%}textarea:where(.astro-77rygnu7):focus{box-shadow:0 0 0 2px var(--colorTeal),0 0 1px 0 var(--colorGrayDarkest);outline:2px solid transparent}form:where(.astro-77rygnu7)[name=feedback] .form-submit:where(.astro-77rygnu7){background-color:var(--colorButtonSecondary);border:none;border-radius:var(--smallRadius);color:var(--colorButtonSecondaryText);cursor:pointer;font-family:var(--fontFamilyHeading);font-size:var(--defaultText);font-weight:600;line-height:1;margin:0;min-width:20%;padding:.75rem 1.5rem;transition:all var(--transitionDurationShort)}form:where(.astro-77rygnu7)[name=feedback] .form-submit:where(.astro-77rygnu7):hover{background-color:var(--colorButtonSecondaryHover)}form:where(.astro-77rygnu7)[name=feedback] .form-submit:where(.astro-77rygnu7):disabled{background-color:var(--colorButtonTertiary);color:var(--colorTextNeutral);cursor:not-allowed}form:where(.astro-77rygnu7)[name=feedback],.success-message:where(.astro-77rygnu7){border-top:1px solid var(--sl-color-hairline);margin-top:3rem;padding:1.5rem 0}form:where(.astro-77rygnu7)[name=feedback] .feedback:where(.astro-77rygnu7) h4:where(.astro-77rygnu7),.success-message:where(.astro-77rygnu7) h4:where(.astro-77rygnu7){font-family:var(--sl-font-system);font-size:1.25rem;font-weight:600;margin:1em 0}form:where(.astro-77rygnu7)[name=feedback] .feedback:where(.astro-77rygnu7) p:where(.astro-77rygnu7),.success-message:where(.astro-77rygnu7) p:where(.astro-77rygnu7){margin:0 0 .75rem}.hidden:where(.astro-77rygnu7){visibility:hidden}.success-message:where(.astro-77rygnu7){display:none} </style><style>footer:where(.astro-sz7xmlte){border-top:1px solid var(--sl-color-hairline);padding:1rem 0}.footer_nav:where(.astro-sz7xmlte){list-style-type:none;display:flex;padding-inline-start:0;justify-content:center}.footer_nav:where(.astro-sz7xmlte) li:where(.astro-sz7xmlte){margin:.25rem 1rem 1rem 0;font-size:15px}.footer_nav:where(.astro-sz7xmlte) li:where(.astro-sz7xmlte) a:where(.astro-sz7xmlte){color:var(--sl-color-text);text-decoration:none}.footer_copyright:where(.astro-sz7xmlte){font-size:15px;text-align:center} </style><style>.netlify-panel:where(.astro-vweeohgf){line-height:1.15;border-left-style:solid;border-left-width:var(--micro);margin:var(--tiny) 0;padding:var(--tiny) var(--small) var(--micro);border-radius:8px;&.warning{background-color:var(--colorWarningLight);border-color:var(--colorWarning);.title,.panel-content,#question-icon{color:var(--colorWarningText)}& p a{color:var(--colorWarningText)}}&.note{background-color:var(--colorNoteLight);border-color:var(--colorNote);.title,.panel-content,#question-icon{color:var(--colorNoteText)}& p a{color:var(--colorNoteText)}}&.tip{background-color:var(--colorTipLight);border-color:var(--colorTip);.title,.panel-content,#question-icon{color:var(--colorTipText)}& p a{color:var(--colorTipText)}}&.danger{background-color:var(--colorDangerLight);border-color:var(--colorDanger);.title,.panel-content,#question-icon{color:var(--colorDangerText)}& p a{color:var(--colorDangerText)}}}.title:where(.astro-vweeohgf){display:flex;font-weight:var(--semibold);font-size:var(--defaultText)}.panel-content:where(.astro-vweeohgf){line-height:1.67;margin-top:var(--micro);margin-bottom:var(--micro);word-wrap:break-word;font-size:var(--smallText)}#icon:where(.astro-vweeohgf){margin-right:.5rem;height:1.3rem;width:1.3rem} </style><style>:root[data-theme=dark] #svg-upvote circle{fill:var(--facetsTeal900)}:root[data-theme=dark] #svg-upvote path{color:var(--facetsTeal200)}:root[data-theme=dark] #svg-upvote circle:hover{fill:var(--facetsTeal700)}:root[data-theme=dark] #upvote:checked+label #svg-upvote circle{fill:var(--facetsTeal700)}#svg-upvote path{color:#145f69}#svg-upvote circle{fill:var(--facetsTeal000)}#svg-upvote circle:hover{fill:var(--facetsTeal100)}#upvote:checked+label #svg-upvote circle{fill:var(--facetsTeal400)} </style><script src="/_astro/FeedbackForm.astro_astro_type_script_index_0_lang.CxPg6FTE.js" type="module"></script><script src="/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-qtabznui"> <a href="#_top" class="astro-vf5goutt">Skip to content</a> <div class="page sl-flex astro-37rnjknv"> <header class="header astro-37rnjknv"><div class="header sl-flex astro-azkpog7b"> <div class="title-wrapper sl-flex astro-azkpog7b"> <a href="/" class="site-title sl-flex astro-ldl3wdfq"> <img class="light:sl-hidden astro-ldl3wdfq" alt="Netlify SDK Docs" src="/_astro/logo-dark.CGIhDU-N.svg" width="133" height="40"> <img class="dark:sl-hidden astro-ldl3wdfq" alt="Netlify SDK Docs" src="/_astro/logo-light.Dzqm5Mvw.svg" width="133" height="40"> <span class="astro-ldl3wdfq"> 2.11.0 </span> </a> </div> <div class="sl-flex astro-azkpog7b"> <site-search data-translations="{"placeholder":"Search"}" class="astro-otpdt6jm"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-otpdt6jm"> <svg aria-hidden="true" class="astro-otpdt6jm astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg> <span class="sl-hidden md:sl-block astro-otpdt6jm" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-otpdt6jm" style="display: none;"> <kbd class="astro-otpdt6jm">Ctrl</kbd><kbd class="astro-otpdt6jm">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-otpdt6jm"> <div class="dialog-frame sl-flex astro-otpdt6jm"> <button data-close-modal class="sl-flex md:sl-hidden astro-otpdt6jm"> Cancel </button> <div class="search-container astro-otpdt6jm"> <div id="starlight__search" class="astro-otpdt6jm"></div> </div> </div> </dialog> </site-search> <script> (() => { const openBtn = document.querySelector("button[data-open-modal]"); const shortcut = openBtn?.querySelector("kbd"); if (!openBtn || !(shortcut instanceof HTMLElement)) return; const platformKey = shortcut.querySelector("kbd"); if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { platformKey.textContent = "⌘"; openBtn.setAttribute("aria-keyshortcuts", "Meta+K"); } shortcut.style.display = ""; })(); </script> </div> <div class="sl-hidden md:sl-flex right-group astro-azkpog7b"> <div class="sl-flex social-icons astro-azkpog7b"> <a href="https://developers.netlify.com/feed/tag/sdk" class="external-link astro-aycwkagb" target="_blank">Changelog</a> </div> <starlight-theme-select> <label style="--sl-select-width: 6.25em" class="astro-aw4jz2fr"> <span class="sr-only astro-aw4jz2fr">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-aw4jz2fr astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg> <select value="auto" class="astro-aw4jz2fr"> <option value="dark" class="astro-aw4jz2fr">Dark</option><option value="light" class="astro-aw4jz2fr">Light</option><option value="auto" selected="true" class="astro-aw4jz2fr">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-aw4jz2fr astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg> </label> </starlight-theme-select> <script> StarlightThemeProvider.updatePickers(); </script> </div> </div> </header> <nav class="sidebar astro-37rnjknv" aria-label="Main"> <starlight-menu-button class="astro-xncl7wcg"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-xncl7wcg"> <svg aria-hidden="true" class="astro-xncl7wcg astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg> </button> </starlight-menu-button> <div id="starlight__sidebar" class="sidebar-pane astro-37rnjknv"> <div class="sidebar-content sl-flex astro-37rnjknv"> <sl-sidebar-state-persist data-hash="0sbvn74" class="astro-hcjnkwvw"> <script> (() => { try { if (!matchMedia('(min-width: 50em)').matches) return; /** @type {HTMLElement | null} */ const target = document.querySelector('sl-sidebar-state-persist'); const state = JSON.parse(sessionStorage.getItem('sl-sidebar-state') || '0'); if (!target || !state || target.dataset.hash !== state.hash) return; window._starlightScrollRestore = state.scroll; customElements.define( 'sl-sidebar-restore', class SidebarRestore extends HTMLElement { connectedCallback() { try { const idx = parseInt(this.dataset.index || ''); const details = this.closest('details'); if (details && typeof state.open[idx] === 'boolean') details.open = state.open[idx]; } catch {} } } ); } catch {} })(); </script> <ul class="top-level astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="https://docs.netlify.com/" class="large external-link astro-lum4h4k6" target="_blank" class="external-link"> <span class="astro-lum4h4k6">Netlify user docs</span> </a> </li><li class="astro-lum4h4k6"> <details open class="astro-lum4h4k6"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Get started</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/get-started/introduction" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Introduction</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/get-started/create-a-new-extension" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Create a new extension</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/get-started/anatomy-of-an-extension" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Anatomy of an extension</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/get-started/installation-flow" aria-current="page" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Installation flow</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/get-started/environment-variables" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Environment variables</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/get-started/requirements-and-limitations" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Requirements & limitations</span> </a> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="10"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Migration guide</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/get-started/migration-guide/overview/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/get-started/migration-guide/migration-steps/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Step-by-step instructions</span> </a> </li> </ul> </details> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Connectors</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/connectors/overview/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/get-started/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Get started</span> </a> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="11"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Develop</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/overview/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/define-data-model/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Data model</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/sync-data/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Sync data</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/configuration-options/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Configuration options</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/check-permissions/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Check permissions</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/write-data/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Write data</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/manage-assets/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Manage assets</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/localization/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Localization</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/scheduled-publishing/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Scheduled publishing</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/develop/dynamic-connectors/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Dynamic connectors</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/build/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Build</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/connectors/debug-and-test/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Debug & test</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Build event handlers</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/build-event-handlers/overview/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/build-event-handlers/get-started/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Get started</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/build-event-handlers/hook-into-events/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Hook into build events</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/build-event-handlers/values-and-methods/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Values & methods</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/build-event-handlers/debug-and-test/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Debug & test</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/build-event-handlers/migrate-build-plugins/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Migrate Build Plugins</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Functions</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/functions/overview/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/functions/get-started/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Get started</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/functions/debug-and-test/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Debug & test</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Edge Functions</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/edge-functions/overview/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/edge-functions/get-started/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Get started</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/edge-functions/debug-and-test/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Debug & test</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="5"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Endpoints</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/endpoints/overview/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/endpoints/get-started/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Get started</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/endpoints/values-and-methods/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Values & methods</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/endpoints/debug-and-test/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Debug & test</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/endpoints/use-cases/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Use cases</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/endpoints/trpc/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">tRPC integration</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="6"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Extension UI</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/extension-ui/overview/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/extension-ui/get-started/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Get started</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/extension-ui/develop-locally/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Develop locally</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/extension-ui/add-a-new-surface/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Add a new surface</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/extension-ui/call-endpoints/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Call endpoints</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="7"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">OAuth</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/oauth/overview/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/oauth/get-started/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Get started</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/oauth/best-practices/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Best practices</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="8"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Publish and manage</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/publish/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/publish/publish-extensions/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Publish extensions</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/publish/manage-extensions/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Manage extensions</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/publish/partner-extensions/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Partner extensions</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/publish/deploy-to-netlify-button/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Deploy to Netlify button</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="9"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Reference docs</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/reference/overview" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <details open class="astro-lum4h4k6"> <sl-sidebar-restore data-index="12"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">SDK</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="14"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Classes</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="17"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">NetlifyConnector</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyconnector/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Overview</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyconnector/assets/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">assets</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyconnector/documents/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">documents</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyconnector/hasaccess/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">hasAccess</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyconnector/init/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">init</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyconnector/model/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">model</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyconnector/proxyschema/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">proxySchema</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyconnector/scheduledactions/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">scheduledActions</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyconnector/sync/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">sync</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyextension/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">NetlifyExtension</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/classes/netlifyextensionclient/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">NetlifyExtensionClient</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/interfaces" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Interfaces</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/reference/commands" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Commands</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details open class="astro-lum4h4k6"> <sl-sidebar-restore data-index="13"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">React</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="15"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">@netlify/sdk/react</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="18"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Enumerations</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/enumerations/surfaces/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Surfaces</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="19"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Functions</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/functions/usenetlifyextensionuifetch/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">useNetlifyExtensionUIFetch</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/functions/usenetlifysdk/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">useNetlifySDK</span> </a> </li> </ul> </details> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="16"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">@netlify/sdk/react/components</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="20"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Type Aliases</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/alertprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">AlertProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/buttongroupprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ButtonGroupProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/buttonprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ButtonProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/cardfooterprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">CardFooterProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/cardprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">CardProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/cardtitleprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">CardTitleProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/checkboxprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">CheckboxProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/clipboardbuttonprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ClipboardButtonProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/codeblockprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">CodeBlockProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/connectconfigurationsurfaceprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ConnectConfigurationSurfaceProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/decorativeiconprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">DecorativeIconProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/extensionsettingsprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ExtensionSettingsProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/linkprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">LinkProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/listloaderprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ListLoaderProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/netlifyextensionuiprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">NetlifyExtensionUIProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/selectprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SelectProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/settingscardprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SettingsCardProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/siteaccessconfigurationsurfaceprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteAccessConfigurationSurfaceProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/sitebuilddeployconfigurationsurfaceprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteBuildDeployConfigurationSurfaceProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/siteconfigurationsurfaceprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteConfigurationSurfaceProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/sitegeneralconfigurationsurfaceprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteGeneralConfigurationSurfaceProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/sitenotificationsconfigurationsurfaceprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteNotificationsConfigurationSurfaceProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/surfacerouteprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SurfaceRouteProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/surfacerouterprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SurfaceRouterProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/teamconfigurationsurfaceprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">TeamConfigurationSurfaceProps</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/type-aliases/visualeditorconfigurationsurfaceprops/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">VisualEditorConfigurationSurfaceProps</span> </a> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <details class="astro-lum4h4k6"> <sl-sidebar-restore data-index="21"></sl-sidebar-restore> <summary class="astro-lum4h4k6"> <div class="group-label astro-lum4h4k6"> <span class="large astro-lum4h4k6">Functions</span> </div> <svg aria-hidden="true" class="caret astro-lum4h4k6 astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-lum4h4k6"> <li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/alert/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Alert</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/button/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Button</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/buttongroup/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ButtonGroup</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/card/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Card</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/cardfooter/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">CardFooter</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/cardloader/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">CardLoader</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/cardtitle/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">CardTitle</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/checkbox/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Checkbox</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/clipboardbutton/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ClipboardButton</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/cn/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">cn</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/codeblock/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">CodeBlock</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/connectconfigurationsurface/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ConnectConfigurationSurface</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/decorativeicon/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">DecorativeIcon</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/extensionsettings/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ExtensionSettings</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/extensionsettingsheader/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ExtensionSettingsHeader</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/form/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Form</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/link/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Link</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/listloader/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ListLoader</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/providerauthcard/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">ProviderAuthCard</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/select/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">Select</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/siteaccessconfigurationsurface/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteAccessConfigurationSurface</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/sitebuilddeployconfigurationsurface/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteBuildDeployConfigurationSurface</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/siteconfigurationsurface/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteConfigurationSurface</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/sitegeneralconfigurationsurface/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteGeneralConfigurationSurface</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/sitenotificationsconfigurationsurface/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SiteNotificationsConfigurationSurface</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/surfaceroute/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SurfaceRoute</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/surfacerouter/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">SurfaceRouter</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/teamconfigurationsurface/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">TeamConfigurationSurface</span> </a> </li><li class="astro-lum4h4k6"> <a href="/sdk/api/netlify/sdk/react/components/functions/visualeditorconfigurationsurface/" class="astro-lum4h4k6"> <span class="astro-lum4h4k6">VisualEditorConfigurationSurface</span> </a> </li> </ul> </details> </li> </ul> </details> </li> </ul> </details> </li> </ul> </details> </li><li class="astro-lum4h4k6"> <a href="https://developers.netlify.com/feed/tag/sdk" class="large external-link margin-top astro-lum4h4k6" target="_blank" class="external-link margin-top"> <span class="astro-lum4h4k6">Changelog</span> </a> </li><li class="astro-lum4h4k6"> <a href="https://answers.netlify.com/" class="large text-sm external-link margin-top astro-lum4h4k6" target="_blank" class="text-sm external-link margin-top"> <span class="astro-lum4h4k6">Forums</span> </a> </li><li class="astro-lum4h4k6"> <a href="https://www.netlify.com/support/" class="large text-sm external-link astro-lum4h4k6" target="_blank" class="text-sm external-link"> <span class="astro-lum4h4k6">Contact support</span> </a> </li> </ul> <script> (() => { const scroller = document.getElementById('starlight__sidebar'); if (!window._starlightScrollRestore || !scroller) return; scroller.scrollTop = window._starlightScrollRestore; delete window._starlightScrollRestore; })(); </script> </sl-sidebar-state-persist> <div class="md:sl-hidden"> <div class="mobile-preferences sl-flex astro-tyavstbm"> <div class="sl-flex social-icons astro-tyavstbm"> <a href="https://developers.netlify.com/feed/tag/sdk" class="external-link astro-aycwkagb" target="_blank">Changelog</a> </div> <starlight-theme-select> <label style="--sl-select-width: 6.25em" class="astro-aw4jz2fr"> <span class="sr-only astro-aw4jz2fr">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-aw4jz2fr astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg> <select value="auto" class="astro-aw4jz2fr"> <option value="dark" class="astro-aw4jz2fr">Dark</option><option value="light" class="astro-aw4jz2fr">Light</option><option value="auto" selected="true" class="astro-aw4jz2fr">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-aw4jz2fr astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg> </label> </starlight-theme-select> <script> StarlightThemeProvider.updatePickers(); </script> </div> </div> </div> </div> </nav> <div class="main-frame astro-37rnjknv"> <div class="lg:sl-flex astro-hpgkqabp"> <aside class="right-sidebar-container astro-hpgkqabp"> <div class="right-sidebar astro-hpgkqabp"> <div class="lg:sl-hidden astro-tnnf5i73"><mobile-starlight-toc data-min-h="2" data-max-h="3" class="astro-gtjotjxs"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-gtjotjxs"><details id="starlight__mobile-toc" class="astro-gtjotjxs"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-gtjotjxs"><div class="toggle sl-flex astro-gtjotjxs">On this page<svg aria-hidden="true" class="caret astro-gtjotjxs astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </div><span class="display-current astro-gtjotjxs"></span></summary><div class="dropdown astro-gtjotjxs"><ul class="isMobile astro-qbq4w3iz" style="--depth: 0;"> <li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#_top" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">Overview</span> </a> </li><li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#how-users-install-extensions" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">How users install extensions</span> </a> <ul class="isMobile astro-qbq4w3iz" style="--depth: 1;"> <li class="astro-qbq4w3iz" style="--depth: 1;"> <a href="#configure-your-extension-for-oauth" class="astro-qbq4w3iz" style="--depth: 1;"> <span class="astro-qbq4w3iz" style="--depth: 1;">Configure your extension for OAuth</span> </a> </li> </ul> </li><li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#permission-scopes" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">Permission scopes</span> </a> <ul class="isMobile astro-qbq4w3iz" style="--depth: 1;"> <li class="astro-qbq4w3iz" style="--depth: 1;"> <a href="#set-permission-scopes" class="astro-qbq4w3iz" style="--depth: 1;"> <span class="astro-qbq4w3iz" style="--depth: 1;">Set permission scopes</span> </a> </li> </ul> </li><li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#test-your-extensions-installation-flow" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">Test your extension’s installation flow</span> </a> </li><li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#learn-more-about-how-users-find-and-install-extensions" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">Learn more about how users find and install extensions</span> </a> </li> </ul> </div></details></nav></mobile-starlight-toc></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-tnnf5i73"><div class="sl-container astro-tnnf5i73"><starlight-toc data-min-h="2" data-max-h="3"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-qbq4w3iz" style="--depth: 0;"> <li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#_top" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">Overview</span> </a> </li><li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#how-users-install-extensions" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">How users install extensions</span> </a> <ul class="astro-qbq4w3iz" style="--depth: 1;"> <li class="astro-qbq4w3iz" style="--depth: 1;"> <a href="#configure-your-extension-for-oauth" class="astro-qbq4w3iz" style="--depth: 1;"> <span class="astro-qbq4w3iz" style="--depth: 1;">Configure your extension for OAuth</span> </a> </li> </ul> </li><li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#permission-scopes" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">Permission scopes</span> </a> <ul class="astro-qbq4w3iz" style="--depth: 1;"> <li class="astro-qbq4w3iz" style="--depth: 1;"> <a href="#set-permission-scopes" class="astro-qbq4w3iz" style="--depth: 1;"> <span class="astro-qbq4w3iz" style="--depth: 1;">Set permission scopes</span> </a> </li> </ul> </li><li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#test-your-extensions-installation-flow" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">Test your extension’s installation flow</span> </a> </li><li class="astro-qbq4w3iz" style="--depth: 0;"> <a href="#learn-more-about-how-users-find-and-install-extensions" class="astro-qbq4w3iz" style="--depth: 0;"> <span class="astro-qbq4w3iz" style="--depth: 0;">Learn more about how users find and install extensions</span> </a> </li> </ul> </nav></starlight-toc></div></div> </div> </aside> <div class="main-pane astro-hpgkqabp"> <main data-pagefind-body lang="en" dir="ltr" class="astro-qtabznui"> <div class="content-panel astro-kdat752j"> <div class="sl-container astro-kdat752j"> <h1 id="_top" class="astro-uqg6c75q">Installation flow</h1> </div> </div> <div class="content-panel astro-kdat752j"> <div class="sl-container astro-kdat752j"> <div class="sl-markdown-content"> <p>When a user installs your extension on a team, they authorize the extension to perform Netlify actions on their behalf based on the <a href="#permission-scopes">permission scopes</a> you configure for your extension.</p> <p>This authentication allows the extension to call Netlify endpoints and is necessary for things such as running a build event handler on a site, installing a connector on a data layer, configuring environment variables, and interacting with any other Netlify API.</p> <div class="netlify-panel tip astro-vweeohgf"> <p class="title astro-vweeohgf"> <span id="icon" class="astro-vweeohgf"><svg width="1em" height="1em" viewBox="0 0 24 24" class="astro-vweeohgf" data-icon="uil:lightbulb-alt"> <symbol id="ai:uil:lightbulb-alt"><path fill="currentColor" d="M17.09 2.82a8 8 0 0 0-6.68-1.66a8 8 0 0 0-6.27 6.32a8.07 8.07 0 0 0 1.72 6.65A4.54 4.54 0 0 1 7 17v3a3 3 0 0 0 3 3h4a3 3 0 0 0 3-3v-2.81A5.17 5.17 0 0 1 18.22 14a8 8 0 0 0-1.13-11.2ZM15 20a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1h6Zm1.67-7.24A7.13 7.13 0 0 0 15 17h-2v-3a1 1 0 0 0-2 0v3H9a6.5 6.5 0 0 0-1.6-4.16a6 6 0 0 1 3.39-9.72A6 6 0 0 1 18 9a5.89 5.89 0 0 1-1.33 3.76"/></symbol><use xlink:href="#ai:uil:lightbulb-alt"></use> </svg></span>Extensions are installed on teams, not sites </p> <div class="panel-content astro-vweeohgf"> <p>Users install extensions on the team level and can then configure them for a specific site or data layer based on what your extension requires. If your extension includes a build event handler, function injection, or edge function injection, the extension is still installed on the team but it will run on all sites on that team. We recommend that you include conditional logic to check that the extension is configured before running <a href="/sdk/build-event-handlers/hook-into-events/#add-logic-to-only-run-on-configured-sites">build event handlers</a> and injecting <a href="/sdk/functions/get-started/#inject-functions">functions</a> or <a href="/sdk/edge-functions/get-started/#inject-edge-functions">edge functions</a>.</p> </div> </div> <h2 id="how-users-install-extensions">How users install extensions</h2> <p>When an extension is <a href="/sdk/publish/">published</a>, users can access the extension’s details page in the Netlify UI — through a direct link, in the section for extensions created by your team, or in the extensions directory if the extension is listed.</p> <p>On the details page, users select <strong>Install</strong> to install the extension on their team and authenticate it. After the user authenticates, the extension will have access to the configured <a href="#permission-scopes">permission scopes</a>.</p> <p>After the extension is installed, the user may need to configure some additional settings to use your extension. You can create the surfaces for these using <a href="/sdk/extension-ui/overview/">extension UI</a> and Netlify will render these surfaces in various places across the Netlify UI.</p> <p>Your extension UI can use <a href="/sdk/endpoints/overview/">endpoints</a> to make API calls to third-party APIs as needed during that configuration flow.</p> <h3 id="configure-your-extension-for-oauth">Configure your extension for OAuth</h3> <p>While this document covers the Netlify authentication that occurs when users install your extension, you also have the option to ask users to authenticate through an OAuth identity provider as part of your extension’s configuration step. This may be necessary if your extension must make authenticated requests to your APIs.</p> <p>Learn more about how to use <a href="/sdk/oauth/overview/">OAuth</a> with your extension.</p> <h2 id="permission-scopes">Permission scopes</h2> <p>As mentioned above, when a user installs and authenticates your extension in the Netlify UI, your extension will have access to certain resources based on the configured permission scopes. It‘s important to specify the correct permission scopes to support any logic you might want to perform.</p> <p>The following resources are available with read and write permission scopes:</p> <ul> <li><a href="https://open-api.netlify.com/#tag/site" class="external-link" rel="noopener noreferrer" target="_blank">Sites</a></li> <li><a href="https://open-api.netlify.com/#tag/user" class="external-link" rel="noopener noreferrer" target="_blank">Users</a></li> <li><a href="https://open-api.netlify.com/#tag/environmentVariables" class="external-link" rel="noopener noreferrer" target="_blank">Environment variables</a></li> </ul> <h3 id="set-permission-scopes">Set permission scopes</h3> <p>There are multiple ways to set permission scopes for your extension.</p> <p>When you create your extension:</p> <ul> <li>If you use the SDK’s guided flow to <a href="/sdk/get-started/create-a-new-extension/#start-with-guided-setup-in-the-command-line">create a new extension</a>, we will add the appropriate scopes based on the boilerplate you generate.</li> <li>If you use the SDK’s guided flow to create a new extension and choose not to use boilerplate code, we’ll prompt you to specify permission scopes separately.</li> </ul> <p>When you publish your extension:</p> <ul> <li>You can specify permission scopes in the Netlify UI when you <a href="/sdk/publish/publish-extensions/">publish your extension</a>.</li> </ul> <h2 id="test-your-extensions-installation-flow">Test your extension’s installation flow</h2> <p>Use the <a href="/sdk/extension-ui/get-started#develop-locally">extension UI preview mode</a> to preview your extension card and test your install flow. This preview mode allows you to test your install flow without publishing your extension.</p> <h2 id="learn-more-about-how-users-find-and-install-extensions">Learn more about how users find and install extensions</h2> <p>If you want to learn more about how users find, install, and interact with extensions, review the following resources:</p> <ul> <li><a href="/sdk/publish/#extensions-in-the-netlify-ui">Publish overview: extensions in the Netlify UI</a> - written for extension authors, this page outlines the different ways extensions are presented in the Netlify UI.</li> <li><a href="https://docs.netlify.com/integrations/overview/" class="external-link" rel="noopener noreferrer" target="_blank">Extensions and integrations overview</a> - written for extension users, this page in the Netlify user docs focuses on how users can find, install, and manage extensions on Netlify.</li> </ul> <div class="not-content astro-77rygnu7"> <form class='astro-77rygnu7' method='POST' name='feedback'> <div class="feedback astro-77rygnu7"> <div class="astro-77rygnu7"> <h4 class="astro-77rygnu7">Did you find this doc useful?</h4> <p class="astro-77rygnu7">Your feedback helps us improve our docs.</p> </div> <div class="votes astro-77rygnu7"> <input type="radio" name="vote" value="upvote" id="upvote" class="astro-77rygnu7"> <label class="vote-button astro-77rygnu7" for="upvote"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true" id="svg-upvote"> <g fill="none" fill-rule="evenodd"> <circle cx="32" cy="32" r="32" fill="none" fill-rule="nonzero"></circle> <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M40 29h-7.645l1.473-3.889c.377-.996.042-2.135-.803-2.73-.963-.679-2.263-.427-2.936.569L26 29v9a4 4 0 0 0 4 4h6.517c1.51 0 2.893-.852 3.573-2.203L42 36v-5a2 2 0 0 0-2-2zM22 29v12"></path> </g> </g> </svg> </label> <input type="radio" name="vote" value="downvote" id="downvote" class="astro-77rygnu7"> <label class="vote-button astro-77rygnu7" for="downvote"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true" id="svg-downvote"> <g fill="none" fill-rule="evenodd"> <circle cx="32" cy="32" r="32"></circle> <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M23 35h7.645l-1.473 3.889c-.377.996-.042 2.135.803 2.73.963.679 2.263.427 2.936-.569l4.09-6.05v-9a4 4 0 0 0-4-4h-6.518c-1.51 0-2.893.852-3.573 2.202L21 28v5a2 2 0 0 0 2 2zM41 35V23"></path> </g> </g> </svg> </label> <input type="radio" name="vote" value="none" id="none" checked class="astro-77rygnu7"> </div> </div> <input type="hidden" name="form-name" value="feedback" class="astro-77rygnu7"> <input type="hidden" name="path" value="/sdk/get-started/installation-flow/" class="astro-77rygnu7"> <textarea name="feedback" placeholder="What else would you like to tell us about this doc?" class="astro-77rygnu7"></textarea> <p class="hidden astro-77rygnu7"> <label class="astro-77rygnu7"> Don’t fill this out if you’re human: <input name="bot-field" class="astro-77rygnu7"> </label> </p> <button class="form-submit astro-77rygnu7" type="submit" disabled>Send</button> </form> <div class="success-message astro-77rygnu7"> <h4 class="astro-77rygnu7">Got it!</h4> <p class="astro-77rygnu7">Your feedback helps us improve our docs.</p> </div> </div> <footer class="astro-sz7xmlte"> <nav aria-label="Footer navigation" class="astro-sz7xmlte"> <ul class="footer_nav astro-sz7xmlte"> <li class="astro-sz7xmlte"> <a href="https://netlify.com/" class="astro-sz7xmlte">Netlify</a> </li> <li class="astro-sz7xmlte"> <a href="https://netlify.com/careers/" class="astro-sz7xmlte">Careers</a> </li> <li class="astro-sz7xmlte"> <a href="https://netlify.com/blog/" class="astro-sz7xmlte">Blog</a> </li> <li class="astro-sz7xmlte"> <a href="https://www.netlify.com/legal/terms-of-use/" class="astro-sz7xmlte">Terms</a> </li> <li class="astro-sz7xmlte"> <a href="https://www.netlify.com/privacy/" class="astro-sz7xmlte">Privacy</a> </li> </ul> </nav> <p class="footer_copyright astro-sz7xmlte">© 2023 Netlify</p> </footer> <script type="astro-raw"> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NMKKF2M" height="0" width="0" style="display:none;visibility:hidden" ></iframe> </noscript>; </script> </div> <footer class="sl-flex astro-vcdq3p2d"> <div class="meta sl-flex astro-vcdq3p2d"> </div> <div class="pagination-links astro-nxbj5azm" dir="ltr"> <a href="/sdk/get-started/anatomy-of-an-extension" rel="prev" class="astro-nxbj5azm"> <svg aria-hidden="true" class="astro-nxbj5azm astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg> <span class="astro-nxbj5azm"> Previous <br class="astro-nxbj5azm"> <span class="link-title astro-nxbj5azm">Anatomy of an extension</span> </span> </a> <a href="/sdk/get-started/environment-variables" rel="next" class="astro-nxbj5azm"> <svg aria-hidden="true" class="astro-nxbj5azm astro-bg6azcwr" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg> <span class="astro-nxbj5azm"> Next <br class="astro-nxbj5azm"> <span class="link-title astro-nxbj5azm">Environment variables</span> </span> </a> </div> </footer> </div> </div> </main> </div> </div> </div> </div> <script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="35ffcf76-cab5-463d-a2e5-8983dba16a56" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiMzVmZmNmNzYtY2FiNS00NjNkLWEyZTUtODk4M2RiYTE2YTU2IiwiYWNjb3VudF9pZCI6IjU4ZGE4ODkzZDY4NjVkMzVjOTJhNzJiOCIsImRlcGxveV9pZCI6IjY3NDUxYWNlMWRmMGMyMDAwODVlYzUxYyIsImlzc3VlciI6Im5mc2VydmVyIn0.LPo7mn0of9J5H64lzFSErAgtZUXzumQNcz6Sgu7Q9jA"></script></body></html>