How do you remove Yext logo from Answers Overlay search bar?

Hi! My client would like to have the magnifying glass logo appear in the Overlay instead of the Yext logo. Is this something we control on the frontend or is it part of the Overlay integration script?

1 Like

Hey Jordan,

This is the same as with your search results – you’d update the componentSettings.SearchBar component for whichever page you have the overlay on (typically the index.json) with an icon from the SDK library (e.g., magnifying_glass).

Example:

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

If you want to use a custom URL, you’ll want to use the submitIconUrl property instead and reference your image in the assets directory.
Example:

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

If you are on the Answers Free Trial, you must keep the Yext icon as part of the terms of the trial. If you are a paid customer, you are welcome to continue using the Yext logo or switch to a generic one or custom one.

2 Likes

Hello!

Similar question here but I have the Yext logo replaced in the search bar with the client logo in my Staging and Production site.
unnamed-1

However when the client followed the integration instructions, the Yext logo is still in the search bar.
unnamed

Is there another file I need to update to ensure that when the integration is done on the client side the search bar still maintains the client logo and not the Yext logo?

Thank you!

1 Like

Update - I sent this to my client and it worked for them!

To replace the Yext logo in the live site, there is actually a step that your team will have to complete on your end.

To replace the magnifying glass, you will need to set the attribute in the Answers.addComponent("SearchBar"){} config. It could go, for example, under the redirectUrl attribute. The key will be customIconUrl , used with a custom url pointing to the Conyers logo image. Please let me know if your team needs any help with this!