Multi-Lang Yext Search Integration with SF Experience Cloud Sites

Overview

This post provides an overview of how a multi-language Yext Search experience could be integrated with a multi-locale Salesforce Experience Cloud site.

The goal of the approach shown below is to ensure the language of the search experience dynamically adjusts according to the active locale in which the Experience Cloud site is being viewed. This approach relies on the creation of custom Lightning Web Components (LWCs) which are added to the site via Experience Builder.

This post assumes foundational understanding of Salesforce LWCs and standard Yext Search integrations. These topics can be explored in dedicated guides found on Yext Hitchhikers and Salesforce Trailhead.

NOTE: This post only outlines one possible approach to a multi-language Search integration with SF Experience Cloud. The following approach and any linked resources should be used as inspiration for how an integration could be achieved, not as prescriptive instruction for the exact method to pursue.

Integration Approach

Step 1: Create an LWC for the Search Bar

The goal of this component, full example here, is to adapt the standard Search Bar integration instructions to work within the LWC framework. This involves adapting the two main integration steps: initializing the library and placing the Search Bar.

Initializing the Library

The standard integration approach utilizes the Search UI Javascript SDK. As shown in this step of the standard integration guide, there are several related JS and CSS assets that need to be added to a page before a functioning Search Bar can be rendered.

To accommodate this within the LWC framework, these assets can be added to Salesforce as Static Resources by navigating to Setup > Static Resources. This approach involves downloading the following assets and uploading them as Static Resources:

Once the assets are uploaded as Static Resources, they can be imported and referenced within the LWC. An example of the Search Bar LWC main script can be seen here. This script loads the assets, initializes the Search experience and adds the Search Bar to the page.

Making the Search Bar Language Dynamic

The other code in the main script is used to make the Search Bar initialization dynamic so it reacts to the current language of the Experience Cloud site. To do this, two mapping objects were created.

The first maps each Salesforce locale to the appropriate Yext Search locale. In this example, the Experience Cloud site is published in both English (en-US) and Spanish (es):

In Yext, locales may use a slightly different code than Salesforce. For example, the English locale code in Yext is just “en” as opposed to being “en-US” in Salesforce. This mapping object takes care of any discrepancies.

There is also a mapping object which includes the relevant Search experience values for each locale that need to be input into the Search Bar initialization function. Example:

This setup relies on separate Search backend configurations for each locale. When the Search Bar initialization function runs, the experience key used will be different depending on which locale the Experience Cloud site is being viewed in.

The initialization function looks at the current locale that the Experience Cloud site is being viewed in, maps that value to the appropriate Yext locale code, and uses that Yext locale code to find the correct experience key and placeholder text to use for the current locale of the site:

The “redirectUrl” value would be the full URL of the search results page that visitors should be redirected to after running a query.

Add Trusted Sites

To allow query suggestions to work as expected, the Yext Search Autocomplete endpoint must be added as a CSP Trusted Site in Salesforce. This can be done via Setup > CSP Trusted Sites.

Using this approach, the following endpoint was added as a trusted site: https://liveapi-cached.yext.com.

Now the Search Bar component is ready to go. The next step is to create a LWC for the Search Results Page.

Step 2: Create an LWC for the Search Results Page

Adding the IFrame Script as a Static Resource

Similar to the Search Bar LWC, the goal of this component is to adapt the standard JS snippet integration process to work within the LWC framework. Full example for the LWC can be seen here.

Due to Salesforce security policies, the script that is referenced in the standard JS snippet needs to be downloaded locally and uploaded as a Static Resource in Salesforce. To generate the script, navigate in the browser to “REPLACE_ME_PRODUCTION_URL/iframe.js”.

For example, if the Production URL for the Search experience is https://dj-demo.jambo.com.pagescdn.com, the script URL would be https://dj-demo.jambo.com.pagescdn.com/iframe.js. Navigating to this URL would generate the script to download and add as a Static Resource.

Making the Search Results Language Dynamic

The standard JS snippet needs to be adjusted to ensure the Search Results dynamically adjust to the proper language. With this approach, the “data-path” attribute is utilized to adjust the language of the search results based on the current locale of the Experience Coud site.

Step 3: Add the LWCs to the site via Experience Builder

After writing the code for the functionality of the LWCs, they each need to be made available for use on Experience Cloud sites. Availability of LWCs is specified within the meta.xml file in each LWC repo. Two particular targets must be specified as shown below:

NOTE: The URL of the search results page you create for the Experience Cloud site is the value that should be used as the “redirectUrl” value in the initialization function written in the Search Bar LWC main script. This ensures that when a visitor runs a query in the search bar, it will properly redirect them to the search results page.

Now these LWCs are ready to be deployed to the relevant Salesforce Org and added to the Experience Cloud site as needed! Below are example screenshots of this approach in action.

English version of the site renders the English search bar:

English search bar redirects to English search results:

Spanish version of the site renders the Spanish search bar:

Spanish search bar redirects to Spanish search results: