Snippet Smart FAQ
Intégration
L'installation de la solution Smart FAQ sur le site du client s'effectue en intégrant un bout de HTML et un snippet de code javascript au sein de la page souhaitée.
HTML
Intégrer le bout de code HTML à l'endroit dans votre code où la FAQ doit s'afficher.
<div id="st-faq"></div>
JS
Intégrer le snippet Javascript juste avant la fermeture de la balise </body>. Le script Smart Tribune doit être chargé le plus en aval possible dans la chaîne de chargement des scripts afin d'éviter d'éventuels conflits avec les scripts présents sur la page client.
<script type="text/javascript">
window.addEventListener('STFAQLoaded', function (e) {
e.detail.init({
analyticsUA: 'UA-00000000-0',
kbId: 2,
locale: 'fr',
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>
Lien vers la démonstration : Cliquez ici
L'intégration du snippet de code ci-dessus suffit à permettre l'affichage partiel de la FAQ au sein de la page. Il faut également communiquer votre nom de domaine à votre point de contact Smart Tribune pour que nous autorisions le produit à s'afficher complètement sur votre environnement.
Attention, le lien vers faq.main.js est une démonstration du produit, le dossier smart-tribune dans l'url sera à remplacer par celui qui vous sera communiqué. L'url change complètement lors du passage de la pre-production (public) à la production. L'url complète est communiquée par votre point de contact Smart Tribune en charge de votre dossier.
Les domaines faisant appel à la base de connaissances spécifiée devront être préalablement déclarés directement dans la configuration de la base de connaissances dans Smart Dashboard.
Environnement de pré-production
Le chemin d'accès au fichier faq.js évolue en fonction de l'environnement : public ou production. Cette url diffère selon l'environnement sur lequel le dispositif doit être installé sur le site client. Il est d'usage d'utiliser PUBLIC pour la pré-production et d'utiliser PRODUCTION pour la production chez le client. Toutes ces informations sont communiquées par Smart Tribune après la phase de développement.
Script de PRODUCTION
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/FAQ/faq.main.js"
></script>
Script de PRE-PRODUCTION
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/FAQ/public/faq.main.js"
></script>
Liste des variables
| Variable | Type | Condition | Exemple | Description |
|---|---|---|---|---|
| kbId | int | requis (optionnel avec auth: true) | kbId: 2 | Variable spécifique à chaque client, elle correspond à l'identifiant (identifiant système) de la base de connaissances à utiliser. Celle-ci est disponible dans Smart Dashboard, l'interface d'administration de contenus. La base de connaissances intégrant déjà du contenu de test est identifié par la valeur : 2. Vous pouvez retrouver votre kbId sur la page d'accueil du Dashboard dans le cadre "Sélectionner une base de connaissances" puis "identifiant système". |
| locale | string | requis (optionnel avec auth: true) | locale: "fr" | Elle permet au client de spécifier dans quelle langue le dispositif doit être affiché. Cela est valable uniquement pour les bases de connaissances multilingues. |
| buildName | string | optionnel | buildName: "design-2" | Cette variable est très pratique si vous avez une FAQ qui doit changer de couleur (par exemple) entre un espace public et un espace membre. Si cela est nécessaire à votre produit Smart Tribune, la valeur de la variable vous sera communiquée après la phase de développement. |
| cookieOptin | bool | requis | cookieOptin: false | Elle permet d'empêcher ou non l'activation du cookie d'analyse des statistiques (valeur possible : true ou false). En désactivant cette fonctionnalité, il ne sera plus possible d'envoyer des informations dans le fournisseur d'analyse des statistiques pour votre FAQ. La valeur par défaut est false. |
| auth | bool | optionnel | auth: false | Elle permet d'activer un formulaire de connexion qui limitera l'accès à votre FAQ aux seuls utilisateurs de votre Dashboard. Vous pourrez aussi ne plus envoyer les variables kbId et/ou locale, et dans ce cas, un selecteur de base de connaissance vous sera affiché. La valeur par défaut est false. |
| analyticsConnector | string | optionnel | analyticsConnector: "google" | Elle permet de spécifier le fournisseur d'analyse de statistiques que vous souhaitez utiliser pour envoyer les statistiques d'utilisation de la FAQ (connecteurs disponibles : 'google' et 'atinternet'). La valeur par défaut est 'google'. |
| analyticsUA | string | optionnel | analyticsUA: "UA-XXXXXXXX" | Cette variable permet d'envoyer différentes informations relatives à l'activité de vos visiteurs. Compatible avec Google Analytics V4 ("G-XXXXXXXX") et ATInternet ("siteId"). |
| analyticsConfiguration | obj | optionnel | analyticsConfiguration: { collectDomain: "exemple.com" } | Cette variable de configuration vous permet d'envoyer une configuration spécifique au fournisseur d'analyse de statistiques (requis avec le connecteur "atinternet"). Consultez cette section pour en savoir sur les variables supportées. |
| searchFiltered Déprécié | bool/obj | optionnel | searchFiltered: true | Cette variable permet de contextualiser la recherche. La valeur par défaut est true afin que le moteur de recherche renvoie uniquement des résultats dans le contexte choisi dans la variable filters. La valeur false permet de rendre accessible tous les contenus de la base de connaissances dans le moteur de recherche. Attention le contenu accessible reste conditionné par le scope de la solution (FAQ, PUSH...). Pour contextualiser la recherche sur une sélection différente de la variable filters, il est possible d'ajouter un tableau de chaîne de caractères (identifiant système du tag) pour spécifier le nouveau contexte de recherche (searchFiltered : {tags: ["TAG"]}). Note : Cette variable est dépréciée. Utilisez searchSettings.filters à la place. |
| customVariables | obj | optionnel | customVariables: { brand: "Smart Tribune"} | Cette variable permet de remplacer la valeur d'un jeton de personnalisation créé dans le contenu d'une réponse via Smart Dashboard. Note : On attend ici une chaîne de caractères qui peut contenir des balises HTML (span, a, b, u, i, br, img) avec ses attributs (id, class, style, name, title, target, href, rel, src, alt). |
| filters | obj | optionnel | filters: { thematics: [], tags: [], tagsOr: [] } | Cette variable de configuration permet de spécifier la contextualisation à appliquer. Il est possible de définir le filtrage en utilisant l'identifiant système thematics ou tags. L'opérateur utilisé est AND dans le cas de multiples valeurs au sein du même filtre ou entre les filtres. Il est possible de remplacer tags par tagsOr pour appliquer un opérateur OR entre chaque tag. Note : Ces objets contiennent un tableau (array) de chaîne de caractères (string). |
| headerId | string | optionnel | headerId: "headerTop" | Cette variable de configuration permet de spécifier l'identifiant de votre menu horizontal. L'intérêt de cette option réside dans le fait qu'elle corrige les problèmes de Scroll lors que le menu horizontal est dans un état CSS : position: fixed. Dans cet état le menu peut cacher, dans certain cas, des éléments de la FAQ lorsque celle-ci est affichée. |
| entrypoint | obj | optionnel | entrypoint: { type: "question", value: "slug-question" } | Cette variable de configuration permet d'afficher au chargement de Smart FAQ, une question, un guide, une page de contenus, ou les questions d'une catégorie. Pour cela il faut choisir le type (‘question', ‘thematic', 'guide', or 'content') et insérer dans ‘value' le slug de la question, de la catégorie, du guide, ou de la page de contenus. |
| customResponses | arr | optionnel | customResponses: ["tag"] | Cette variable permet de spécifier la contextualisation de la réponse personnalisée à appliquer en utilisant l'identifiant système des tags. Note : Cette variable est un tableau (array) de chaîne de caractères (string). |
| urls | obj | optionnel | urls: { localization: { en: "https://faq.example.com/en", fr: "https://faq.example.com/fr" } } | Cette variable de configuration contient les URLs utiles à votre FAQ. Consultez cette section pour en savoir plus sur les propriétés supportées. |
| searchSettings | obj | optionnel | searchSettings: { filters: { thematics: [], tags: [], tagsOr: [] } } | Cette variable de configuration contient tous les paramètres pour configurer votre moteur de recherche. Consultez cette section pour en savoir plus sur les propriétés supportées. |
Slug : C'est l'identifiant au format "chaîne de caractères" d'une question et d'une catégorie. Celui de la catégorie est trouvable dans Smart Dashboard (‘Menu' > ‘Base de connaissances' > ‘Catégories' > ‘identifiant système'). Celui de la question est disponible directement depuis la FAQ dans l'url (example.com/faq?question=SLUG).
URLs
| Variable | Type | Condition | Exemple | Description |
|---|---|---|---|---|
| localization | obj | optionnel | localization: { en: "https://faq.example.com/en", fr: "https://faq.example.com/fr" } | Cet objet de configuration vous permet de définir les URLs pour les différentes versions linguistiques de vos FAQ. En spécifiant ces URLs, notre système peut générer automatiquement le balisage hreflang approprié, ce qui aide les moteurs de recherche à comprendre la langue et le ciblage régional de votre contenu. Cela garantit que les utilisateurs sont dirigés vers la bonne version de votre FAQ en fonction de leur langue et de leur emplacement. |
Search Settings
| Variable | Type | Condition | Exemple | Description |
|---|---|---|---|---|
| filters | obj | optionnel | filters: { thematics: [], tags: [], tagsOr: [] } | Cette variable de configuration permet de spécifier la contextualisation à appliquer au moteur de recherche uniquement. Il est possible de définir le filtrage en utilisant l'identifiant système thematics ou tags. L'opérateur utilisé est AND dans le cas de multiples valeurs au sein du même filtre ou entre les filtres. Il est possible de remplacer tags par tagsOr pour appliquer un opérateur OR entre chaque tag. Note : Ces objets contiennent un tableau (array) de chaîne de caractères (string). |
| strictness | string | optionnel | strictness: "strict" | Cette variable permet de contrôler la sensibilité de la recherche au sein de l'application. En ajustant ce paramètre, vous pouvez modifier le seuil des résultats de recherche pour qu'ils soient soit stricts, soit plus tolérants, selon vos besoins. strict : La recherche retournera des résultats qui correspondent étroitement aux critères de recherche, en filtrant les résultats moins pertinents. Ceci est utile lorsque des résultats précis sont nécessaires. normal (par défaut) : la recherche sera plus tolérante, retournant une gamme plus large de résultats qui peuvent inclure plus de variations et de correspondances partielles. Cela peut être utile lorsqu'un ensemble de résultats plus complet est préféré. |
Analytics Configuration
En fonction du connecteur utilisé, vous pouvez spécifier une configuration optionnelle au fournisseur d'analyse de statistiques en passant un objet dans analyticsConfiguration.
Configuration ATInternet
| Propriété | Type | Description |
|---|---|---|
| collectDomain | string | Domaine de collecte des statistiques. Vous pouvez retrouver cette information sur votre tableau de bord ATInternet. (En savoir plus) |
| addEventURL | string | Ajoute automatiquement une propriété page_url à tous les évènements, contenant l'URL de la page courante. Valeurs possibles : false, withoutQS, true (par défaut). |
Configuration Google Analytics
| Propriété | Type | Description |
|---|---|---|
| transportUrl | string | Envoie les données à un conteneur côté serveur. |
| firstPartyCollection | bool | Doit être configuré sur true lorsque transportUrl est spécifié. |
Scripts tiers
Dans certains cas, vous devrez autoriser des domaines de tierces partie car nous utilisons des scripts externes à Smart Tribune pour les fonctionnalités décrites ci-dessous.
Polyfill-fastly.io
Polyfill-fastly.io est un service développé par The Financial Times qui permet de fournir des fonctionnalités non-supportées sur certains navigateurs. Ce service est utilisé pour assurer la compatibilité avec tous les navigateurs jusqu'à IE 11.
| Version | URL du Script | Domaine à autoriser |
|---|---|---|
| V3 | https://polyfill-fastly.io/v3/polyfill.min.js | polyfill-fastly.io |
Google Analytics
Google Analytics est un outil d’analyse développé par Google qui permet de mesurer le trafic d'un site web et de recueillir des informations essentielles sur les visiteurs de ce dernier.
| Version | URL du Script | Domaine à autoriser |
|---|---|---|
| V3 | https://www.google-analytics.com/analytics.js | google-analytics.com |
| V4 | https://www.googletagmanager.com/gtag/js | googletagmanager.com |
ATInternet
ATInternet est une entreprise française spécialisée dans la mesure d'audience et de performance de sites web, mobiles, d'applications et des réseaux sociaux.
| Version | URL du Script | Domaine à autoriser |
|---|---|---|
| V6 | https://tag.aticdn.net/piano-analytics.js | tag.aticdn.net |