Step 5: Appendix

This section outlines:

Adding a Searchbar via a Tag Manager
Troubleshooting Tips
Full List of Searchbar API Properties

Adding via a Tag Manager

Tag Managers make it easy to quickly add javascript snippets to a web page. However, adding UI elements via a Tag manager is not usually recommened. For this reason, we highly discourage a search bar integration via a Tag Manager.

That said, it’s technically possible. You will need to be careful to fire the events in the right order. You will need to make sure you FIRST add the search bar and SECOND initialize the library.

1. Dynamically add the search bar

Here is a simple example of adding a search bar using plain javascript.

<script>
  (function() {
    // Create div and add class
    var searchbar = document.createElement("div");
    searchbar.classList.add("search_form");

    // Insert in wrapper module
    var module = document.querySelector(".module-wrapper");
    if (module) {
      module.parentElement.insertBefore(searchbar, module.nextSibling);
    }
  })();
</script>

2. Initialize the library

After the search bar div is on the page, you can load the library following the same script tag that is in step 1 above . Just be sure it fires after the search bar is added to the page and in the DOM.

Troubleshooting

Here are some common mistakes that could be causing you problems:

Make sure the container property matches the div class. For example, if the container is .search-bar-container the div should have a class of search-bar-container. The . just means it’s a class.
If there are multiple search bars on the page make sure they all have a unique name.
Make sure that the JS library is loaded from the CDN and that init is called.

Search Initialization API and Search Bar API

We have a full list of API properties that are available as part of ANSWERS.init and addComponent in our Search UI SDK documentation. Check them out below:

<% elem.innerText %>