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 thecontainer
is.search-bar-container
the div should have a class ofsearch-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: