Custom Logo Code Examples | Yext Hitchhikers Platform

Replacing the Yext Logo

Search Bar Integration

If you would like to replace the Yext logo when integrating the search bar on your site, you have the option of using a built-in icon from our library or using your own icon. To do so, add one of the following to the addComponent call to initialize the search bar:

submitIcon: “magnifying_glass”
- The submitIcon property allows you to use a built-in icon from our library that you loaded.
- If you use an icon, we recommend choosing the magnifying glass to indicate to users this is a search bar, but you can choose any built-in icon you want to use.
customIconUrl: “static/assets/images/icon-arrow-right.svg”
- The customIconUrl property allows you to add a custom icon
- Update the value to the URL the image is at. You can either use a URL or reference an image you’ve uploaded to your site.

Here’s what the addComponent call will look like:

ANSWERS.addComponent("SearchBar", {
  container: ".search_form",
  name: "search-bar", //Must be unique for every search bar on the same page
  redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
  placeholderText: "Search...",
  submitIcon: 'magnifying_glass' // Choose a built-in icon
});

ANSWERS.addComponent("SearchBar", {
  container: ".search_form",
  name: "search-bar", //Must be unique for every search bar on the same page
  redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
  placeholderText: "Search...",
  customIconUrl: "static/assets/images/icon-arrow-right.svg" // Choose an icon from an image URL
});

This result will look something like this:

To learn more about Search Bar integration and optional styling, you can follow this guide .

Overlay & Search Results Page - Search Bar

To replace the Yext logo in the overlay and/or the Search Bar on the Search results page, you will update the frontend of your Search experience in the Code Editor. You will need to edit the componentSettings.SearchBar component within the config file for ALL pages you have displayed in the overlay (e.g., index.json, jobs.json, etc.) or want to edit the search bar on. Similar to a search bar you will add either:

submitIcon: “magnifying_glass”`
- The submitIcon property allows you to use a built-in icon from our library.
- If you use an icon, we recommend choosing the magnifying glass to indicate to users this is a search bar, but you can choose any built-in icon you want to use.
customIconUrl: “static/assets/images/icon-arrow-right.svg”
- The customIconUrl property allows you to add a custom icon
- Update the value to the URL the image is at. You can either use a URL or reference an image you’ve uploaded to your site.

This is what it the componentSettings.SearchBar should look like:

"SearchBar": {
  "placeholderText": "Search", // The placeholder text in the    answers search bar
  "allowEmptySearch": true,
  "submitIcon": "magnifying_glass" // Choose a built-in icon
},

"SearchBar": {
  "placeholderText": "Search", // The placeholder text in the answers search bar
  "allowEmptySearch": true,
  "customIconUrl": "static/assets/images/icon-arrow-right.svg" // Choose an icon from an image URL
},

The search bar on the results page will look like this:

And the overlay will look something like this:

To remove the logo on the search results page, you will need to comment out the yext-logo layout within all vertical .html.hbs files and the index.html.hbs file:

<div class="Answers-footer">
  {{!-- {{> layouts/yext-logo }} --}} //Comment out to remove the logo
  {{> templates/vertical-standard/markup/locationbias }}
</div>

This will remove the logo at the bottom of the experience:

Back

< Custom CTA Code Examples

Custom Formatters >

<% elem.innerText %>

Custom Logo Code Examples | Yext Hitchhikers Platform

Replacing the Yext Logo

Search Bar Integration

Overlay & Search Results Page - Search Bar

Search Results Page - Footer