This doc offers step-by-step instructions on how to add a Promotion vertical to a Search experience. This vertical can be used to highlight content by displaying a promo banner based on certain queries that are searched.

Note: If you want to add a static alert banner that always appears regardless of the results returned, see this doc!

On a high level, the process goes as follows:

• Add Promotion Entities to the Knowledge Graph
• Add the Promotion Vertical to the Search Backend
• Add the Promotion Vertical to the Search Frontend

Step 1: Add Promotion Entities to the Knowledge Graph

1. Add a Promotion custom entity type. If you need a refresher, view this. We recommend that you add the following fields:
   • Name
   • Description
   • CTAs
   • URL
   • Photo
   • Keywords
2. Add promotion entities to the account. Make sure the custom entity type is enabled. You can learn more about how to upload data into the Knowledge Graph here.

Step 2: Add the Promotion Vertical to the Search Backend

1. Navigate to your Search Configuration and select Verticals.
2. Add a Promotion vertical.
3. By default, the name and builtin.entityType are set as searchable fields. However, if there are other terms or queries where you want to return the banner, you can do the following:
   • In the Searchable Fields section, add the keywords field and select Phrase Match. This will trigger the result only if the keyword, or "phrase", is contained in the query.

4. Navigate to the Query Rules screen. Add the following query rule:

   • Name: Boost Promotions
   • Criteria: Search Type = Universal
   • Action: Boost Verticals = Promotions

   This query rule will boost the promotions vertical to the top of your universal search for any query where promotion entities are returned.

Step 3: Add the Promotion Vertical to the Search Frontend

1. Navigate to your Search frontend (Pages > Your Site). In your Pages code, add the following to your index.json file under the verticalsToConfig object after "Universal":

"promotions": { // The vertical key from your search configuration
  "label": "", // The name of the vertical in the section header and the navigation bar
  "hideInNavigation": true, // hides navbar tab
  "universalLimit": 1, // ensures only one result
  "cardType": "promo-card" // forked card name
}

2. Fork a promo card from the card/standard template card folder. Name it "promo-card" per the above cardType configuration. Style it however you want!
3. In the answers.scss file, hide the navigation bar and view all section for this vertical.

.HitchhikerResultsStandard--promotions {
  .HitchhikerResultsStandard-title {
    display:none;
  }
  .HitchhikerResultsStandard-viewMore {
    display:none;
  }
    border-top: var(--yxt-border-default);
}

4. Optionally, add a light background brand color to highlight the promo cards. Add this to your answers.scss file:

.HitchhikerStandard.promo-card{
  background-color: #bfe8f8;
}

The result should look something like this: