Snippet Search Standalone

Cette solution a pour but d’afficher un moteur de recherche permettant de rechercher dans la base de connaissance (KbId) spécifiée.

Lors d’une recherche, une autocomplétion s’affiche avec des suggestions. Si une recherche est validée via la touche “ENTREE” ou le clic sur le bouton de recherche, l’utilisateur sera dirigé vers la FAQ en question avec la recherche effectuée.

Integration

HTML

Ajouter dans votre code HTML un conteneur avec un identifiant qui permettra d’afficher le widget à l’endroit de votre choix sur la page <div id="containerId_DE_VOTRE_CHOIX"></div>. Il faudra indiquer cet identifiant dans l’étape suivante (1.2) au niveau de containerId.

<div id="st-search-standalone"></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('STSearchStandaloneLoaded', function (e) {
    e.detail.init({
      kbId: 2,
      locale: 'fr',
      cookieOptin: true,
      filters: {
        thematics: ['category-1'],
        tags: ['tag-1'],
      },
      labels: {
        title: {
          fr: 'Moteur de recherche',
          en: 'Search bar',
        },
        emptyMessage: {
          fr: 'Aucune question',
          en: 'No question',
        },
        placeholder: {
          fr: 'Saisir ta question',
          en: 'Enter your question',
        },
        examplesTitle: {
          fr: 'Examples de recherche ?',
          en: 'Examples',
        },
        submit: {
          fr: 'Chercher',
          en: 'Search',
        },
      },
      limit: 50,
      faqUrl: 'https://example.com/faq',
      openInNewTab: false,
      searchExamples: {
        fr: ['Lorem ipsum', 'Aenean', 'Consectetur adipiscing'],
      },
      containerId: 'st-search-standalone',
    });
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SearchStandalone/searchstandalone.main.js"
></script>

Lien vers la démonstration : Cliquez ici

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.

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:[] }`	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.
containerId	string	optionnel	`containerId: "st-faq-context"`	Il s’agit de l’identifiant du container qui va afficher le widget.
searchExamples	obj	optionnel	`searchExamples: { fr: [ "Lorem ipsum", "Aenean", "Consectetur adipiscing" ] }`	Permet de définir des exemples de recherche à afficher en dessous du champ

Integration​

HTML​

JS​

Liste des variables​

Integration

HTML

JS

Liste des variables