Step 4: Configure your Search Landing Page and Search Bar

Step 1: Pass the Token to Search

Next, you’ll need to make sure that Search can accept the token you have minted. You’ll need to make the following changes to your repo, depending on if your Search experience is hosted on an iFrame, Core or Headless, or on a subdomain. You can refer to hitchhikers for more information between a subdomain here and an iFrame here .

Note

Make sure you are on version 1.27 of Theme or later.

Option 1 (Recommended): JS Snippet (iFraming)

The JS Snippet option is creating an iframe that pulls in the Search page. While that page is technically still accessible (you could inspect it and pull off the iframe src), the page itself will not load the Search experience unless a JWT is provided and the init function is called. The page itself is not gated by authentication.

If you’re using the JS Snippet option and have CTAs that click out to entity pages hosted on sites, your users will be redirected through an authentication flow. They should not need to log in again, but since Sites is on a separate domain, this authentication is necessary.

The following steps will be very similar to Using JWT with Search . In addition to those steps:

1. In your global_config.json, set initializeManually and useJWT to true.
2. (Recommended) The domain for Search should be a subdomain of the parent domain, so that you can access things on the parent window from the iframe. This will likely make your life easier.

3. Call the following from the outer page

   AnswersExperienceFrame.init({
   "visitor": "<visitorId>", //OPT_IN FEATURE
   "tokenHeader": "<jwt>"
   }) 

The visitor and tokenHeader should be generated by you, from your authentication provider.

Option 2 (Recommended): Core or Headless

1. In provideCore, pass the JWT in place of the apiKey and the appropriate visitor (optional) from your authentication provider.

   import { provideCore } from '@yext/search-core';
   const core = provideCore({
   token: '<jwt>',
   vistor: '<visitorId>', //OPT_IN FEATURE
   //etc
   })

Option 3: Subdomain

You also have the option of redirecting to a page fully hosted by Yext, instead of iFraming in the experience on your own page. If you do this, you’ll need to keep track of the token and the visitor (optional) in url params or local storage, and the code that powers the subdomain will need to be directed to access them.

1. In your global_config.json, set useJWT and initializeManually to true.
2. In the on_document_load partial, add the call for the runtime config with the tokenHeader attribute, and pass the visitor if you are using visitor analytics:

In order to add the on_document_load partial in Jambo, click Tools>Override Theme>script>on-document-load.js>Submit.

Since you are redirecting to this subdomain, you will need to store the token and visitor in local storage or in a url param, for the subdomain to use.

var token = this.localStorage?.myToken; // store the token in local storage
var token = this.window.hrefsomething; //store the token in a url param
var visitor = this.localStorage?.visitor; // store the token in local storage
var visitor = this.window.hrefsomething; //store the token in a url param

AnswersExperience.runtimeConfig.set('tokenHeader', token);

 	AnswersExperience.runtimeConfig.set('visitor', visitor);

	AnswersExperience.init()

Step 2: Configure a Search Bar

Next, you’ll need to configure the search bar on your website linking to your Search experience. There are two different search bar options which you can read more about here . The configuration of the search bar with Authorized Search changes in that you must pass in the token rather than API Key, in addition to now passing the visitor object if you are using visitor analytics (see below for more information).

In your ANSWERS.init for adding the search bar, pass the JWT that you are minting as the token and the appropriate visitor (if you opt-in to visitor analytics) from your authentication provider.

ANSWERS.init({
token: '<jwt>'
visitor: '<visitorId>', 
//etc
ANSWERS.addComponent(‘searchbar’, { .. });

});

Step 3: Deploy your Site

You are now ready to deploy your site!