Smart FAQ Snippet
Integration
The installation of the Smart FAQ solution on the customer's site is done by integrating a piece of HTML and a snippet of javascript code within the desired page.
HTML
Embed the piece of HTML code in the place in your code where the FAQ should appear.
<div id="st-faq"></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('STFAQLoaded', function (e) {
e.detail.init({
analyticsUA: 'UA-00000000-0',
kbId: 2,
locale: 'en',
cookieOptin: false,
filters: {
thematics: [],
tags: [],
},
});
});
</script>
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/FAQ/faq.main.js"
></script>
Link to demo : Click here
The integration of the code snippet above is sufficient to allow the partial display of the FAQ within the page. You must also communicate your domain name to your Smart Tribune contact point so that we allow the product to be displayed completely on your environment.
Please note, the link to faq.main.js is a demonstration of the product, the smart-tribune folder in the url will be replaced by the one that will be communicated to you. The url changes completely during the transition from pre-production (public) to production. The complete url is communicated by your Smart Tribune contact point in charge of your account.
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.
Validation environment
This url differs depending on the environment on which the solution is to be installed at the customer site. It is customary to use PUBLIC for pre-production and to use PRODUCTION for production at the customer site. All this information is communicated by Smart Tribune after the development phase.
PRODUCTION script
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/FAQ/faq.main.js"
></script>
PRE-PRODUCTION script
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/FAQ/public/faq.main.js"
></script>
Variables list
| Variable | Type | Condition | Example | Description |
|---|---|---|---|---|
| kbId | int | required (optionnal with auth: true) | 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 (optionnal with auth: true) | 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 analytics cookie (possible value: true or false). By disabling this functionality, it will no longer be possible to send information in the analytics provider for your FAQ. The default value is false. |
| auth | bool | optional | auth: false | It allows the FAQ to display a connection form at start. This form will restrict your FAQ access to all your Dashboard users. You can avoid sending kbId and/or locale, and in this case, a knowledge base selector will be displayed. The default value is false. |
| analyticsConnector | string | optional | analyticsConnector: "google" | It allows to specify the analytics provider you want to use to send FAQ's statistics (availables connectors : 'google' and 'atinternet'). The default value is 'google'. |
| analyticsUA | string | optional | analyticsUA : "UA-XXXXXXXX" | It allows the FAQ to sending into your analytics provider many informations about FAQ's users. Compatible with Google Analytics V4 ("G-XXXXXXXX") and ATInternet ("siteId"). |
| analyticsConfiguration | obj | optional | analyticsConfiguration: { collectDomain: "example.com" } | This configuration variable allows you to send a specific configuration to the analytics provider (required with "atinternet" connector). See this section to know more about supported properties. |
| buildName | string | optional | buildName: "design-2" | This variable is very usefull if you have a FAQ wich needs color's changing (for example) between a public space and a member space. If necessary for your Smart Tribune product, the value of the variable will be communicated to you after the development phase. |
| searchFiltered Deprecated | bool/obj | optional | searchFiltered: true | This variable contextualizes the search with the values of the filters parameter. The default value is true so that the search engine returns only results in the chosen context. Please note that the accessible content remains conditioned by the scope of the solution (FAQ, PUSH, etc.). The value false makes all the contents of the knowledge base accessible in the search engine. To contextualize the search on a different selection of the filters variable, it is possible to add an array of character strings (system identifier of the tag) to specify the new search context (searchFiltered: { tags: ["TAG"] }). Note : This variable is deprecated. Use searchSettings.filters instead. |
| 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). |
| filters | obj | optional | filters: { thematics: [], tags: [], tagsOr: [] } | 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. |
| headerId | string | optional | headerId: "headerTop" | This configuration variable allows you to specify the identifier of your horizontal menu. The advantage of this option lies in the fact that it corrects the problems of Scroll when the horizontal menu is in a CSS state: position: fixed. In this state the menu can hide, in certain cases, elements of the FAQ when this one is displayed. |
| entrypoint | obj | optional | entrypoint: { type: "question", value: "question-slug" } | This configuration variable allows you to display at the loading of Smart FAQ, a question, a guide, a content page, or the questions of a category. To do it, you have to choose the type ('question', 'thematic', 'guide', or 'content') and insert into 'value' the slug of the specified question, thematic, guide or content page. |
| 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. |
| urls | obj | optional | urls: { localization: { en: "https://faq.example.com/en", fr: "https://faq.example.com/fr" } } | This configuration variable contains some useful URLs for your FAQ. See this section to know more about supported properties. |
| searchSettings | obj | optional | searchSettings: { filters: { thematics:[], tags:[], tagsOr:[] } } | This configuration variable contains all the settings to configure your search engine. See this section to know more about supported properties. |
Slug: This is the identifier in "character string" format of a question and a category. This can be found for categories in Smart Dashboard ('Menu'> 'Knowledge base'> 'Categories' > 'system identifier'). This can be found for questions in url in the FAQ directly (example.com/faq?question=SLUG).
URLs
| Variable | Type | Condition | Example | Description |
|---|---|---|---|---|
| localization | obj | optional | localization: { en: "https://faq.example.com/en", fr: "https://faq.example.com/fr" } | This configuration object allows you to define URLs for different language versions of your FAQ pages. By specifying these localized URLs, our system can automatically generate the appropriate hreflang markup, which helps search engines understand the language and regional targeting of your content. This ensures that users are directed to the correct version of your FAQ page based on their language and location. |
Search Settings
| Variable | Type | Condition | Example | Description |
|---|---|---|---|---|
| filters | obj | optional | filters: { thematics: [], tags: [], tagsOr: [] } | This configuration object allows you to specify the contextualization to apply to the search engine only. 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. |
| strictness | string | optional | strictness: "strict" | This variable allows you to control the search engine sensitivity. By adjusting this parameter, you can change the threshold for search results to be either strict or more lenient, depending on your needs. strict : The search will return results that closely match the search criteria, filtering out less relevant results. This is useful when precise results are necessary. normal (default) : The search will be more lenient, returning a broader range of results that may include more variations and partial matches. This can be helpful when a more comprehensive set of results is preferred. |
Analytics Configuration
Depending on the connector used, you can specify an optional configuration to the analytics provider by using an object in analyticsConfiguration.
ATInternet Configuration
| Property | Type | Description |
|---|---|---|
| collectDomain | string | Domain statistics data collection. You can find this information in your ATInternet dashboard. (Read more) |
| addEventURL | string | Automatically adds a page_url property to all events, containing the URL of the current page. Possible values: false, withoutQS, true (default). |
Google Analytics Configuration
| Property | Type | Description |
|---|---|---|
| transportUrl | string | Send data to a server-side container. |
| firstPartyCollection | bool | Must be set to true when transportUrl is specified. |
Third-party scripts
In some cases, you may need to authorize third-party domains as we use scripts external to Smart Tribune for some functionality described below.
Polyfill-fastly.io
Polyfill-fastly.io is a service developed by The Financial Times which accepts a request for a set of browser features and returns only the polyfills that are needed by the requesting browser. This is used to ensure compatibility with all browsers up to IE 11.
| Version | Script URL | Domain to authorize |
|---|---|---|
| V3 | https://polyfill-fastly.io/v3/polyfill.min.js | polyfill-fastly.io |
Google Analytics
Google Analytics is an analysis tool developed by Google that measures website traffic and collects essential information about website visitors.
| Version | Script URL | Domain to authorize |
|---|---|---|
| V3 | https://www.google-analytics.com/analytics.js | google-analytics.com |
| V4 | https://www.googletagmanager.com/gtag/js | googletagmanager.com |
ATInternet
ATInternet is a privately held company that provides web analytics services and consulting for websites, intranet, mobile sites and mobile applications.
| Version | Script URL | Domain to authorize |
|---|---|---|
| V6 | https://tag.aticdn.net/piano-analytics.js | tag.aticdn.net |