Search bar style in client page & change search icon

Search
1

Hi,

I am trying to replicate the CSS style that I have customized for the search bar in the iframe that I will include in the result page and so in the search bar that my client has in its source HTML page, from where it will make the query, it has the same style.

I have 2 questions about it:

  1. When I include

    on the client page, it does show the search bar but not the custom styles. Do I have to replicate these CSS styles on the client page? Is there no way to use the copy already defined in the Answers.css?

  2. Adding the styles in duplicate on the client page, I have achieved what I was looking for (change font for suggestion texts and default text) but I cannot change the Yext icon for a magnifying glass. How could I do it?

I show a couple of screenshots:

Client page with the search bar that I am working on and in which I have not been able to change the search icon:

image
image833Ă—312 9 KB

Results page with custom styles and desired search icon:

image
image1044Ă—315 26 KB

Thanks a lot!!

2

Hi David,

Great question and thanks for reaching out. Yes, the two are separate search bars on separate pages so they would need to both have the styling applied. For the icon, you can use the API parameter submitIcon or customIconUrl to target this. The former will allow you to use a pre-built icon for the search bar. See icons for your options. I believe 'magnifying_glass" is what you would want but you can also use your own custom icon URL.

You would add this under the Answers init when initialising the library on the home page. For example:

function initAnswers() {
ANSWERS.init({
apiKey: “REPLACE_ME”,
experienceKey: “REPLACE_ME”,
experienceVersion: “PRODUCTION”,
locale: “en”, // e.g. en
businessId: “REPLACE_ME”,
templateBundle: TemplateBundle.default,
onReady: function () {
ANSWERS.addComponent(“SearchBar”, {
container: “.search_form”,
name: “search-bar”, //Must be unique for every search bar on the same page
redirectUrl: “https://www.yext.com”,
submitIcon: “magnifying_glass”
});
}

For your reference, you can find a full list of Searchbar API here

Let us know if you have any other questions.

Best,
Alyssa

3 Likes
3

Hi Alyssa,

thank you very much for your help. Following your instructions I have been able to change the icon and put the desired one. I have saved the API reference :slight_smile:

Thanks again!

Best,

David

4

Hi David,

Great! Reach out if we can help further.

Best,
Alyssa

5

Hi Alyssa,

I was able to integrate Yext Searchbar in my website which is running on Adobe Experience Manager.

I was not able to change the default search icon in the search bar. I tried passing param submitIcon: “magnifying_glass” to the API.

Appreciate if you could help me!!!

6

Hi Vikas,

Thanks for reaching out. Could you share the code you have with the submitIcon so we can take a look?

Best,
Alyssa

7

Hi Alyssa,

I could able to fix the issue. in my config some extra colon is creating the issue. now its fixed. Thanks for your help.