Creating a conversational help center experience with the new Lisbon theme (EAP)

<body>
<p id="docs-hc-snippet" style="display: none;">The conversational help center is an AI-powered help center experience that combines natural-language question answering with standard help center navigation. End users can enter questions in a prompt field to receive quick answers generated from help center content, along with links to the source articles used to support the response. Users can also continue to browse categories, sections, and articles, resulting in a conversational experience that supplements existing self-service options rather than replacing them entirely.</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_with_guide_all">
<table>
<tbody>
<tr>
<td>
<strong>Support with</strong>
</td>
<td>Knowledge Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Summary: <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">You can create an AI-powered conversational help center with the Lisbon theme EAP, combining quick answers from help center content with browsing, follow-up questions, and source article links. It uses a no-code theme editor for branding, hero text, featured banners, and alerts, and supports light or dark mode, multilingual content, and guided self-service.</p>
</div>

<div class="body">

<div class="p">
<div class="note" id="topic-1__note_cxf_x3d_tjc">
<span class="notetitle">Note:</span> The conversational help center is currently in an early access
program (EAP). See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/11007001237274" target="_blank">Announcing the conversational help center (EAP)</a>. </div>
</div>
<p class="p" dir="ltr">The conversational help center is an AI-powered help center experience that
combines natural-language question answering with standard help center navigation. End users
can enter questions in a prompt field to receive quick answers generated from help center
content, along with links to the source articles used to support the response. Users can also
continue to browse categories, sections, and articles, resulting in a conversational
experience that supplements existing self-service options rather than replacing them
entirely.</p>
<p class="p" dir="ltr">The conversational help center is intended to help customers improve self-service
outcomes while reducing the effort required to configure and maintain the experience. It
combines AI-powered answering with familiar help center content, which can help users get to
relevant information more quickly.</p>
<p class="p" dir="ltr">Knowledge admins can set up the conversational help center by installing the Lisbon
theme and configuring the available experience settings in the theme editor. These settings
include branding and layout options for elements such as the hero area, featured banners,
alerts, and color treatments. </p>
<div class="p">This article contains the following topics:<ul class="ul" id="topic-1__ul_tgf_nxc_tjc">
<li class="li"><a class="xref" href="#topic_csz_nxc_tjc">Understanding the conversational help center</a></li>
<li class="li"><a class="xref" href="#topic_sxz_41d_tjc">Requirements</a></li>
<li class="li"><a class="xref" href="#topic_ubb_35z_fjc">Turning on the conversational help center</a></li>
<li class="li"><a class="xref" href="#topic_qwx_q1d_tjc">Install the Lisbon theme</a></li>
<li class="li"><a class="xref" href="#topic_zkl_t1d_tjc">Configuring the conversational help center</a></li>
<li class="li"><a class="xref" href="#topic_xlw_lnd_tjc">Setting up multilingual content</a></li>
<li class="li"><a class="xref" href="#topic_ub1_dqb_xjc">Preview and publish the conversational help center</a></li>
<li class="li"><a class="xref" href="#topic_lrj_tnd_tjc">Customizing the end user experience</a></li>
<li class="li"><a class="xref" href="#topic_tmm_5nd_tjc">Limitations of the conversational help center</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_csz_nxc_tjc">
<h2 class="title topictitle2" id="ariaid-title2">Understanding the conversational help center</h2>
<div class="body">
<p class="p" dir="ltr">The conversational help center gives end users a guided self-service experience.
Instead of relying only on keyword search or browsing through categories and sections, users
can also ask questions in natural language and receive quick answers based on published help
center content. Quick answers display links to the source articles used to generate that
answer, which gives users an immediate response while preserving access to the underlying
documentation.</p>
<p class="p" dir="ltr">After reviewing the quick answer, users can decide how to continue. Depending on
the UI and configuration, they can either open a source article link or type a follow up
question in the <strong class="ph b">Ask follow-up</strong> field.</p>
<p class="p"><img class="image img-screenshot" id="topic_csz_nxc_tjc__image_ktp_jyj_vjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-follow-up-question.png" width="600"></p>
<p class="p" dir="ltr">If the user asks a follow-up question, the experience can move from a
quick-answer interaction into a broader conversation. At that point, behavior depends on how
your AI agent and procedures are configured. For example, the AI agent might continue the
conversation, guide the user through a supported workflow, hand the conversation off to a
human agent, or direct the user toward ticket creation.</p>
<p class="p"><img class="image img-screenshot" id="topic_csz_nxc_tjc__image_btq_qyj_vjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-fu-question.png" width="600"></p>
<p class="p">If the system can’t find a relevant answer, the user sees an empty state. This indicates
that no supported answer was found for the question and signals that the user may need to
try a different query or continue through another support path.</p>
<p class="p"><img class="image img-screenshot" id="topic_csz_nxc_tjc__image_j4z_xyj_vjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conf-hc-support-path.png" width="600"></p>
<p class="p" dir="ltr">The conversational experience is delivered through the Lisbon theme. The theme
features a conversational layout and a set of UI-based customization options that knowledge
admins can manage without editing code. These options include branding controls, a
configurable hero area, featured banners, global alerts, dark mode support, and
mobile-compatible layouts. For more information, see <a class="xref" href="#topic_zkl_t1d_tjc">Configuring the conversational help center</a></p>
<p class="p"><img class="image img-screenshot" id="topic_csz_nxc_tjc__image_zyz_dnt_tjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-hc-home.jpg" width="700"></p>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_sxz_41d_tjc">
<h2 class="title topictitle2" id="ariaid-title3">Requirements</h2>
<div class="body">
<p class="p" dir="ltr">Before you install and use the conversational help center, confirm that the
required supporting features are already configured in your account. The conversational
experience depends on these features for answer generation and follow-up behavior.</p>
<div class="p" dir="ltr">Your account must have the following to use the conversational experience:<ul class="ul" id="topic_sxz_41d_tjc__ul_jdy_2kt_tjc">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/8079579364250" target="_blank">Quick answers enabled</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/8724978128282" target="_blank">AI agents configured</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408821673242#topic_a52_wcj_vz" target="_blank">Web widget embedded in your help center</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/8008427696410" target="_blank">Multi-conversations turned on</a></li>
<li class="li">The <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/8008427696410" target="_blank">new conversation button in multi-conversations</a>
is selected. Deselecting this option will block the conversational help center
experience.</li>
</ul>
</div>
<p class="p" dir="ltr">Keep the following implementation considerations in mind:</p>
<ul class="ul" id="topic_sxz_41d_tjc__ul_f5x_1nd_tjc">
<li class="li" dir="ltr">If you support multiple languages in your help center, use <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408882999066" target="_blank">dynamic content </a>where appropriate.</li>
<li class="li" dir="ltr">Follow-up conversations depend on your AI agent procedures. If procedures are
incomplete or unavailable for a user’s request, the experience may hand off to another
support path.</li>
<li class="li">
<a class="xref" href="#topic_ub1_dqb_xjc">Review how your existing articles appear
when using dark mode</a>. Make any necessary adjustments before publishing the
theme.</li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_ubb_35z_fjc">
<h2 class="title topictitle2" id="ariaid-title4">Turning on the conversational help center</h2>
<div class="body">
<p class="p">You can enroll in the conversational help center EAP from within Admin center. After you
select the EAP and update your settings, you'll have automatic access to the conversational
help center functionality. </p>
<div class="p">
<strong class="ph b">To enroll in the conversational help center EAP</strong><ol class="ol" id="topic_ubb_35z_fjc__ol_ifz_x5z_fjc">
<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_ubb_35z_fjc__image_ekg_q5k_rfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/icon_ai.png">
<strong class="ph b">AI</strong> in the sidebar, then select <strong class="ph b">Knowledge</strong> .</span></li>
<li class="li">Under Lisbon theme, click <strong class="ph b">Turn on the Conversational Help Center - Lisbon Theme
(Early Access Program)</strong>.<p class="p"><img class="image" id="topic_ubb_35z_fjc__image_nfm_vx4_sfc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-neweap-adminctr.png" width="500"></p>
</li>
<li class="li">Click <strong class="ph b">Save</strong>.</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested1" id="topic_qwx_q1d_tjc">
<h2 class="title topictitle2" id="ariaid-title5">Install the Lisbon theme</h2>
<div class="body">
<p class="p" dir="ltr">After you enroll in the EAP, you can install the Lisbon theme from the help
center theme options. </p>
<p class="p" dir="ltr"><strong class="ph b">To install the Lisbon theme</strong></p>
<ol class="ol" id="topic_qwx_q1d_tjc__ol_ndv_bnd_tjc">
<li class="li">
<span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, click <strong class="ph b">Customize design</strong>
(<img class="image" id="topic_qwx_q1d_tjc__image_hzf_jfx_s2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.</span><p class="p">The Themes page opens.</p>
</li>
<li class="li">Click <strong class="ph b">Add theme</strong>, then select <strong class="ph b">Add Lisbon theme</strong>.<p class="p"><img class="image img-screenshot" id="topic_qwx_q1d_tjc__image_m2m_hn2_tjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-convhc-addlisbon.jpg" width="800"></p>
</li>
<li class="li" dir="ltr">
<p class="p" dir="ltr">Continue to <a class="xref" href="#topic_zkl_t1d_tjc">Configuring the conversational help center</a>.</p>
</li>
</ol>
</div>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested1" id="topic_zkl_t1d_tjc">
<h2 class="title topictitle2" id="ariaid-title6">Configuring the conversational help center</h2>
<div class="body">
<div class="p" dir="ltr">After you install the Lisbon theme, you can configure the conversational help
center without code, through the theme editor. You can use the Lisbon theme editor to
configure the following elements:<ul class="ul" id="topic_zkl_t1d_tjc__ul_blh_ykc_xjc">
<li class="li">
<strong class="ph b">Theme branding</strong>: Controls the colors, logo, and help center name that align your
help center with your brand.</li>
<li class="li">
<strong class="ph b">Hero area</strong>: Main content area at the top of the help center home page. You can
use this area to show a custom greeting and supporting text (for example, "Good morning
How can I help you?" in the example below) and custom placeholder text in the search
field (for example, "Ask anything" in the example below).</li>
<li class="li">
<strong class="ph b">Featured banners</strong>: A banner (either an image, as shown below, or colored text)
used to emphasize important announcements or direct users to important actions. In
addition to the banner itself, you can use this section to customize a title, message,
and button (with button text).</li>
<li class="li">
<strong class="ph b">Global alerts</strong>: Colored bands that appear at the top of the help center to
display high-visibility messages. You can use global alert banners to display Info,
Warning, Error, or Success messages with accompanying links to help direct help center
visitors to more information.</li>
</ul>
</div>
<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_www_rtk_tjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-convo-hc-themepage.jpg" width="800"></p>
<div class="p">
<strong class="ph b">To configure the conversational help center</strong><ol class="ol" id="topic_zkl_t1d_tjc__ol_mlk_xjc_xjc">
<li class="li"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, click <strong class="ph b">Customize design</strong>
(<img class="image" id="topic_zkl_t1d_tjc__image_hzf_jfx_s2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.</span></li>
<li class="li">Click <strong class="ph b">Customize</strong> on the Lisbon theme you want to update. <p class="p">The theme page
opens.</p>
</li>
<li class="li">To <strong class="ph b">configure the theme branding</strong>, do the following:<ol class="ol" id="topic_zkl_t1d_tjc__ol_ayx_yjc_xjc" type="a">
<li class="li" dir="ltr">
<p class="p" dir="ltr">In the Settings panel, click <strong class="ph b">Colors</strong>.</p>
<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_m2f_1kc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/jnw-convhc-colors.jpg" width="225"></p>
</li>
<li class="li">Click the color box beside any of the options, then use the color selector to
choose a color or manually enter the number for your color.<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_n2f_1kc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-color-picker.jpg" width="225"></p>
<p class="p">The
color updates in the preview window.</p>
</li>
<li class="li">In the Settings panel, click <strong class="ph b">Brand</strong>.<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_o2f_1kc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-convhc-logo-brand.jpg" width="200"></p>
</li>
<li class="li">Click the displayed logo or favicon to browse to and select an image:<ul class="ul" id="topic_zkl_t1d_tjc__ul_p2f_1kc_xjc">
<li class="li">
<strong class="ph b">Logo (light) and Logo (dark)</strong>: Your logo as it appears in light mode or
dark mode. Users can select light or dark mode by clicking the Open sidebar icon
(<img class="image" id="topic_zkl_t1d_tjc__image_q2f_1kc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-lightdarkmode.jpg" width="20">) on the help center home page, then
selecting the color scheme. </li>
<li class="li">
<strong class="ph b">Favicon</strong>: The image representing your help center that appears on the
user browser tab and address bar.</li>
</ul>
<p class="p">The recommended image size is 200px by 50px. If the width or height of the
image exceeds the recommended size, the image is scaled down to keep the aspect
ratio constant. The image background should be transparent or match the background
color of the header.</p>
</li>
<li class="li">Click <strong class="ph b">Show help center name</strong> to display your help center name next to your
logo on the help center.</li>
</ol>
</li>
<li class="li">To <strong class="ph b">configure the hero area</strong>, do the following:<ol class="ol" id="topic_zkl_t1d_tjc__ol_xn5_2kc_xjc" type="a">
<li class="li" dir="ltr">
<p class="p" dir="ltr">In the Settings panel, click <strong class="ph b">Hero area</strong>.</p>
<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_zpy_fkc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hero-area.jpg" width="225"></p>
</li>
<li class="li" dir="ltr">To display a custom greeting in place of the "How can I help you?" text
on your help center home page, select <strong class="ph b">Show personalized greeting</strong>, then in the
<strong class="ph b">Supporting text</strong> field, type the greeting you want displayed.<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_aqy_fkc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-greeting.jpg" width="500"></p>
</li>
<li class="li" dir="ltr">To display a custom placeholder in the search field (instead of the
default "Ask anything"), then in the <strong class="ph b">Search placeholder </strong>field, type the text
you'd like to display.<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_bqy_fkc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-search-placeholder.jpg" width="700"></p>
</li>
</ol>
</li>
<li class="li">To <strong class="ph b">add a featured banner</strong>, do the following:<ol class="ol" id="topic_zkl_t1d_tjc__ol_y5q_3kc_xjc" type="a">
<li class="li" dir="ltr">
<p class="p" dir="ltr">In the Settings panel, click <strong class="ph b">Featured</strong>.</p>
<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_p2k_jkc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-featured.jpg" width="225"></p>
</li>
<li class="li" dir="ltr">Select the <strong class="ph b">Show featured banner</strong> check box to display a banner on
the home page of your help center, directly below the search bar.</li>
<li class="li">Use the following fields to configure the way the featured banner appears to
users:<ul class="ul" id="topic_zkl_t1d_tjc__ul_q2k_jkc_xjc">
<li class="li">
<strong class="ph b">Title</strong>: Enter heading text that appears on the banner image. </li>
<li class="li">
<strong class="ph b">Message</strong>: Enter text that appears directly below the title on the banner
image.</li>
<li class="li">
<strong class="ph b">Text color</strong>: Select the color that you want to apply to the Title and
Message text.</li>
<li class="li">
<strong class="ph b">Background image</strong>: Select the image that you want to use for the banner.
The maximum size for image files is 5 MB. </li>
</ul>
</li>
<li class="li" dir="ltr">
<p class="p" dir="ltr">Click <strong class="ph b">Show button</strong> to add a button to the banner.</p>
</li>
<li class="li">Use the following fields to configure the way the button appears to users. <ul class="ul" id="topic_zkl_t1d_tjc__ul_r2k_jkc_xjc">
<li class="li">
<strong class="ph b">Button text</strong>: Enter a call to action that you want to appear on the
button. </li>
<li class="li">
<strong class="ph b">URL</strong>: Enter the URL link that you want to open when users click the
button.</li>
</ul>
</li>
</ol>
</li>
<li class="li">To <strong class="ph b">add a global alert</strong>, do the following:<ol class="ol" id="topic_zkl_t1d_tjc__ol_twv_nkc_xjc" type="a">
<li class="li" dir="ltr">
<p class="p" dir="ltr">In the Settings panel, click <strong class="ph b">Alert</strong>.</p>
<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_qlz_nkc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-global-alert-panel.png" width="225"></p>
</li>
<li class="li" dir="ltr">
<p class="p" dir="ltr">To show the alert banner at the top of your help center, select the
<strong class="ph b">Show alert </strong>check box.</p>
</li>
<li class="li">In the <strong class="ph b">Type</strong> drop down, select the banner style that you want to display:<ul class="ul" id="topic_zkl_t1d_tjc__ul_rlz_nkc_xjc">
<li class="li">
<strong class="ph b">Info</strong>: Light blue</li>
<li class="li">
<strong class="ph b">Warning</strong>: Yellow</li>
<li class="li">
<strong class="ph b">Error</strong>: Red</li>
<li class="li">
<strong class="ph b">Success</strong>: Green</li>
</ul>
</li>
<li class="li" dir="ltr">Configure the following fields to customize the message and link
displayed on the banner:<ul class="ul" id="topic_zkl_t1d_tjc__ul_slz_nkc_xjc">
<li class="li">
<strong class="ph b">Title</strong>: Heading for the banner </li>
<li class="li">
<strong class="ph b">Message</strong>: Text that you want to display to users (maximum of 120
characters)</li>
<li class="li">
<strong class="ph b">Show link</strong>: When selected, displays a destination URL that users can
click to open a linked web page in a new browser tab.</li>
<li class="li">
<strong class="ph b">Link text</strong>: Text displayed on the link (for example, call to action or
label)</li>
</ul>
<p class="p">The following image shows how these configuration items appear to users on
the green Success banner.</p>
<p class="p"><img class="image img-screenshot" id="topic_zkl_t1d_tjc__image_tlz_nkc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-global-alert-configured.png" width="800"></p>
</li>
<li class="li" dir="ltr">
<p class="p" dir="ltr">Preview the alert.</p>
</li>
</ol>
</li>
<li class="li" dir="ltr">
<p class="p" dir="ltr">Click <strong class="ph b">Save</strong>.</p>
</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title7" class="topic nested1" id="topic_xlw_lnd_tjc">
<h2 class="title topictitle2" id="ariaid-title7">Setting up multilingual content</h2>
<div class="body">
<p class="p" dir="ltr">If your help center supports multiple languages, use dynamic content for text
elements that vary by language. This is especially important for theme-managed text such as
hero messages, placeholders, banners, and alerts. Without dynamic content, users may see
text that doesn’t match their selected help center language. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408834328090" target="_blank">Localizing help center content</a>.</p>
<div class="note" id="topic_xlw_lnd_tjc__note_t1v_xhl_vjc">
<span class="notetitle">Note:</span> To use AI to quickly translate help center articles, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/8717609637018" target="_blank">Translating articles in your help center using AI</a>.</div>
</div>
</div>
<div aria-labelledby="ariaid-title8" class="topic nested1" id="topic_ub1_dqb_xjc">
<h2 class="title topictitle2" id="ariaid-title8">Preview and publish the conversational help center</h2>
<div class="body">
<p class="p">After enabling and configuring the Lisbon theme, you can preview the theme, make any
necessary adjustments, then make it live in your help center. Once the theme is live, end
users will see it by default when using your help center.</p>
<div class="p">
<strong class="ph b">To preview and publish the conversational help center</strong><ol class="ol" id="topic_ub1_dqb_xjc__ol_dfj_rqb_xjc">
<li class="li"><span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, click <strong class="ph b">Customize design</strong>
(<img class="image" id="topic_ub1_dqb_xjc__image_hzf_jfx_s2c" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/guide_icon_customize.png">) in the sidebar.</span></li>
<li class="li">Click <strong class="ph b">Customize</strong> on the Lisbon theme you want to update. <p class="p">The theme opens to
the Preview page.</p>
<p class="p"><img class="image img-screenshot" id="topic_ub1_dqb_xjc__image_ew2_frb_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-previewtheme.png" width="700"></p>
</li>
<li class="li">Use the theme preview to click through your help center and review the user
experience. Specifically, be sure to check the following:<ul class="ul" id="topic_ub1_dqb_xjc__ul_up2_nrb_xjc">
<li class="li">How your existing articles appear in both light mode and dark mode</li>
<li class="li">Appearance of your customized UI elements (for example, hero image, banner text,
etc.)</li>
<li class="li">Appearance of multilingual content (if configured)</li>
<li class="li">Theme branding</li>
<li class="li">How the conversational experience appears to end users</li>
</ul>
</li>
<li class="li">If you need to make further adjustments, make them at this time. <p class="p">When you're
satisfied with the user experience and ready to make the help center live, continue to
the next step.</p>
</li>
<li class="li">On the sidebar click <strong class="ph b">&lt; Back</strong> to return to the Theme page.<p class="p"><img class="image img-screenshot" id="topic_ub1_dqb_xjc__image_gfj_ksb_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-back-pub.png" width="250"></p>
</li>
<li class="li">In the Theme library, click the option menu icon (<img class="image" id="topic_ub1_dqb_xjc__image_sdl_b1q_ccb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/theming_theme_menu_gear2.png">) on the theme that you want to make live, then select <strong class="ph b">Set
as live theme</strong>. <p class="p"><img class="image" id="topic_ub1_dqb_xjc__image_vvw_ysb_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-makelive.png" width="250"></p>
</li>
<li class="li">Confirm that you want to make this theme live for your help center.<p class="p">The theme moves
to the top of the page and is applied to your live help center.</p>
</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title9" class="topic nested1" id="topic_lrj_tnd_tjc">
<h2 class="title topictitle2" id="ariaid-title9">Customizing the end user experience</h2>
<div class="body">
<div class="p" dir="ltr">The conversational experience includes a side panel that gives end users access
to conversation tools and light or dark mode settings. Users can use the side panel to:<ul class="ul" id="topic_lrj_tnd_tjc__ul_x42_ywq_vjc">
<li class="li">Access the conversation experience</li>
<li class="li">Set light or dark mode</li>
<li class="li">Select the help center language (if multiple languages are configured)</li>
</ul>
</div>
<div class="p">
<strong class="ph b">To use the side panel features</strong><ol class="ol" id="topic_lrj_tnd_tjc__ol_srs_wgc_xjc">
<li class="li">Open the help center, then click the side panel icon (<img class="image" id="topic_lrj_tnd_tjc__image_wzp_bhc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-lightdarkmode.jpg" width="20">) on the lower left side of the help center home
page.<p class="p">The side panel opens.</p>
<p class="p"><img class="image img-screenshot" id="topic_lrj_tnd_tjc__image_xzp_bhc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-sidepanel-ovw.png" width="800"></p>
</li>
<li class="li">To <strong class="ph b">access the conversation experience</strong>, do one of the following:<ul class="ul" id="topic_lrj_tnd_tjc__ul_yhr_dhc_xjc">
<li class="li">To start a new conversation, click the + icon on the top right of the side
panel.<p class="p">The conversation view opens to a new conversation. You can type your
message in the message field to begin your conversation.</p>
<p class="p"><img class="image img-screenshot" id="topic_lrj_tnd_tjc__image_zhr_dhc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-conv-view-add.png" width="600"></p>
</li>
<li class="li">To open an existing conversation, click the conversation from the side
panel.<p class="p">The conversation opens in the conversation view. You can type a message
in the message field to continue the conversation.</p>
</li>
</ul>
</li>
<li class="li">To <strong class="ph b">set light or dark mode</strong>, do the following:<ol class="ol" id="topic_lrj_tnd_tjc__ol_sfv_shc_xjc" type="a">
<li class="li">On the lower left of the side panel, click the color mode icon (<img class="image" id="topic_lrj_tnd_tjc__image_tfv_shc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-hc-screenmode-iclon.png" width="15"> to open the menu.<p class="p"><img class="image img-screenshot" id="topic_lrj_tnd_tjc__image_ufv_shc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-lightdarkmode-menu.png" width="300"></p>
</li>
<li class="li">Select the light or dark mode setting that you want to use for your help
center:<ul class="ul" id="topic_lrj_tnd_tjc__ul_vfv_shc_xjc">
<li class="li">
<strong class="ph b">Light mode</strong><p class="p"><img class="image img-screenshot" id="topic_lrj_tnd_tjc__image_wfv_shc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-lightmode.png" width="500"></p>
</li>
<li class="li">
<strong class="ph b">Dark mode</strong>:<p class="p"><img class="image img-screenshot" id="topic_lrj_tnd_tjc__image_xfv_shc_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-darkmode.png" width="500"></p>
</li>
<li class="li">
<strong class="ph b">Match system appearance</strong>: Match help center to current system
settings.</li>
</ul>
</li>
</ol>
</li>
<li class="li">To <strong class="ph b">select the help center language</strong>:<ol class="ol" id="topic_lrj_tnd_tjc__ol_lgk_l3c_xjc" type="a">
<li class="li">On the lower left of the side panel, click the language icon (<img class="image" id="topic_lrj_tnd_tjc__image_mgk_l3c_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/conv-hc-language-icon-sel.png" width="20">) to open the language selection menu.</li>
<li class="li">Select the language that you want to use for your help center.<p class="p"><img class="image img-screenshot" id="topic_lrj_tnd_tjc__image_ngk_l3c_xjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-conv-hc-languagesel.png" width="200"></p>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title10" class="topic nested1" id="topic_tmm_5nd_tjc">
<h2 class="title topictitle2" id="ariaid-title10">Limitations of the conversational help center</h2>
<div class="body">
<p class="p" dir="ltr">For this EAP, the conversational help center includes the following
limitations:</p>
<ul class="ul" id="topic_tmm_5nd_tjc__ul_sfm_vnd_tjc">
<li class="li" dir="ltr">Code-based theme customization isn’t part of the intended setup
experience.</li>
<li class="li" dir="ltr">Branding controls are more limited than in fully customized themes.</li>
<li class="li" dir="ltr">The search input experience is simplified and doesn’t include instant search
or predefined suggestions.</li>
<li class="li" dir="ltr">Follow-up behavior depends on AI agent configuration and procedures.</li>
<li class="li">The following help center features are not available in the Lisbon theme:<ul class="ul" id="topic_tmm_5nd_tjc__ul_g34_zxk_vjc">
<li class="li">All community features (including user profiles, subscriptions, and
contributions)</li>
<li class="li">New request form</li>
<li class="li">Service catalog</li>
<li class="li">Approvals</li>
<li class="li">Article voting</li>
<li class="li">Article comments</li>
</ul>
</li>
<li class="li">By default, the Lisbon theme displays a "Built with Zendesk" logo on the side panel that
originates from the Web Widget. If you want to remove this link, open <strong class="ph b">Admin Center &gt;
Channels &gt; Messaging</strong>. On the Messaging page, in the edit view for the General
channel, expand the Style section. Deselect <strong class="ph b">Show Zendesk logo</strong>. For more
information, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4500747797914" target="_blank">Configuring the name and appearance of the Web
Widget</a>.</li>
</ul>
</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/10912251485338",
"url": "https://support.zendesk.com/hc/en-us/articles/10912251485338",
"headline": "Creating a conversational help center experience with the new Lisbon theme (EAP)",
"description": "You can install and configure the Lisbon theme to enable a conversational help center that combines natural-language answers with help center browsing, then preview and publish it.",
"articleSection": "Using themes and customizing your help center",
"datePublished": "2026-06-17T14:43:19+00:00",
"dateModified": "2026-08-28T15:04:31.121710+00:00",
"inLanguage": "en",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/10912251485338"
},
"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",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Knowledge",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405298860954"
}
}
}</script><script id="ai-summary-script">
//<![CDATA[
const ai_summary_style = document.createElement('style');
ai_summary_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-ai-summary{background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 6px;margin-bottom:16px}#article-body #docs-ai-summary #docs-ai-summary-toggle{font-size:.9em;font-weight:700;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#article-body #docs-ai-summary #docs-ai-summary-toggle #up-triangle{margin-left:auto;padding-right:10px;display:none}#article-body #docs-ai-summary #docs-ai-summary-toggle #down-triangle{margin-left:auto;padding-right:10px}#article-body #docs-ai-summary #docs-ai-summary-content{font-size:.9em;padding-left:25px;padding-right:25px;margin-bottom:12px}`;
document.head.appendChild(ai_summary_style);

const toggleAISummary = () => {
const summary = document.getElementById("docs-ai-summary-content");
const upTriangle = document.getElementById("up-triangle");
const downTriangle = document.getElementById("down-triangle");
if (summary.style.display === "none") {
summary.style.display = "block";
upTriangle.style.display = "none";
downTriangle.style.display = "inline";
} else {
summary.style.display = "none";
upTriangle.style.display = "inline";
downTriangle.style.display = "none";
}
};

document.getElementById("docs-ai-summary-toggle").addEventListener("click", toggleAISummary);
//]]>
</script>
</body>