Smart Form - Input
Integration Smart Form - Input
HTML
Ajouter dans votre code HTML un conteneur avec un identifiant qui permettra d’afficher Smart Form à l’endroit de votre choix sur la page <div id="containerId_DE_VOTRE_CHOIX"></div>
.
Sur votre champ de saisie, pensez à spécifier un identifiant afin de pouvoir le préciser dans le code JS <input id="inputId_DE_VOTRE_CHOIX"/>
.
<input id="my-input" />
<div id="st-contact-form-input-container"></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('STContactFormInputLoaded', function (e) {
e.detail.init({
kbId: 2,
locale: 'fr',
cookieOptin: false,
filters: {
thematics: [],
tags: [],
},
labels: {
title: {
fr: 'Suggestions',
},
openOnFaq: {
fr: 'Ouvrir la faq knowledge',
},
goToFaqLink: {
fr: 'Aller à la faq knowledge',
},
},
limit: 5,
faqUrl: 'https://example.com/faq',
openInNewTab: true,
inputId: 'my-input',
containerId: 'st-contact-form-input-container',
});
});
</script>
<script
type="text/javascript"
async
src="https://assets.app.smart-tribune.com/smart-tribune/ContactFormInput/contactforminput.main.js"
></script>
Lien vers la démonstration : Cliquez ici
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.
Liste des variables
Variable | Type | Condition | Exemple | Description |
---|---|---|---|---|
kbId | int | requis | 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 | 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. |
cookieOptin | bool | requis | cookieOptin: false | Elle permet d'empêcher ou non l'activation du cookie Google Analytics (valeur possible : true ou false). En désactivant cette fonctionnalité, il ne sera plus possible d'envoyer des informations dans Google Analytics pour votre FAQ. La valeur par défaut est false. |
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). |
labels | obj | optionnel | labels: { title: {}, emptyMessage: {}, openOnFaq: {}, goToFaqLink: {} } | Cette variable permet de surcharger les chaines de caractères du widget par celles de votre choix. Nous vous conseillons de vous baser sur le snippet d'exemple ci-dessus pour ajouter vos propres textes. |
limit | int | optionnel | limit: 5 | Limite du nombre d’éléments à afficher (max: 25). |
faqUrl | string | optionnel | faqUrl: "https://example.com/faq" | Cela permet de rediriger les utilisateurs vers la FAQ. |
openInNewTab | bool | optionnel | openInNewTab: true | Permet d’ouvrir les liens des suggestions dans un nouvel onglet. |
inputId | string | optionnel | inputId: "my-input" | Il s’agit de l’identifiant du champ du formulaire sur lequel il faut appliquer la recherche. |
containerId | string | optionnel | containerId: "st-contact-form-input-container" | Il s’agit de l’identifiant du container qui va afficher le widget. |
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). |
searchSettings | obj | optionnel | searchSettings: { strictness: "strict" } | 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. |
Search Settings
Variable | Type | Condition | Exemple | Description |
---|---|---|---|---|
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é. |