Step 1: Initialize the Library
Instructions
To add the search bar to a page, we’ll use a version of the Search UI SDK. The below steps walk you through how to configure a search bar in your website header.
First, add the searchbar-only version of the Search UI SDK and CSS to the page, and then initialize Search. This library will need to exist on every page we have a search bar. If the search bar is in the header this will mean it’s on every page on the website.
Add this into the <head></head>
on every page that has a search bar. Make sure you replace any of the properties you collected in the introduction step in the script below. These are all prefixed with REPLACE_ME
. If using the in-platform snippet generator, these fields will already be populated with your account information.
<head>
<!-- Other stuff in the head here -->
<link
rel="stylesheet"
type="text/css"
href="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.css"
/>
<script src="https://assets.sitescdn.net/answers-search-bar/v1.6/answerstemplates.compiled.min.js"></script>
<script>
function initAnswers() {
ANSWERS.init({
apiKey: "REPLACE_ME_API_KEY",
experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
experienceVersion: "PRODUCTION",
locale: "en", // e.g. en
businessId: "REPLACE_ME_BUSINESS_ID",
templateBundle: TemplateBundle.default,
cloudRegion: "us",
onReady: function () {
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...",
});
},
});
}
</script>
<script
src="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
onload="ANSWERS.domReady(initAnswers)"
async
defer
></script>
</head>
You can also configure the placeholderText
and optionally add a promptHeader
in the addComponent
call above to fit your needs. For a full list of properties, see the Appendix at the end of this guide.
Optional Configurations
Below we outline how to handle the following integration cases. If these don’t apply to you, carry on to Step #2.
- Host data in the EU cloud region
- Use the staging version of your search experience
- Polyfilled Site
- ASP.NET Integration
- RequireJS or Other Script Loader
Hosting Data in the EU Cloud Region
By default, your search experience and data is stored in the US cloud region. If you want to set it to the EU instead, you’ll have to make some changes to the code snippet above:
- Change the
cloudRegion
value to"eu"
. - Replace all references to the URL
https://assets.sitescdn.net
withhttps://assets.eu.sitescdn.net
.
The updated code snippet will look like the following:
<head>
<!-- Other stuff in the head here -->
<link
rel="stylesheet"
type="text/css"
href="https://assets.eu.sitescdn.net/answers-search-bar/v1.6/answers.css"
/>
<script src="https://assets.eu.sitescdn.net/answers-search-bar/v1.6/answerstemplates.compiled.min.js"></script>
<script>
function initAnswers() {
ANSWERS.init({
apiKey: "REPLACE_ME_API_KEY",
experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
experienceVersion: "PRODUCTION",
locale: "en", // e.g. en
businessId: "REPLACE_ME_BUSINESS_ID",
templateBundle: TemplateBundle.default,
cloudRegion: "eu",
onReady: function () {
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...",
});
},
});
}
</script>
<script
src="https://assets.eu.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
onload="ANSWERS.domReady(initAnswers)"
async
defer
></script>
</head>
Preview the Staging Version of Search
In order to use or preview the staging version of Search with your search bar, you will need to update the experienceVersion
to STAGING
when initizalizing the library.
You will still replace any of the properties prefixed with REPLACE_ME
the same way as you would in the directions above.
Also see the directions in the Creating Search Results Page guide to learn how to modify the script tag to utilize the Staging version of Search.
Polyfilled Site
The searchbar-only JS asset used in the example above includes polyfills. If you’re already polyfilling your site, or Internet Explorer support is not a priority, you should reference https://assets.sitescdn.net/answers-search-bar/v1.6/answers-modern.min.js
instead of https://assets.sitescdn.net/answers-search-bar/v1.6/answers.min.js
. This will further improve page performance.
ASP.NET Integration
This section is only relevant for ASP.NET sites.
ASP.NET sites wrap the entire site in a <form></form>
element. By default, the Search JS Library uses a <form>
around the
search bar to maximize accessibility. If you are trying to use Search on an ASP.NET website you will need to turn this off.
To do this, set the configuration option useForm
to false
on the SearchBar
component. For example:
<head>
<!-- Other stuff in the head here -->
<link
rel="stylesheet"
type="text/css"
href="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.css"
/>
<script src="https://assets.sitescdn.net/answers-search-bar/v1.6/answerstemplates.compiled.min.js"></script>
<script>
function initAnswers() {
ANSWERS.init({
apiKey: "REPLACE_ME_API_KEY",
experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
experienceVersion: "PRODUCTION",
locale: "en", // e.g. en
businessId: "REPLACE_ME_BUSINESS_ID",
templateBundle: TemplateBundle.default,
onReady: function () {
ANSWERS.addComponent("SearchBar", {
container: ".search_form",
useForm: false, // REQUIRED FOR ASP.NET SITES
name: "search-bar", //Must be unique for every search bar on the same page
redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
placeholderText: "Search...",
});
},
});
}
</script>
<script
src="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
onload="ANSWERS.domReady(initAnswers)"
async
defer
></script>
</head>
RequireJS or Other Script Loader
The library also includes a non-UMD bundle type for the SDK’s templates; it’s an IIFE bundle that will put the TemplateBundle
object into the global window. Because this bundle does not attempt to use AMD bundling, it should not conflict with
RequireJS
(or similar) implementations of AMD. You are also able to import the bundle however you manage dependencies in your environment.
To use this bundle, follow the instructions as outlined
above
, but reference the IIFE template bundle and templateBundle: TemplateBundle
instead of templateBundle: TemplateBundle.default
. This can either be specified as a script tag (below), or using your preferred script loader.
Example
<head>
<!-- Other stuff in the head here -->
<link
rel="stylesheet"
type="text/css"
href="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.css"
/>
<!-- New template bundle, can be a script tag or imported through your preferred require.js method -->
<script src="https://assets.sitescdn.net/answers-search-bar/v1.6/answerstemplates-iife.compiled.min.js"></script>
<script>
function initAnswers() {
ANSWERS.init({
apiKey: "REPLACE_ME_API_KEY",
experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
experienceVersion: "PRODUCTION",
locale: "en", // e.g. en
businessId: "REPLACE_ME_BUSINESS_ID",
templateBundle: TemplateBundle,
onReady: function () {
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...",
});
},
});
}
</script>
<script
src="https://assets.sitescdn.net/answers-search-bar/v1.6/answers.min.js"
onload="ANSWERS.domReady(initAnswers)"
async
defer
></script>
</head>