Aller au contenu principal

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.

info

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

attention

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

VariableTypeConditionExempleDescription
kbIdintrequis (optionnel avec auth: true)kbId : 2Variable 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".
localestringrequis (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.
buildNamestringoptionnelbuildName : "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.
cookieOptinboolrequiscookieOptin : falseElle 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.
authbooloptionnelauth : falseElle 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.
analyticsConnectorstringoptionnelanalyticsConnector : "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'.
analyticsUAstringoptionnelanalyticsUA : "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").
analyticsConfigurationobjoptionnelanalyticsConfiguration : { 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.
searchFilteredbool/objoptionnelsearchFiltered : trueCette 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"]}).
customVariablesobjoptionnelcustomVariables : { 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).
filtersobjoptionnelfilters : { thematics:[], tags:[] }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).
headerIdstringoptionnelheaderId: "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.
entrypointobjoptionnelentrypoint : { type: "question", value: "slug-question" }Cette variable de configuration permet d'afficher au chargement de Smart FAQ, une question ou les questions d'une catégorie. Pour cela il faut choisir le type (‘question' ou ‘thematic') et insérer dans ‘value' le slug de la question ou de la catégorie.
customResponsesarroptionnelcustomResponses : [ "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).

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éTypeDescription
collectDomainstringDomaine de collecte des statistiques. Vous pouvez retrouver cette information sur votre tableau de bord ATInternet. (En savoir plus)
addEventURLstringAjoute 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éTypeDescription
transportUrlstringEnvoie les données à un conteneur côté serveur.
firstPartyCollectionboolDoit être configuré sur true lorsque transportUrl est spécifié.

Scripts tiers

attention

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.

VersionURL du ScriptDomaine à autoriser
V3https://polyfill-fastly.io/v3/polyfill.min.jspolyfill-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.

VersionURL du ScriptDomaine à autoriser
V3https://www.google-analytics.com/analytics.jsgoogle-analytics.com
V4https://www.googletagmanager.com/gtag/jsgoogletagmanager.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.

VersionURL du ScriptDomaine à autoriser
V6https://tag.aticdn.net/piano-analytics.jstag.aticdn.net