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">

<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>