Skip to main content

Search Standalone Snippet

Description

The purpose of this widget is to display a search engine for searching the specified knowledge base (KbId).

During a search, an autocompletion is displayed with suggestions. If a search is validated via the "ENTER" key or the click on the search button, the user will be directed to the FAQ in question with the search carried out.

Integration

The installation of the solution is done via the integration of the javascript code snippet before the closing tag </body> on the page or pages where it should be displayed.

HTML

Add in your HTML code a container with an identifier which will display the widget at the location of your choice on the<div id="containerId_OF_YOUR_CHOICE"></div>. This identifier must be specified in the containerId option.

<div id="containerId_OF_YOUR_CHOICE"></div>

JS

Integrate the Javascript snippet just before closing the </body> tag. The Smart Tribune script must be loaded as far downstream as possible in the script loading chain in order to avoid possible conflicts with the scripts present on the client page.

<script type="text/javascript">
window.addEventListener('STSearchStandaloneLoaded', function (e) {
e.detail.init({
kbId: 2,
locale: 'en',
cookieOptin: true,
filters: {
thematics: ['category-1'],
tags: ['tag-1'],
},
labels: {
title: {
fr: 'Moteur de recherche',
en: 'Search bar',
},
emptyMessage: {
fr: 'Aucune question',
en: 'No question',
},
placeholder: {
fr: 'Saisir ta question',
en: 'Enter your question',
},
examplesTitle: {
fr: 'Examples de recherche ?',
en: 'Examples',
},
submit: {
fr: 'Chercher',
en: 'Search',
},
},
limit: 50,
faqUrl: 'https://example.com/faq',
openInNewTab: false,
searchExamples: {
en: ['Lorem ipsum', 'Aenean', 'Consectetur adipiscing'],
},
containerId: 'st-search-standalone',
});
});
</script>
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/SearchStandalone/searchstandalone.main.js"
></script>

Link to demo : Click here

info

The domains calling on the specified knowledge base must be declared beforehand directly in the knowledge base configuration in Smart Dashboard by your Account Manager.

Variables list

VariableTypeConditionExampleDescription
kbIdintrequiredkbId : 2Variable specific to each customer, it corresponds to the identifier (system identifier) ​​of the knowledge base to be used. This is available in Smart Dashboard, the content administration interface. The knowledge base already integrating test content is identified by the value: 2. You can find your kbId on the Dashboard home page in the "Select a knowledge base" then "system identifier" box.
localestringrequiredlocale : "fr"It allows the customer to specify in which language the solution should be displayed. This only applies to multilingual knowledge bases.
cookieOptinboolrequiredcookieOptin : falseIt allows you to prevent or not the activation of the Google Analytics cookie (possible value: true or false). By disabling this functionality, it will no longer be possible to send information in Google Analytics for your widget. The default value is false.
filtersobjoptionalfilters : { thematics:[], tags:[] }This configuration variable allows you to specify the contextualization to apply. It is possible to define the filtering using the thematics system identifier or tags. The operator used is AND in the case of multiple values within the same filter or between filters. If needed, tags can be replaced by tagsOr to use operator OR between tags. Note : These objects contain an array of strings.
labelsobjoptionallabels : { title:{}, emptyMessage:{}, placeholder:{}, examplesTitle:{}, submit:{} }This variable allows you to overload the widget strings with those of your choice. We advise you to use the example snippet above to add your own texts.
limitintoptionallimit: 5Limit on the number of elements to display (max: 50).
faqUrlstringoptionalfaqUrl: "https://example.com/faq"This redirects users to your FAQ.
openInNewTabbooloptionalopenInNewTab: trueAllows you to load the FAQ in a new tab.
containerIdstringoptionalcontainerId: "containerId_OF_YOUR_CHOICE"This is the identifier of the container that will receive the content of your Stand Alone Search widget
searchExamplesobjoptionnelsearchExamples: { en: [ "Lorem ipsum", "Aenean", "Consectetur adipiscing" ] }Allows you to define search examples to display below the field