Smart Form - Select mode

Integration on a drop-down list

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>. On your drop-down list, remember to specify an identifier so that you can specify it in the JS code <select id="selectId_OF_YOUR_CHOICE"></select>.

<select id="my-select"></select>
<div id="st-contact-form-select-container"></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('STContactFormSelectLoaded', function (e) {
    e.detail.init({
      kbId: 2,
      locale: 'en',
      cookieOptin: false,
      labels: {
        title: {
          en: 'Suggestions',
        },
        openOnFaq: {
          en: 'Open the knowledge base',
        },
        goToFaqLink: {
          en: 'Go to the knowledge base',
        },
      },

      limit: 5,
      faqUrl: 'https://example.com/faq',
      openInNewTab: true,
      selectId: 'my-select',
      containerId: 'st-contact-form-select-container',
      mapping: {
        'option-1': {
          thematics: ['category-1'],
          tags: [],
        },
        'option-2': {
          thematics: ['category-2'],
          tags: ['tag-1'],
        },
      },
    });
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/ContactFormSelect/contactformselect.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

Variable	Type	Condition	Example	Description
kbId	int	required	kbId : 2	Variable 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.
locale	string	required	locale : "en"	It allows the customer to specify in which language the solution should be displayed. This only applies to multilingual knowledge bases.
cookieOptin	bool	required	cookieOptin : false	It 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 the widget. The default value is false.
customVariables	obj	optional	customVariables : { brand:"Smart Tribune"}	This variable is used to replace the value of a custom variable created in the response content via Smart Dashboard. Note: We expect here a string that can contain HTML tags (span, a, b, u, i, br, img) with its attributes (id, class, style, name, title, target, href, rel, src, alt).
labels	obj	optional	labels : { title:{}, emptyMessage:{}, openOnFaq:{}, goToFaqLink:{} }	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.
limit	int	optional	limit: 5	Limit on the number of elements to display (max: 25).
faqUrl	string	optional	faqUrl: "https://example.com/faq"	This redirects users to the FAQ.
openInNewTab	bool	optional	openInNewTab: true	Open the suggestion links in a new tab.
selectId	string	optional	selectId: "my-select"	This is the identifier of the form field on which the search must be applied.
containerId	string	optional	containerId: "st-contact-form-select-container"	This is the identifier of the container that will display the widget.
mapping	obj	optional	mapping : { option-1:[], option-2:[]}	This variable allows you to specify the categories and tags that must be associated with the pattern selected in the drop-down list (value option). We recommend that you use the example snippet above.
customResponses	arr	optional	customResponses : [ "tag" ]	This variable allows you to specify the customized response contextualization to apply by using the tag system identifier. Note : This variable is an array of string.