Using carousels in conversation flows for AI agents

<body>
<p id="docs-hc-snippet" style="display: none;">A carousel is a rich messaging block type within a dialogue for an AI agent. It displays up to 10 options, each with a visual element called a card. Carousels provide a visually pleasing way for customers to make a selection from options presented to them by the AI agent.</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_all">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Team, Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

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

</div>

<div class="body">

<div class="note attention" id="carousels_creating__note_e4y_nnr_2jc">
<span class="attentiontitle"></span> <span class="ph">The functionality described in this article is being rolled
out to all Suite and Support plans from May 11 through June 12, 2026. You may not
see this functionality in your account yet. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/10487730059034" target="_blank">this announcement</a> for details.</span>
</div>
<p class="p">A carousel is a rich messaging block type within a dialogue for an AI agent. It displays up
to 10 options, each with a visual element called a card. Carousels provide a visually pleasing
way for customers to make a selection from options presented to them by the AI agent. </p>
<div class="p">This article contains the following topics: <ul class="ul" id="carousels_creating__ul_klk_yjq_xfc">
<li class="li">
<a class="xref" href="#topic_ezr_bkq_xfc">About the carousel block</a>
</li>
<li class="li">
<a class="xref" href="#topic_yh2_glq_xfc">CRM-specific requirements and
limitations</a>
</li>
<li class="li"><a class="xref" href="#topic_bzz_fmq_xfc">Populating carousel cards via an API
integration</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_ezr_bkq_xfc">
<h2 class="title topictitle2" id="ariaid-title2">About the carousel block</h2>
<div class="body">
<div class="p">When you add a carousel block in a dialogue, two child blocks appear for configuration: <ul class="ul" id="topic_ezr_bkq_xfc__ul_kjl_rkq_xfc">
<li class="li">
<strong class="ph b">Card block</strong>: Represents the first card in the carousel. It includes fields for
image URL, card title, and description. <p class="p"><img class="image" id="topic_ezr_bkq_xfc__image_jfv_ykq_xfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/aiaa_carousel_card.png" width="250"></p>
</li>
<li class="li">
<strong class="ph b">Card button block</strong>: Represents a button element on the associated card. Each
button can be one of two types: a standard button, or a button with an external link.
<p class="p"><img class="image" id="topic_ezr_bkq_xfc__image_mxd_ykq_xfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/aiaa_carousel_card_button.png" width="250"><img class="image" id="topic_ezr_bkq_xfc__image_wk2_1lq_xfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/aiaa_carousel_card_button_link.png" width="250"></p>
</li>
</ul>
You can add more buttons to each card (though some CRMs have limits on the number of
buttons), and up to 10 cards total within a carousel. </div>
<p class="p">You can add a fallback for users who don't interact with the carousel using the Fallback
toggle in the Details pane. A fallback block appears in the dialogue and can be configured
as an alternate branch. </p>
<p class="p"><img class="image" id="topic_ezr_bkq_xfc__image_xtp_clq_xfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/aiaa_carousel_fallback.png" width="800"></p>
<p class="p">Carousel blocks are available only for messaging AI agents, and only with certain CRMs.
CRMs may have specific requirements and limitations for carousels. </p>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_yh2_glq_xfc">
<h2 class="title topictitle2" id="ariaid-title3">CRM-specific requirements and limitations</h2>
<div class="body">
<div class="p">If you’re adding carousels to a CRM integration, special requirements and limitations apply
in the following instances: <ul class="ul" id="topic_yh2_glq_xfc__ul_os2_klq_xfc">
<li class="li">
<a class="xref" href="#topic_fpl_llq_xfc">Using carousels with Sunshine
Conversations</a>
</li>
<li class="li">
<a class="xref" href="#id_bhb_nlq_xfc">Using carousels with Zendesk Chat</a>
</li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested2" id="topic_fpl_llq_xfc">
<h3 class="title topictitle3" id="ariaid-title4">Using carousels with Sunshine Conversations</h3>
<div class="body">
<p class="p">Sunshine Conversations has the following requirements and limitations in its support of
rich format messaging. </p>
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_fpl_llq_xfc__table_hlv_ylq_xfc" rules="all" summary="">
<colgroup>
<col style="width:33.33333333333333%">
<col style="width:33.33333333333333%">
<col style="width:33.33333333333333%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry cellrowborder" id="d88e148" style="text-align:left;vertical-align:top;">Block type</th>
<th class="entry cellrowborder" id="d88e151" style="text-align:left;vertical-align:top;">Component</th>
<th class="entry cellrowborder" id="d88e154" style="text-align:left;vertical-align:top;">Sunshine Conversations limitations</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder" headers="d88e148" style="text-align:left;vertical-align:top;">Card</td>
<td class="entry cellrowborder" headers="d88e151" style="text-align:left;vertical-align:top;">All fields</td>
<td class="entry cellrowborder" headers="d88e154" style="text-align:left;vertical-align:top;">
<ul class="ul" id="topic_fpl_llq_xfc__ul_nhz_hpq_xfc">
<li class="li">All fields mandatory unless otherwise specified </li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e148" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e151" style="text-align:left;vertical-align:top;">Card count</td>
<td class="entry cellrowborder" headers="d88e154" style="text-align:left;vertical-align:top;">
<ul class="ul" id="topic_fpl_llq_xfc__ul_ulw_jpq_xfc">
<li class="li">Maximum 10 cards per carousel</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e148" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e151" style="text-align:left;vertical-align:top;">Images</td>
<td class="entry cellrowborder" headers="d88e154" style="text-align:left;vertical-align:top;">
<ul class="ul" id="topic_fpl_llq_xfc__ul_abz_jpq_xfc">
<li class="li">URL maximum 2048 characters </li>
<li class="li">URL must be valid http/https</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e148" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e151" style="text-align:left;vertical-align:top;">Card title</td>
<td class="entry cellrowborder" headers="d88e154" style="text-align:left;vertical-align:top;">
<ul class="ul" id="topic_fpl_llq_xfc__ul_nbb_kpq_xfc">
<li class="li">Maximum 128 characters</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e148" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e151" style="text-align:left;vertical-align:top;">Description</td>
<td class="entry cellrowborder" headers="d88e154" style="text-align:left;vertical-align:top;">
<ul class="ul" id="topic_fpl_llq_xfc__ul_w1d_kpq_xfc">
<li class="li">Maximum 128 characters </li>
<li class="li">No line breaks allowed </li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e148" style="text-align:left;vertical-align:top;">Card button</td>
<td class="entry cellrowborder" headers="d88e151" style="text-align:left;vertical-align:top;">Button count</td>
<td class="entry cellrowborder" headers="d88e154" style="text-align:left;vertical-align:top;">
<ul class="ul" id="topic_fpl_llq_xfc__ul_xk2_kpq_xfc">
<li class="li">Maximum three buttons per card</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e148" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e151" style="text-align:left;vertical-align:top;">Button text</td>
<td class="entry cellrowborder" headers="d88e154" style="text-align:left;vertical-align:top;">
<ul class="ul" id="topic_fpl_llq_xfc__ul_gqf_kpq_xfc">
<li class="li">Mandatory</li>
<li class="li">Maximum 35 characters</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e148" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e151" style="text-align:left;vertical-align:top;">Button with external link</td>
<td class="entry cellrowborder" headers="d88e154" style="text-align:left;vertical-align:top;">
<ul class="ul" id="topic_fpl_llq_xfc__ul_kgh_kpq_xfc">
<li class="li">URL maximum 2048 characters </li>
<li class="li">URL must be valid http/https </li>
<li class="li">Dialogue must end here</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested2" id="id_bhb_nlq_xfc">
<h3 class="title topictitle3" id="ariaid-title5">Using carousels with Zendesk Chat</h3>
<div class="body">
<p class="p">Zendesk Chat has the following requirements and limitations in its support of rich format
messaging.</p>
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="id_bhb_nlq_xfc__table_dt1_bmq_xfc" rules="all" summary="">
<colgroup>
<col style="width:33.33333333333333%">
<col style="width:33.33333333333333%">
<col style="width:33.33333333333333%">
</colgroup>
<thead class="thead" style="text-align:left;">
<tr class="row">
<th class="entry cellrowborder" id="d88e344" style="text-align:left;vertical-align:top;">Block type</th>
<th class="entry cellrowborder" id="d88e347" style="text-align:left;vertical-align:top;">Component</th>
<th class="entry cellrowborder" id="d88e350" style="text-align:left;vertical-align:top;">Zendesk Chat limitations</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row">
<td class="entry cellrowborder" headers="d88e344" style="text-align:left;vertical-align:top;">Card</td>
<td class="entry cellrowborder" headers="d88e347" style="text-align:left;vertical-align:top;">All fields</td>
<td class="entry cellrowborder" headers="d88e350" style="text-align:left;vertical-align:top;">
<ul class="ul" id="id_bhb_nlq_xfc__ul_jvv_mpq_xfc">
<li class="li">All fields mandatory </li>
<li class="li">Must contain at least one character (spaces don’t count)</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e344" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e347" style="text-align:left;vertical-align:top;">Card count</td>
<td class="entry cellrowborder" headers="d88e350" style="text-align:left;vertical-align:top;">
<ul class="ul" id="id_bhb_nlq_xfc__ul_yvv_mpq_xfc">
<li class="li">Maximum 10 cards per carousel</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e344" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e347" style="text-align:left;vertical-align:top;">Images</td>
<td class="entry cellrowborder" headers="d88e350" style="text-align:left;vertical-align:top;">
<ul class="ul" id="id_bhb_nlq_xfc__ul_ubb_qpq_xfc">
<li class="li">PNG, JPEG or GIF </li>
<li class="li">Maximum 20MB </li>
<li class="li">Render rectangularly (horizontal side being longest) </li>
<li class="li">Automatically cropped from center to 2:1 ratio (width:height) </li>
<li class="li">URL maximum 2000 characters </li>
<li class="li">URL must be valid http/https </li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e344" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e347" style="text-align:left;vertical-align:top;">Card title</td>
<td class="entry cellrowborder" headers="d88e350" style="text-align:left;vertical-align:top;">
<ul class="ul" id="id_bhb_nlq_xfc__ul_zbc_lnr_xfc">
<li class="li">Maximum 150 characters</li>
<li class="li">Quotation marks (") not allowed</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e344" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e347" style="text-align:left;vertical-align:top;">Description</td>
<td class="entry cellrowborder" headers="d88e350" style="text-align:left;vertical-align:top;">
<ul class="ul" id="id_bhb_nlq_xfc__ul_onj_mnr_xfc">
<li class="li">Maximum 150 characters</li>
<li class="li">No line breaks</li>
<li class="li">Quotation marks (") not allowed</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e344" style="text-align:left;vertical-align:top;">Card button</td>
<td class="entry cellrowborder" headers="d88e347" style="text-align:left;vertical-align:top;">Button count</td>
<td class="entry cellrowborder" headers="d88e350" style="text-align:left;vertical-align:top;">
<ul class="ul" id="id_bhb_nlq_xfc__ul_pwv_mpq_xfc">
<li class="li">Maximum three buttons per card</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e344" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e347" style="text-align:left;vertical-align:top;">Button text</td>
<td class="entry cellrowborder" headers="d88e350" style="text-align:left;vertical-align:top;">
<ul class="ul" id="id_bhb_nlq_xfc__ul_swv_mpq_xfc">
<li class="li">Mandatory</li>
<li class="li">Maximum 20 characters</li>
</ul>
</td>
</tr>
<tr class="row">
<td class="entry cellrowborder" headers="d88e344" style="text-align:left;vertical-align:top;"> </td>
<td class="entry cellrowborder" headers="d88e347" style="text-align:left;vertical-align:top;">Button with external link</td>
<td class="entry cellrowborder" headers="d88e350" style="text-align:left;vertical-align:top;">
<ul class="ul" id="id_bhb_nlq_xfc__ul_vwv_mpq_xfc">
<li class="li">Dialogue must end here</li>
<li class="li">URL maximum 2000 characters</li>
<li class="li">URL must be valid http/https</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested1" id="topic_bzz_fmq_xfc">
<h2 class="title topictitle2" id="ariaid-title6">Populating carousel cards via an API integration</h2>
<div class="body">
<p class="p">A carousel is static by default, but can be converted to a dynamic carousel in order to use
content fetched from an existing <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/8357756844442" target="_blank">custom API integration</a>. In a dynamic carousel, the card and card
button blocks are templates that contain the dynamic content. </p>
<div class="p">
<strong class="ph b">To add a carousel with dynamic content to a dialogue</strong>
<ol class="ol" id="topic_bzz_fmq_xfc__ol_czq_ymq_xfc">
<li class="li">
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9066753203738" target="_blank">In the dialogue builder</a>, click the plus (+) icon to add a
carousel block. <p class="p">The dynamic carousel block appears along with the first template card
block, a fallback block, and a Details pane.</p>
</li>
<li class="li">To remove the fallback (optional), deselect <strong class="ph b">Fallback</strong> on the Details pane.
<p class="p">Otherwise, it can be configured as an alternate branch.</p>
</li>
<li class="li">In the Details pane, click <strong class="ph b">Convert to dynamic carousel</strong> and enter
<code class="ph codeph">dataSources</code> as the array type parameter. </li>
<li class="li">In the template card block, enter text or parameters such as
<code class="ph codeph">%imageurl</code>, <code class="ph codeph">%title</code>, and <code class="ph codeph">%description</code>
in the respective fields. </li>
<li class="li">In the template card button block, enter text or a parameter such as
<code class="ph codeph">%buttontext</code>.</li>
</ol>
</div>
<p class="p"><img class="image" id="topic_bzz_fmq_xfc__image_yh4_xmq_xfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/aiaa_generative_replies_carousel_2.png" width="800"></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/8357749513370",
"url": "https://support.zendesk.com/hc/en-us/articles/8357749513370",
"headline": "Using carousels in conversation flows for AI agents",
"description": "You can use carousel blocks in AI agent dialogues to present up to 10 visual card options with buttons, including dynamic content via API integration, subject to CRM-specific requirements and limitations.",
"articleSection": "Building dialogues for advanced AI agents",
"datePublished": "2024-11-11T22:24:49+00:00",
"dateModified": "2026-05-12T13:15:54.647686+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/8357749513370"
},
"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>