Editing initAnswers within Page Builder

Pages
1

Hello,

Is it possible to directly modify the initAnswers function within a Page Builder template that has an Answers search bar? While building a location landing page, for example, could I somehow edit the Answers.init script to mirror customizations that may have been made to the search bar within the actual Answers experience, such as modifying the submitIcon?

Best,
DJ

2

Hey DJ,

It currently is not possible to edit the initAnswers function for a search bar that is built in to a Page Builder module. You are only able to customize a few attributes as shown in the Page Builder UI.

image
image736×848 39 KB

However, you can add a custom HTML module in Page Builder and add the code for the search bar directly to make customizations. Check out the Answers integration guide on adding a search bar for the code snippets you’ll need. When initializing the library, you can add properties to the addComponent call. You can replace the submit icon with an icon from the SDK library (e.g., magnifying_glass).

Example:

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"
});

If you want to use a custom URL, you’ll want to use the customIconUrl property instead and reference the URL of the image hosted on the web.

Example:

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: "https://www.mybrand.com/searchicon.png"
});

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.

1 Like