Adding rich content to answers in bot builder (Legacy)

<body>
<p id="docs-hc-snippet" style="display: none;">Rich content elements can be added when you arecreating a new answer,adding a new step to an existing answer, or updating an existing step.</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>
<div class="body">
<div class="p">
<div class="note attention" id="rich_content_flowbuilder__note_dmy_tj2_f2c">
<span class="attentiontitle"></span> <span class="ph">This article describes functionality that moved into legacy
status on February 2, 2025. On December 10, 2026, this functionality will no longer
be available. For more information, see <a href="https://support.zendesk.com/hc/en-us/articles/10487730059034" target="_blank">this announcement</a>.</span>
</div>
In bot builder, you can add rich content elements to some
of the steps in your AI agent’s answers. Rich content elements appear to
your customers in the Web Widget, mobile apps, social apps, and third-party
apps.</div>
<p class="p">Rich content elements can be added when you are
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4422584657434" target="_blank">creating a new answer</a>,
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/6707589714458#topic_l32_tf2_k1c" target="_blank">adding a new step to an existing answer</a>, or
updating an existing step.</p>
<p class="p">This article describes the following rich content types:</p>
<ul class="ul" id="rich_content_flowbuilder__ul_l4g_vsz_nvb">
<li class="li"><a class="xref" href="#topic_kh1_xsz_nvb">Adding images and gifs</a></li>
<li class="li"><a class="xref" href="#topic_ct2_xsz_nvb">Adding emoji</a></li>
<li class="li"><a class="xref" href="#topic_ewh_2nm_nwb">Adding button links</a></li>
</ul>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_kh1_xsz_nvb">
<h2 class="title topictitle2" id="ariaid-title2">Adding images and gifs</h2>
<div class="body">
<p class="p">You can add an image or an animated gif to your answer flow, to provide an
engaging experience, add screenshots or other
visuals to illustrate answers, and present products and services in a way that best
represents your brand.</p>
<p class="p">Images and gifs can be added to the following step types:</p>
<ul class="ul" id="topic_kh1_xsz_nvb__ul_jvb_ysz_nvb">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836323738-Understanding-answer-flow-step-types#topic_iqz_fwc_k4b" target="_blank">Send message</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836323738#topic_il3_pmj_tvb" target="_blank">Add carousel</a></li>
</ul>
<p class="p">To be included in an answer step, the image or gif must:</p>
<ul class="ul" id="topic_kh1_xsz_nvb__ul_b5l_zsz_nvb">
<li class="li">Have a web address that can be accessed by your customers. Don't add image URLs from restricted
help centers, as these won't be displayed in the answer.</li>
<li class="li">Be no larger than 10 MB</li>
<li class="li">Be one of the following image formats:
<ul class="ul" id="topic_kh1_xsz_nvb__ul_c5l_zsz_nvb">
<li class="li">bmp</li>
<li class="li">gif</li>
<li class="li">heic</li>
<li class="li">heif</li>
<li class="li">jfif</li>
<li class="li">jpg</li>
<li class="li">jpeg</li>
<li class="li">png</li>
<li class="li">svg+xml</li>
<li class="li">tiff</li>
<li class="li">tif</li>
<li class="li">webp</li>
</ul>
<p class="p"><strong class="ph b">To add an image or gif to a step</strong></p>
<ol class="ol" id="topic_kh1_xsz_nvb__ol_trd_3tz_nvb">
<li class="li">With the new or existing answer open in bot builder, click the
step type you want to add the image or gif to, or click the Add step
icon (
<img class="image" id="topic_kh1_xsz_nvb__image_mcx_4tz_nvb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/add_step_icon_flowb.png" width="15">) and select the step type to
create a new step.</li>
<li class="li">If you’re adding the image to a Send message step, click the
<strong class="ph b">Insert image</strong>
icon (
<img class="image" id="topic_kh1_xsz_nvb__image_mcx_4tz_nvx" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/add_image_icon.png" width="15">).</li>
<li class="li">Enter the image’s web address (required) and description
(optional), then click
<strong class="ph b">Done</strong>.</li>
<li class="li">Finish configuring the step, then click
<strong class="ph b">Done</strong>
at the top
of bot builder.
<p class="p">The image or gif appears in the step preview.</p>

The
image, as well as any other updates, will not appear to the customer
until you
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4422584657434-Building-a-bot-using-answers#topic_vcg_44p_qtb" target="_blank">publish the answer</a>.</li>
</ol>
</li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_ct2_xsz_nvb">
<h2 class="title topictitle2" id="ariaid-title3">Adding emoji</h2>
<div class="body">
<p class="p">You can use the emoji picker to add emoji to your answer flows.</p>
<p class="p">Emoji can be added to the following answer step types:</p>
<ul class="ul" id="topic_ct2_xsz_nvb__ul_e4w_ttz_nvb">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836323738-Understanding-answer-flow-step-types#topic_iqz_fwc_k4b" target="_blank">Send message</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836323738-Understanding-answer-flow-step-types#topic_mnf_gwc_k4b" target="_blank">Present options</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836323738-Understanding-answer-flow-step-types#topic_grj_gwc_k4b" target="_blank">Show help center articles</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836323738-Understanding-answer-flow-step-types#topic_zqr_gwc_k4b" target="_blank">Transfer to agent</a></li>
</ul>
<p class="p"><strong class="ph b">To add an emoji to a step</strong></p>
<div class="bodydiv">
<ol class="ol" id="topic_ct2_xsz_nvb__ol_k44_b5z_nvb">
<li class="li">With the new or existing answer open in bot builder, click the
message step you want to add the emoji to. Alternatively, click the
<strong class="ph b">Add
step</strong> icon (
<img class="image" id="topic_ct2_xsz_nvb__image_qkx_c5z_nvb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/add_step_icon_flowb.png" width="15">) and select the step type you want
to create.</li>
<li class="li">In the AI agent message box, enter or update any text as needed, and click the <strong class="ph b">Emoji</strong> icon
( <img class="image" id="topic_ct2_xsz_nvb__image_l5d_gvz_nvb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/emoji_picker.png" width="15">) to open the picker.</li>
<li class="li">Scroll or search for the emoji you want, then click it to add to the AI agent message.</li>
<li class="li">Finish configuring the step, then click
<strong class="ph b">Done</strong>
at the top of
bot builder.</li>
</ol>
<p class="p">The emoji appears in the step preview.</p>

The emoji, as well as
any other updates, will not appear to the customer until you
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4422584657434-Building-a-bot-using-answers#topic_vcg_44p_qtb" target="_blank">publish the answer</a>.
</div>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_ewh_2nm_nwb">
<h2 class="title topictitle2" id="ariaid-title4">Adding button links</h2>
<div class="body">
<p class="p">You can add buttons to steps in your answer flow. When a customer clicks a button,
they'll open an external link, such as a different knowledge base
or another page within the current website.</p>
<p class="p">You can add button links to the following step types:</p>
<ul class="ul" id="topic_ewh_2nm_nwb__ul_d1q_2nm_nwb">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836323738-Understanding-answer-flow-step-types#topic_iqz_fwc_k4b" target="_blank">Send message</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836323738#topic_il3_pmj_tvb" target="_blank">Add carousel</a></li>
</ul>
<p class="p"><strong class="ph b">To add a button link to a Send message step</strong></p>
<div class="p"><div class="div">
<ol class="ol" id="topic_ewh_2nm_nwb__ol_eyp_knm_nwb">
<li class="li">Open or create a new answer in bot builder, then click an existing
<strong class="ph b">Send message</strong> step or create a new one.</li>
<li class="li">Click <strong class="ph b">Add button</strong>.</li>
<li class="li">Enter the button’s web address and text, then click <strong class="ph b">Add</strong>.</li>
<li class="li">Finish configuring the step, then click <strong class="ph b">Done</strong> at the top of bot
builder.</li>
</ol>
<p class="p">You can add up to 10 button links to each Send message step.</p>
<p class="p">You can edit the button by clicking the <strong class="ph b">Options icon</strong> (<img class="image" id="topic_ewh_2nm_nwb__image_e4h_z34_nwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/ticket_field_options_icon.png">).</p>
The button, as well as any other updates,
will not appear to the customer until you <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/7232810932250#topic_ads_n1n_3bc" target="_blank">publish the AI agent</a>. </div></div>
<p class="p"><strong class="ph b">To add a button link to an Add carousel step</strong></p>
<div class="p"><div class="div">
<ol class="ol" id="topic_ewh_2nm_nwb__ol_yhs_jh4_nwb">
<li class="li">Open or create a new answer in bot builder, then click an existing
<strong class="ph b">Add carousel</strong> step or create a new one.</li>
<li class="li">Click a carousel panel.</li>
<li class="li">Click <strong class="ph b">Add button</strong> and select <strong class="ph b">Open link</strong> from the action
dropdown menu.</li>
<li class="li">Where requested, enter the button’s web address and text, then click
<strong class="ph b">Done</strong>.</li>
<li class="li">Finish configuring the step, then click <strong class="ph b">Done</strong> at the top of bot
builder.</li>
</ol>
<p class="p">You can edit the button by clicking the carousel panel's <strong class="ph b">Options
icon</strong> (<img class="image" id="topic_ewh_2nm_nwb__image_kvw_q3r_r5b" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/ticket_field_options_icon.png">).</p>
The button, as well as any other updates,
will not appear to the end user until you <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/7232810932250#topic_ads_n1n_3bc" target="_blank">publish the AI agent</a>. </div></div>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested1" id="topic_r1f_vqx_hzb">
<h2 class="title topictitle2" id="ariaid-title5">Saving responses</h2>
<div class="body">
<p class="p">You can add a button to save a variable and its value when a customer clicks a
carousel panel button. The variable and value can then be used downstream in bot
builder.</p>
<p class="p">A carousel panel can include a maximum of three buttons. These buttons can be a
mixture of buttons to save a response and buttons to open a link, but only one
button to save a response is allowed.</p>
<div class="p">
<strong class="ph b">To add a save response button</strong><ol class="ol">
<li class="li">Open or create a new answer in bot builder, then click an existing
<strong class="ph b">Add
carousel</strong>
step or create a new one.</li>
<li class="li">Click a carousel panel.</li>
<li class="li">Click
<strong class="ph b">Add button</strong>
and select
<strong class="ph b">Save response</strong> from the action
dropdown menu.</li>
<li class="li">Enter a descriptive button text to display to the customer.</li>
<li class="li">Enter a variable name and value to save. If you are using a dynamic
carousel, you can click the plus button to select a value from the
<strong class="ph b">Make
API</strong>
call.</li>
</ol>
</div>
<p class="p">If, for example, you create a <strong class="ph b">Send message</strong> step after the carousel, you can reference the
variable by clicking the plus button in <strong class="ph b">AI agent message</strong>.</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/5133127616282",
"url": "https://support.zendesk.com/hc/en-us/articles/5133127616282",
"headline": "Adding rich content to answers in bot builder (Legacy)",
"description": "You can add rich content such as images, gifs, emoji, and button links to steps in your AI agent's answers within the bot builder to enhance customer interactions across various platforms.",
"articleSection": "Using bot builder to create answers (Legacy)",
"datePublished": "2022-11-17T18:39:49+00:00",
"dateModified": "2026-05-12T16:31:52.703863+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/5133127616282"
},
"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>