Step 3: Add setContext Object

Now that you’ve set the query rule that specifies what the Search experience should do based on context received, you have to actually pass in the context. To set the context, you’ll need to pass in an object to the setContext function. There are two options to do so.

Option 1: Search Bar Integration

Generally you will place the setContext function in the onReady function, but setContext can be called any time after the Search library is initialized and before the user runs a search.

Looking at the search bar integration instructions (check out the step to initialize the library ), set the context below the addComponent call in the onReady function, like so (be sure to update any REPLACE_ME values as specified in that integration guide).

Note

If you are hosting data in the EU cloud region, update the code snippet based on the callouts in the Hosting Data in the EU Cloud Region section.

<head>
  <!-- Other stuff in the head here -->
  <link
    rel="stylesheet"
    type="text/css"
    href="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.css"
  />
  <script src="https://assets.sitescdn.net/answers-search-bar/v1.6/answerstemplates.compiled.min.js"></script>
  <script>
    const userData = {
      segment: "swift-fan",
      age: "34-55",
      gender: "male"
    };

    function initAnswers() {
      ANSWERS.init({
        apiKey: "REPLACE_ME_API_KEY",
        experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
        experienceVersion: "PRODUCTION",
        locale: "en", // e.g. en
        businessId: "REPLACE_ME_BUSINESS_ID",
        templateBundle: TemplateBundle.default,
        cloudRegion: "us", // replace with "eu" to host data in EU cloud region 
        cloudChoice: "multi",
        onReady: function() {
          ANSWERS.addComponent("SearchBar", {
            container: ".search_form",
            name: "search-bar", 
            redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
            placeholderText: "Search...",
          });
          //Set Context Function goes here
          ANSWERS.setContext(userData);
        },
      });
    }
  </script>
  <script
    src="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
    onload="ANSWERS.domReady(initAnswers)"
    async
    defer
  ></script>
</head>

You can see that userData is specified ahead of time and then that object is passed into setContext after the components are rendered. This is helpful since userData will usually come from some other system like a CDP, CRM, an analytics tool, or a cookie you set. You can also pass the user data object directly into setContext if you choose, such as:

ANSWERS.setContext({segment: "swift-fan", age: "34-55", gender: "male"});

To see this fully in action, here is a working example in CodeSandbox:

Option 2: Override the Theme

You can add context by directly editing the code in the Theme. Similarly, we need to call the setContext function after the Search library is initialized on the search results page. To do this, you will need to override the Theme using a Jambo Command and edit the script > after-init.js file. This file loads after the Search library is loaded on the page, which ensures you’re able to call the setContext() function:

ANSWERS.setContext({segment: "swift-fan", age: "34-55", gender: "male"});

Feedback

<% elem.innerText %>