Creating, publishing, and managing apps through App Builder

<body>
<p id="docs-hc-snippet" style="display: none;">Once you understand the fundamentals of App Builder, you are ready to build, refine, deploy, and maintain your custom applications. This guide walks you through the step-by-step process of using plain language prompts and file uploads to build your app, test its functionality, publish it to your account, and manage versions over time.</p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="suite_pee">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_pe">
<table>
<tbody>
<tr>
<td>
<strong>Support</strong>
</td>
<td>Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>

<div class="body">

<p class="p" dir="ltr">Once you understand the fundamentals of App Builder, you are ready to build,
refine, deploy, and maintain your custom applications. This guide walks you through the
step-by-step process of using plain language prompts and file uploads to build your app,
test its functionality, publish it to your account, and manage versions over time.</p>
<div class="note" id="topic_bcj_zwz_r2c__note_e3s_m4s_mhc">
<span class="notetitle">Note:</span> App Builder uses artificial intelligence to generate code and
configurations based on your inputs. Always thoroughly test apps in a safe environment
before deploying them to production.</div>
<div class="p">This is the second article in a series on using App Builder:<ul class="ul" id="topic_bcj_zwz_r2c__ul_clg_lvx_gkc">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9034700691866" target="_blank">Using App Builder</a></li>
<li class="li">Creating, publishing, and managing apps with App Builder</li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11140982965914" target="_blank">App Builder code structure
reference</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11140889487386" target="_blank">Troubleshooting App Builder</a></li>
</ul>
</div>
<p class="p">This article includes the following sections:</p>
<div class="p">
<ul class="ul" id="topic_bcj_zwz_r2c__ul_jns_lwt_dfc">
<li class="li"><a class="xref" href="#topic_tcs_41t_rgc">Creating your first app</a></li>
<li class="li"><a class="xref" href="#topic_l14_wbw_djc">Designing with file uploads</a></li>
<li class="li"><a class="xref" href="#topic_bgc_bft_rgc">Approving the AI-proposed plan</a></li>
<li class="li"><a class="xref" href="#topic_zxr_yr5_rgc">Refining and testing your app</a></li>
<li class="li"><a class="xref" href="#topic_tg2_cb5_rgc">Example: Creating an assignee change tracker app</a></li>
<li class="li"><a class="xref" href="#topic_wwz_2qt_rgc">Installing and managing apps</a></li>
<li class="li"><a class="xref" href="#topic_lvr_dzz_r2c">Integrating with private systems and third-party platforms</a></li>
<li class="li"><a class="xref" href="#topic_uvl_cxx_gkc">Next steps</a></li>
</ul>
</div>
<div class="p">Related articles:<ul class="ul" id="topic_bcj_zwz_r2c__ul_cwr_y3k_2jc">
<li class="li"><a class="xref" href="https://community.zendesk.com/search?q=app%20builder&amp;tags%5B0%5D=app-builder&amp;content_type%5B0%5D=discussion" target="_blank">Browse all App Builder recipes</a></li>
<li class="li">
<a class="xref" href="https://community.zendesk.com/topic/new?fid=18" target="_blank">Create an app recipe</a>: Share your own App Builder
creations with the community by submitting a recipe host. See the <a class="xref" href="https://docs.google.com/document/d/1DArPFHQIg04Fd-BRi6KTtpCMBS9XbjKNq8So2vYNnQg/edit?tab=t.0#heading=h.ct9afd5jnlyi" target="_blank">full instructions</a> to get started.</li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_tcs_41t_rgc">
<h2 class="title topictitle2" id="ariaid-title2">Creating your first app</h2>
<div class="body">
<p class="p">To create an app:</p>
<ul class="ul" id="topic_tcs_41t_rgc__ul_ngz_npt_1hc">
<li class="li">
<p class="p"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4581766374554#topic_hfg_dyz_1hb" target="_blank">Admin Center</a>, click <img class="image" id="topic_tcs_41t_rgc__image_gr3_vf1_s2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/ac_apps_integrations_icon.png">
<strong class="ph b">Apps and integrations</strong> in the sidebar, then select <strong class="ph b">Apps &gt; App builder</strong>.</span> You must be a Zendesk admin to use App Builder.</p>
</li>
</ul>
<p class="p">If you haven't created an app yet, opening App Builder takes you to a welcome page.
Click <strong class="ph b">Start a conversation</strong> to begin the app creation process.</p>
<img class="image img-screenshot" id="topic_tcs_41t_rgc__image_ytm_3ct_rgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/app-builder-welcome.png" width="700">
<p class="p">Returning users land on a conversation list page for quick access to their existing
conversations. Conversations are sorted by most recently updated.</p>
<img class="image img-screenshot" id="topic_tcs_41t_rgc__image_xks_nct_rgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/app-builder-returning-users.png" width="700">
<div class="p">When you describe your app, App Builder's AI planner automatically recommends the
best location based on your use case (or you can manually change to a different
location by clicking <strong class="ph b">Change location</strong>). Each app can be built for only one
location at a time. Choose from:<ul class="ul" id="topic_tcs_41t_rgc__ul_wql_qct_rgc">
<li class="li">Ticket Sidebar: Appears alongside each ticket’s details in Zendesk Support
(the default). Select this location for displaying ticket-specific
information, actions, or integrations. The ticket sidebar applies to
existing and optionally new tickets.</li>
<li class="li">New Ticket Sidebar: Visible when an agent is creating a new ticket. This
location is good for solutions that assist with ticket creation, templates,
data enrichment, or validation.</li>
<li class="li">User Sidebar: Appears when viewing user profiles. Ideal for surfacing
user-specific data, customer context, or account-level actions.</li>
<li class="li">Organization Sidebar: Appears when viewing organization profiles. Select
this option for displaying organization-level metrics, company details, or
business-wide workflows.</li>
<li class="li">Top Navigation: The top bar of the Zendesk interface is always accessible
regardless of the ticket or screen. Select this option for global tools like
notification hubs or quick actions.</li>
<li class="li">Side Navigation: Located at the bottom of Zendesk Support’s left-hand
navigation panel, this area is ideal for complex or standalone apps that
require additional space such as dashboards or reports.</li>
</ul>
<img class="image img-screenshot" id="topic_tcs_41t_rgc__image_pfn_lsx_vgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/app_locations.png" width="500">
</div>
<p class="p">Once you’ve selected the app location, you’ll enter the conversation window. Use one
of the provided example prompts or enter your own app requirements and click
<strong class="ph b">Send</strong>.</p>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested2" id="topic_l14_wbw_djc">
<h3 class="title topictitle3" id="ariaid-title3">Designing with file uploads</h3>
<div class="body">
<p class="p">To accelerate the app creation process, you can upload up to five files directly
into your App Builder prompts. The following file types are supported: PNG, JPG,
TXT, DOCX, PDF, CSV, or JSON. The AI analyzes these files to automatically
determine the layout, required input fields, and UI components, saving you from
writing lengthy, detailed prompts.</p>
<div class="p">
<strong class="ph b">To use file uploads:</strong><ol class="ol" id="topic_l14_wbw_djc__ol_er4_ybw_djc">
<li class="li">
<p class="p">In the prompt interface, click the <strong class="ph b">paperclip icon</strong>. You can
attach up to five files per prompt.</p>
</li>
<li class="li">
<p class="p">Include a detailed description of the app's use case to guide the AI.
Be specific about the app’s purpose, required functionality and
workflows, UI parts, users, and constraints, as described in the
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9037913973146-Prompting-guidelines-and-examples-for-App-Builder#topic_oyq_11l_4fc" target="_blank">MAPS framework</a>. For
example: "Make an app that looks exactly like the attached
screenshot for our employee hiring process. Use case: The app will
be used by Agents to create new "child" tickets for SMS and email
side conversations from parent tickets. The parent and child tickets
will have different ticket requesters. The app will handle email
child tickets and (if the recipient has opted in) SMS tickets."</p>
</li>
<li class="li">
<p class="p">Click <strong class="ph b">Send</strong>. The AI will parse both your written instructions
and the visual elements of your uploaded files to suggest a
comprehensive build.</p>
</li>
</ol>
</div>
<div class="p">The AI is capable of identifying complex UI elements from your uploads, such
as:<ul class="ul" id="topic_l14_wbw_djc__ul_gr4_ybw_djc">
<li class="li">
<p class="p"><strong class="ph b">Recipient input fields</strong> with contact validation.</p>
</li>
<li class="li">
<p class="p"><strong class="ph b">Message text areas</strong> for custom content.</p>
</li>
<li class="li">
<p class="p"><strong class="ph b">Status indicators</strong> (for example, SMS delivery status).</p>
</li>
<li class="li">
<p class="p"><strong class="ph b">Action buttons</strong> for specific workflows like "Create Email
Ticket."</p>
</li>
</ul>
</div>
<p class="p">Once the AI has processed your files, the AI presents a proposed plan for
review.</p>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested2" id="topic_bgc_bft_rgc">
<h3 class="title topictitle3" id="ariaid-title4">Approving the AI-proposed plan</h3>
<div class="body">
<p class="p" dir="ltr">After you enter your initial prompt, App Builder’s AI generates and
presents a recommended plan for your app. You can review the plan, approve it as
is, remove unnecessary elements, or incorporate additional suggested features.
This approach offers a quick and flexible way to tailor your app to your exact
needs.</p>
<p class="p"> On the “Approve the plan” screen, you’ll see a summary of your app’s proposed
functionality, along with core and optional features. Check or uncheck the boxes
next to each feature according to your preference. You can continue making
changes later so don't worry if you're unsure now. Here's an example:</p>
<img class="image img-screenshot" id="topic_bgc_bft_rgc__image_bc2_445_rgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/app-builder-planner.png" width="350">
<p class="p">At the bottom of the planning screen, you have two choices:</p>
<ul class="ul" id="topic_bgc_bft_rgc__ul_br3_nft_rgc">
<li class="li">
<strong class="ph b">Continue planning</strong>: Refine the proposed plan further by adding new
requirements or making additional adjustments.</li>
<li class="li">
<strong class="ph b">Approve plan and build</strong>: Confirm your selected features and allow App
Builder to generate your app based on the approved plan.</li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested2" id="topic_zxr_yr5_rgc">
<h3 class="title topictitle3" id="ariaid-title5">Refining and testing your app</h3>
<div class="body">
<p class="p">After the AI generates your approved plan, App Builder lets you refine, preview,
test, and publish your app directly within your Zendesk account.</p>
<ul class="ul" id="topic_zxr_yr5_rgc__ul_ux5_fs5_rgc">
<li class="li">Preview: Click <strong class="ph b">Preview</strong> to view your newly generated app in the
Preview tab, which uses mock data for a safe first look at the layout, data
flow, and interactive elements. This does not guarantee the app will work as
expected once published. You should test your app (see below) with real
account data before publishing. <p class="p">Use the Code tab to review your app's
files, folders, and components. Use the Settings tab to review and
update your app’s name and logo.</p>
</li>
<li class="li">Refine and iterate: Refine and update your app at any time by entering new
prompts in the conversation pane. Every change is saved, allowing you to
experiment freely and revert to a previous version whenever needed. Every
change is automatically versioned.</li>
<li class="li">Direct code editing: Switch to the native code editor to fine-tune your
app's logic, UI, or configuration manually without waiting on prompt
iterations or consuming prompt usage. You can make single or multiple code
changes across files at once. Whenever a file is modified, a small dot
indicator appears next to the file and its parent folder so you can spot
unsaved changes. Once you click <strong class="ph b">Save all changes</strong>, your edits update
the preview. All code edits remain fully compatible with App Builder's
visual preview and AI assist.</li>
<li class="li">Restore: Each change is saved automatically as a new version, allowing you
to revert to any previous version at any time—whether you're experimenting,
fixing an error, or reconsidering your approach.</li>
<li class="li">Test: Click <strong class="ph b">Test</strong> to run your app in Zendesk Support using real
account data. Here you can check if your app displays, reads, and writes
data as intended and works in real-world scenarios. <div class="note" id="topic_zxr_yr5_rgc__note_oq3_zs5_rgc">
<span class="notetitle">Note:</span> Any updates or changes made while testing your app
are applied to your actual account data.</div>
</li>
<li class="li">Address issues: If something doesn't work, use the app's readable error
messages and logs to identify problems. Paste error details into the prompt
for targeted help, or ask App Builder to add debugging output.</li>
<li class="li">App settings: Customize your app by entering a custom name and selecting an
icon along with a background color from the Garden icon library in the
Settings tab.</li>
<li class="li">Publish and manage your app: When you're fully satisfied, click
<strong class="ph b">Publish</strong> to make your app available to Zendesk admins or agents.
</li>
</ul>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested3" id="topic_qvw_vvw_lgc">
<h4 class="title topictitle4" id="ariaid-title6">Choosing a custom app icon</h4>
<div class="body">
<p class="p">Custom icons make it easier to identify your app and tailor its appearance to
your brand or workflow. You have the option to personalize your app’s icon
by selecting from Zendesk’s Garden icon library. For each app location, App
Builder ensures your icon displays correctly by generating a PNG version of
your SVG icon as needed.</p>
<p class="p"><strong class="ph b">To select a custom app icon</strong>:</p>
<ol class="ol" id="topic_qvw_vvw_lgc__ol_mnd_xvw_lgc">
<li class="li">Click the <strong class="ph b">Settings</strong> tab.</li>
<li class="li">Enter a name for your app. <p class="p">If you don't enter a name, App Builder
will automatically generate a name based on the details from your
conversation and the prompts you've given.</p>
</li>
<li class="li">Browse through a curated collection of Garden icons and background
colors. Click any icon or color combination to preview how it will look
for your app.</li>
<li class="li">Once satisfied, click <strong class="ph b">Save</strong>. </li>
</ol>
<p class="p">Your selected name, icon, and color will appear in Zendesk Support once
published. If you do not pick a custom icon, the default placeholder icon is
used.</p>
<p class="p">These settings are saved in App Builder, so the next time you revisit the
same app, the latest name and icon choices appear starting from the version
where you made those changes.</p>
</div>
</div>
<div aria-labelledby="ariaid-title7" class="topic nested3" id="topic_udl_qh1_lgc">
<h4 class="title topictitle4" id="ariaid-title7">Version control</h4>
<div class="body">
<p class="p">App Builder automatically manages versions of your app as you build and
iterate, making it easy to experiment, review changes, and recover previous
work.</p>
<p class="p">Each time you generate an update or restore a previous version, App Builder
creates a new version and records its timestamp. </p>
<p class="p">
<img class="image img-screenshot" id="topic_udl_qh1_lgc__image_m41_5h1_lgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/appbuilder-version-control.png" width="350"></p>
<p class="p">When a new version is created, you’ll see the version details in your
conversation history. Click <strong class="ph b">Restore</strong> to return your app preview and
code to any prior state. Restoring always generates a new version, so
nothing is lost.</p>
<p class="p">You can also select a prior version using the Generated app pulldown menu
from the Preview or Code tab.</p>
</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title8" class="topic nested1" id="topic_tg2_cb5_rgc">
<h2 class="title topictitle2" id="ariaid-title8">Example: Creating an assignee change tracker app</h2>
<div class="body">
<p class="p">Here is an example of building an app for tracking changes in ticket assignees.</p>
<ol class="ol" id="topic_tg2_cb5_rgc__ol_ug2_cb5_rgc">
<li class="li"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4581766374554#topic_hfg_dyz_1hb" target="_blank">Admin Center</a>, click <img class="image" id="topic_tg2_cb5_rgc__image_gr3_vf1_s2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/ac_apps_integrations_icon.png">
<strong class="ph b">Apps and integrations</strong> in the sidebar, then select <strong class="ph b">Apps &gt; App builder</strong>.</span></li>
<li class="li">Click <strong class="ph b">Start a conversation</strong>.</li>
<li class="li">Select <strong class="ph b">Ticket sidebar</strong> and click <strong class="ph b">Select location</strong>.</li>
<li class="li">At the prompt, enter the following:<p class="p"><strong class="ph b">Mission</strong>: This app helps to give a
very quick view of assignee changes instead of having to dig through the
ticket event history, search for all the assignee change events, and track
that way. And this is often a question for folks ‘ok, well, where is the
handoff in the chain of custody for these tickets’. <strong class="ph b">Action</strong>: Create an
app called Assignee Change Tracker that tracks the history of changes on an
assignee on a given ticket. <strong class="ph b">Parts</strong>: A table should list each time the
assignee of a ticket has changed, in order of most recent to least recent.
Each row should include the assignee’s name, the date they were assigned,
and how long they were assigned to the ticket. Above the table, display the
total number of changes in assignment of the ticket. Add a button to refresh
the displayed data to reflect the latest changes. Add another button to
export data to an excel spreadsheet. Make both buttons small and next to
each other. <strong class="ph b">Scope</strong>: This app is for only the current ticket.</p>
</li>
<li class="li">Use the default plan selections and click <strong class="ph b">Approve plan and build</strong>.</li>
<li class="li">Click <strong class="ph b">Send</strong>.<p class="p">App Builder responds with something similar to
this:</p>
<img class="image img-screenshot" id="topic_tg2_cb5_rgc__image_vg2_cb5_rgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/app-builder-ex-1.png" width="400">
</li>
<li class="li">Review the preview to see how your app looks and behaves, and check the AI’s
response prompt to understand the underlying instructions. </li>
<li class="li">Click the Code tab to view the files containing the generated code and mock data
used to populate the preview. </li>
<li class="li">At the prompt, enter the following: <p class="p">Add Previous Assignee as the first column
in the table to capture the full name of the person whom the ticket was
previously assigned to. Also add tooltips to both buttons that display a
short description of each button's function when hovered over.</p>
</li>
<li class="li">Click <strong class="ph b">Send</strong>.<p class="p">App Builder responds with something similar to
this:</p>
<img class="image img-screenshot" id="topic_tg2_cb5_rgc__image_wg2_cb5_rgc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/app-builder-ex-2.png" width="400">
</li>
<li class="li">Click <strong class="ph b">Test</strong> to test your app using your own Zendesk data. <p class="p">While
testing, any changes you make will affect your actual account, so carefully
review the impact of your actions. Also consider customizing your app’s
appearance in the Settings tab. For example, update the app’s color and icon
to something relevant to your app’s theme rather than using the default
icon. This helps to clearly identify your app.</p>
</li>
</ol>
<p class="p">Your app is now complete and is ready to be published.</p>
</div>
</div>
<div aria-labelledby="ariaid-title9" class="topic nested1" id="topic_wwz_2qt_rgc">
<h2 class="title topictitle2" id="ariaid-title9">Installing and managing apps</h2>
<div class="body">
<div class="p">To install and manage apps:<ol class="ol" id="topic_wwz_2qt_rgc__ol_bby_2hg_bhc">
<li class="li">When you are satisfied with your app, click <strong class="ph b">Publish</strong> in the upper
right corner.<p class="p">You’ll be prompted to set who can access this app by
selecting specific Zendesk roles (such as Admin, Agent, and so forth)
and user groups. This allows you to limit access based on role or group.
For example, restricting the app to only admins, or select user
groups.</p>
</li>
<li class="li">Acknowledge the service disclaimer regarding the use of apps created through
App Builder.<p class="p">After you click <strong class="ph b">Agree and Publish</strong>, the installation
process begins, and App Builder notifies you when your app has been
successfully installed.</p>
</li>
<li class="li">Click <strong class="ph b">Manage App</strong> to modify permissions or manage the app further, or
select <strong class="ph b">Apps &gt; Zendesk Supported Apps</strong>. <p class="p">For more information, see
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4409155972378" target="_blank"><u class="ph u">Managing your installed
apps</u></a>.</p>
</li>
</ol>
</div>
<div class="note" id="topic_wwz_2qt_rgc__note_bjt_tnm_fhc">
<span class="notetitle">Note:</span> Apps cannot be moved automatically between different Zendesk
instances within your account. If you want to use an app in another instance, you
must manually download the app code and upload it to the new instance.</div>
</div>
</div>
<div aria-labelledby="ariaid-title10" class="topic nested1" id="topic_lvr_dzz_r2c">
<h2 class="title topictitle2" id="ariaid-title10">Integrating with private systems and third-party platforms</h2>
<div class="body">
<p class="p">App Builder makes it easy to connect your app with private company data sources as
well as external, third-party platforms by guiding you step by step through
connection setup and authentication.</p>
<p class="p" dir="ltr">To integrate with private or external services, you’ll typically need the
API endpoint and authentication details. App Builder supports two primary
authentication approaches:</p>
<ul class="ul" id="topic_lvr_dzz_r2c__ul_hlz_cfw_5gc">
<li class="li" dir="ltr">API key authentication: You provide an API key directly as a
credential, which authorizes your app to access the external API. This key acts
as proof that you’re allowed to use the API. Using an API key is quick and
simple, making it ideal for internal systems or cases where you control the
API.</li>
<li class="li" dir="ltr">OAuth 2.0 authentication: Instead of entering an API key, OAuth 2.0
handles a secure handshake between your app and the external service. This
method is more secure as it avoids direct API key handling and enables granular
permissions. This method is best suited for third-party services where users
need to explicitly grant your app access to their data.</li>
</ul>
<p class="p">App Builder automatically displays the appropriate authentication settings panel when
it's needed, often after investigating requirements for a third-party system through
its AI-driven web search. The authentication settings panel appears only when you
click <strong class="ph b">Test</strong> or <strong class="ph b">Publish</strong>.</p>
<p class="p">For more information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9970429843610" target="_blank">Securing API connections in App Builder</a>. </p>
</div>
<div aria-labelledby="ariaid-title11" class="topic nested2" id="topic_x5h_nzt_rgc">
<h3 class="title topictitle3" id="ariaid-title11">Using API keys</h3>
<div class="body">
<p class="p">When you create an API key connection, you must specify an HTTP header name. When
the connection is used to make an API call, Zendesk passes the API key as the
value for this header.</p>
<p class="p">The exact steps for setting up API key authentication varies depends on your
integration. Below is one typical example and visual walkthrough.</p>
<ol class="ol" id="topic_x5h_nzt_rgc__ol_y5h_nzt_rgc">
<li class="li">For Domain, enter the base URL for your account. For example, "testdomain". </li>
<li class="li">Enter the project key. This is a unique key that identifies the project you
want this app to connect to. For example "HR". </li>
<li class="li">Click <strong class="ph b">Continue</strong>.</li>
<li class="li">Click <strong class="ph b">Test</strong>.</li>
<li class="li">Click <strong class="ph b">Next</strong>.</li>
<li class="li">For Allowed Domains, enter the full domain you want to allow for this
connection. For example, testdomain.atlassian.net.</li>
<li class="li">Enter the API token. This is the secure credential used to authenticate your
connection to the service.</li>
<li class="li">Click <strong class="ph b">Create integration and test app</strong>.</li>
</ol>
<p class="p"></p>
<div class="non-responsive"><iframe class="iframe" controls="controls" height="315" src="https://www.youtube.com/embed/uZ2hkEWUH04?si=Yi1MXg2ggVtTLq8h" width="560"></iframe></div>
</div>
</div>
<div aria-labelledby="ariaid-title12" class="topic nested2" id="topic_z5h_nzt_rgc">
<h3 class="title topictitle3" id="ariaid-title12">Using OAuth 2.0</h3>
<div class="body">
<p class="p">App Builder supports the secure, industry-standard OAuth 2.0 protocol for
connecting to third-party and internal APIs. This means you can safely build
apps that access data from external systems or your own APIs, using token-based
authentication flows instead of sharing static credentials.</p>
<p class="p">Before creating a connection with the OAuth 2.0 authentication type, you must
configure an OAuth client. When configuring the OAuth client, you need the
client ID, client secret, authorization URL, token URL, and scopes from the
external system's OAuth configuration interface or admin portal. These
credentials are generated while registering your client application (such as
Zendesk) with the external system. The exact steps vary based on the external
service. App Builder will try to provide setup instructions for creating an
OAuth client in the external system. However, guidance may not be provided if
App Builder does not have the necessary details. </p>
<p class="p" dir="ltr">There are two approaches to creating an integration that requires
OAuth:</p>
<ul class="ul" id="topic_z5h_nzt_rgc__ul_edr_rv2_tgc">
<li class="li" dir="ltr">
<p class="p" dir="ltr"><strong class="ph b">Explicitly request OAuth: </strong>If you know your integration
will require OAuth, you can specify this directly in your prompt to App
Builder. For example, “Create an app that allows me to add links from my
Google Sheets to Zendesk tickets. It should display a list of available
Google Sheets. Use OAuth to connect to Google.” When you include a
requirement like “use OAuth”, App Builder guides you step-by-step
through connecting your app to the external platform using the correct
OAuth flow.</p>
</li>
<li class="li" dir="ltr">
<p class="p" dir="ltr"><strong class="ph b">Automatic detection of OAuth requirements</strong>: You don’t
need to be an expert in authentication methods to get started. If you
describe the functionality you want, such as “connect to Google”, App
Builder will recognize when OAuth is required, even if you don’t mention
it in your prompt. The system guides you through any required
authorization steps.</p>
</li>
</ul>
<p class="p"><strong class="ph b">When you click Test on a generated app that uses OAuth</strong>:</p>
<ol class="ol" id="topic_z5h_nzt_rgc__ol_avh_nzt_rgc">
<li class="li">Copy the OAuth client callback URL and save it in a secure location. You’ll
need to use it as the redirect URI when creating the OAuth client in your
third-party OAuth provider system.</li>
<li class="li">OAuth is automatically selected as the authentication type. This option is
disabled and cannot be modified.</li>
<li class="li">Enter allowed domains for the connection. You can't change the allowed
domains after you create the connection.</li>
<li class="li">Enter the Client ID. This is a unique identifier assigned to your OAuth
client, similar to a username for your client.</li>
<li class="li">Enter the Client Secret. This is a confidential key issued when registering
your OAuth client.</li>
<li class="li">Enter the Access Token URL. This is the URL used to receive an access
token.</li>
<li class="li">Enter the Authorize URL. This is the URL to grant the application’s access
to the account.<p class="p">For most of the above fields, App Builder will suggest and
prefill values. However, always review and verify that the details are
correct.</p>
</li>
<li class="li">Enter a space-separate list of default scopes. Scopes are permissions that
represent what a client application can access on behalf of the user.</li>
<li class="li">Click <strong class="ph b">Next</strong>.</li>
<li class="li">In the Grant Type field, enter your authorization code. The OAuth grant type
determines how your app will authenticate.</li>
<li class="li">(optional) Check "Allow offline access" to request refresh tokens and to
maintain access while the user is offline.</li>
<li class="li">(optional) Enter the OAuth URL subdomain. Enter the custom subdomain for
your OAuth provider if required. Leave blank if not applicable.</li>
<li class="li">Click <strong class="ph b">Connect</strong> and select an account.<p class="p">App Builder redirects you to
the third-party OAuth provider to select your account and authorize
access.</p>
</li>
<li class="li">Copy the Connection ID. You'll need it to reference this OAuth connection
when configuring or making authenticated requests from your app.</li>
<li class="li">Click <strong class="ph b">Continue</strong>.</li>
</ol>
<p class="p">The following video shows an example OAuth flow, including testing the app.</p>
<p class="p"></p>
<div class="non-responsive"><iframe class="iframe" controls="controls" height="315" src="https://www.youtube.com/embed/ogMBTpvKBMI?si=cA5uGTAaWKm6vSq2" width="560"></iframe></div>
<p class="p">The following video shows an example OAuth flow, including publishing the
app.</p>
<p class="p"></p>
<div class="non-responsive"><iframe class="iframe" controls="controls" height="315" src="https://www.youtube.com/embed/jNtNff6DonA?si=yy8rpsTCjIqFb6jk" width="560"></iframe></div>
</div>
</div>
<div aria-labelledby="ariaid-title13" class="topic nested2" id="topic_s3y_kyv_lgc">
<h3 class="title topictitle3" id="ariaid-title13">Guided integration </h3>
<div class="body">
<p class="p">When connecting to private or third-party services that require authentication
(such as an API key or OAuth), App Builder’s AI analyzes your prompts in the
conversation to determine the necessary connection details.</p>
<p class="p" dir="ltr">App Builder displays the relevant authentication settings and
automatically captures any required information it can detect from your
instructions.</p>
<p class="p" dir="ltr">If additional details are needed, App Builder prompts you for the
necessary credentials or configuration, guiding you through the connection setup
step by step.</p>
</div>
</div>
<div aria-labelledby="ariaid-title14" class="topic nested2" id="topic_jxr_szt_rgc">
<h3 class="title topictitle3" id="ariaid-title14">Integrating with private company systems</h3>
<div class="body">
<p class="p">To connect to private or internal systems:</p>
<ul class="ul" id="topic_jxr_szt_rgc__ul_kxr_szt_rgc">
<li class="li">Obtain your API endpoint and information about how to authenticate (such as
whether you need an API key or OAuth credentials) from internal docs or your
development team.</li>
<li class="li">For more complex integrations, gather all required credentials (API keys,
OAuth tokens) and define the input and output data formats your app will
use.</li>
<li class="li">When you’re ready to set up the connection, prompt App Builder with the
information you’ve gathered and you’ll be guided through the remaining
steps. Note that App Builder is not familiar with your internal systems and
can only assist if you provide relevant documentation or details about these
systems.</li>
</ul>
<p class="p">Once your integration is configured, click <strong class="ph b">Test</strong> in App Builder to verify
integration functionality before deploying to your live Zendesk environment.</p>
</div>
</div>
<div aria-labelledby="ariaid-title15" class="topic nested2" id="topic_lxr_szt_rgc">
<h3 class="title topictitle3" id="ariaid-title15">Integrating your app with third-party platforms</h3>
<div class="body">
<p class="p" dir="ltr">App Builder lets you create applications that can display or manipulate
data to or from any third-party applications, such as Jira, Slack, Google,
Calendly, Workday, and others, as long as those services have public-facing
APIs. For example, you could build a Google Sheets integration that allows
agents to quickly view or update customer records, ticket logs, inventory lists,
or workflow trackers without leaving Zendesk. The app could present real-time
data from specific spreadsheets or ranges, and even let agents add new entries,
update cell values, or archive old records directly from the Zendesk interface.
After each action, the app notifies the agent whether it was successful or if
there were any issues with the integration.</p>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title16" class="topic nested1" id="topic_uvl_cxx_gkc">
<h2 class="title topictitle2" id="ariaid-title16">Next steps</h2>
<div class="body">
<p class="p">Learn how application files are organized in <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11140982965914" target="_blank">App Builder code structure reference</a>.</p>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/11141019633050",
"url": "https://support.zendesk.com/hc/en-us/articles/11141019633050",
"headline": "Creating, publishing, and managing apps through App Builder",
"description": "You can create, test, publish, and manage custom applications using an AI-driven app builder that supports file uploads, version control, and integration with private and third-party systems through API key or OAuth authentication.",
"articleSection": "Product help",
"datePublished": "2026-08-17T21:55:14+00:00",
"dateModified": "2026-08-25T21:26:27.469578+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/11141019633050"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
}
}</script>
</body>