Overview
This post provides one possible approach to integrating a multi-language Yext Search experience with a multi-locale Zendesk help center.
The goal is to ensure the language of the search experience dynamically adjusts according to the active locale in which the help center is being displayed.
Note: This post assumes you have a multi-language search experience and have already followed along with the Zendesk Integration Guide and have added Search to your site as described in Step 3. The following approach will involve updating several of the code snippets provided in that section of the guide.
Integration Approach
Creating Dynamic Content Items
This approach relies on the use of dynamic content items, a native feature of Zendesk supporting multi-language use cases. For an overview of creating and leveraging dynamic content in Zendesk Guide sites, see this help article.
We will be creating four separate dynamic content items for this approach. In each case, English will be used as the default language and additional variants will be added for all other languages in which your help site is available. The four items you’ll need to create are described below.
Search Locale
The locale will determine which language the search algorithms reference behind the scenes. In the Yext platform, “en” is the default English locale code, so this is used as the default value for the dynamic content item. As you can see below, I’ve also added “es” as the Spanish variant since that is the general Spanish locale code in Yext.
Search Experience Key
Multi-language Search experiences usually involve a separate Search backend for each language. This dynamic content item will reflect the experience key associated with each language’s unique backend config. For example, the experience key of my english Search backend is “dj-master” and the key for my spanish backend configuration is “dj-master-es”:
Search Redirect URL
This will be used to ensure the Yext Search Bar on the homepage, and any other page you decide to put it on, redirects to the proper language variant of the search results page. The exact URLs will depend on your help site. For example:
Search Placeholder Text
Lastly, we want to make sure the placeholder text that appears in the search bar will reflect the language of the site. For example:
Now that we have our dynamic content items created, we can reference them from within the help center theme’s code.
Adding Dynamic Content to your Help Center
Search Results Page
In Step 3 of the Zendesk Integration guide, you embedded Yext Search into the search_results.hbs template with the following snippet:
<div id="answers-container"></div>
<script src="https://[[businessId]].supportembed.com.pagescdn.com/iframe.js"></script>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
AnswersExperienceFrame.runtimeConfig.set('querySource', 'HELP_SITE');
if (HelpCenter.user.email != null) {
const visitor = {
id: HelpCenter.user.email,
idMethod: "ZD_EMAIL"
};
AnswersExperienceFrame.runtimeConfig.set("visitor", visitor);
}
AnswersExperienceFrame.init({});
})
</script>
Update the snippet to look like the following, adding in your own production URL:
{{#is help_center.locale 'en-us'}}
<div id="answers-container"></div>
{{else}}
<div id="answers-container" data-path="{{dc 'yext_search_locale'}}/index.html"></div>
{{/is}}
<script src="[[productionURL]]"></script>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
AnswersExperienceFrame.runtimeConfig.set('querySource', 'HELP_SITE');
if (HelpCenter.user.email != null) {
const visitor = {
id: HelpCenter.user.email,
idMethod: "ZD_EMAIL"
};
AnswersExperienceFrame.runtimeConfig.set("visitor", visitor);
}
AnswersExperienceFrame.init({});
})
</script>
Assuming your search frontend is english by default, this updated code does a few things:
- Checks the current locale the help center is being viewed in.
- If the current locale is ‘en-us’, it will render the default search experience just like the guide’s original code does.
- If the current locale is not ‘en-us’, it will adjust the embed snippet to render the search experience in the language that matches the site’s current locale.
The language that the search experience is rendered in is controlled by the data-path attribute of the container. The value passed as the data-path in this code snippet uses the dynamic content item we created earlier for the locale, ensuring this will update automatically as the locale changes.
Below are some screenshots showing the search experience dynamically adjusting it’s language based on the current locale of the site:
English home:
Spanish home:
English results:
Spanish results:
Hope this is helpful,
DJ