Snippet Smart Agent

Intégration

L'installation de la solution Smart Agent sur le site du client s'effectue en intégrant un snippet de code javascript au sein de la page souhaitée.

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('STSmartBotLoaded', function (e) {
    e.detail.init({
      botId: 'xxx',
      locale: 'fr',
    });
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

L'intégration du snippet de code ci-dessus suffit à permettre l'affichage partiel du Smart Agent 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 smartbot.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 pré-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 au bot spécifié devront être préalablement déclarés directement dans la configuration du bot dans Smart Dashboard.

Environnement de pré-production

attention

Le chemin d'accès au fichier smartbot.main.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/SmartBot/smartbot.main.js"
></script>

Script de PRE-PRODUCTION

<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/public/smartbot.main.js"
></script>

Liste des variables

Variable	Type	Condition	Exemple	Description
botId	string	requis	botId: "xxx"	Variable spécifique à chaque client, elle correspond à l'identifiant du bot à utiliser. Celle-ci est disponible dans Smart Dashboard, l'interface d'administration de contenus. Elle vous sera communiquée par votre Account Manager.
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 bots multilingues.
containerId	string	optionnel	containerId: "my-bot"	Identifiant de l'élément HTML dans lequel le Smart Agent sera rendu. Par défaut, la valeur est st-smartbot.
env	string	optionnel	env: "production"	Environnement d'exécution. Valeurs possibles : production ou preproduction.
variables	object	optionnel	variables: { key: value }	Objet contenant des variables personnalisées (string, number ou boolean) qui seront transmises au dialogue.
auth	bool	optionnel	auth: true	Active ou désactive le système d'authentification. La valeur par défaut est false.
ui	object	optionnel	ui: { display: {...} }	Paramètres d'interface utilisateur (voir section dédiée ci-dessous).

Paramètres UI

Le paramètre ui permet de configurer l'interface utilisateur du Smart Agent :

ui: {
  display: {
    alwaysOpen: true,
    displayAiGenerationVoteSatisfaction: true
  },
  authentication: {
    defaultLoginMethod: "sso",
    account: "my-account"
  }
}

Sous-objet	Propriété	Type	Description
display	alwaysOpen	bool	Si true, le Smart Agent reste toujours ouvert sans possibilité de le fermer.
display	displayAiGenerationVoteSatisfaction	bool	Si true, affiche le vote de satisfaction pour les réponses générées par l'IA.
authentication	defaultLoginMethod	string	Méthode de connexion par défaut. Valeurs possibles : password ou sso.
authentication	account	string	Identifiant du compte pour l'authentification.

Les fonctions optionnelles

Utilisation de la fonction show()

La fonction show() va vous permettre d'ouvrir le Smart Agent.

Depuis un...	Description
bouton	Appelez simplement la fonction show() sur votre bouton.

<button onclick="window.stSmartBot.show()">Ouvrir le chat</button>

Depuis un...	Description
timer	Placez un setTimeout dans une balise <script> après initialisation de Smart Agent.

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    window.stSmartBot = e.detail;
    window.stSmartBot.init({
      botId: 'xxx',
      locale: 'fr',
    });
    setTimeout(() => {
      window.stSmartBot.show();
    }, 3000);
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

Depuis un...	Description
scroll	Placez un écouteur après initialisation de Smart Agent.

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    window.stSmartBot = e.detail;
    window.stSmartBot.init({
      botId: 'xxx',
      locale: 'fr',
    });
    window.addEventListener(
      'scroll',
      function (e) {
        window.stSmartBot.show();
      },
      false,
    );
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

Si vous avez besoin d'utiliser ces fonctions en dehors du script (sur un bouton par exemple), vous aurez besoin de stocker stSmartBot à l'intérieur de window qui est une variable globale :

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    window.stSmartBot = e.detail;
    window.stSmartBot.init({
      botId: 'xxx',
      locale: 'fr',
    });
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

Utilisation de la fonction hide()

La fonction hide() va vous permettre de fermer le Smart Agent.

Depuis un...	Description
bouton	Appelez simplement la fonction hide() sur votre bouton.

<button onclick="window.stSmartBot.hide()">Fermer le chat</button>

Utilisation de la fonction read()

La fonction read() va vous permettre de récupérer les paramètres d'initialisation actuels.

Depuis un...	Description
script	Appelez la fonction read() pour obtenir la configuration.

<script type="text/javascript">
  var config = window.stSmartBot.read();
  console.log(config);
</script>

Utilisation de la fonction updateVariables()

La fonction updateVariables() va vous permettre de mettre à jour les variables du dialogue en cours.

Depuis un...	Description
script	Appelez la fonction updateVariables() avec un objet contenant les nouvelles valeurs.

<script type="text/javascript">
  window.stSmartBot.updateVariables({
    userName: 'Jean',
    isVIP: true,
    accountAge: 5,
  });
</script>

Utilisation de la fonction getVariables()

La fonction getVariables() va vous permettre de récupérer les variables actuelles du dialogue.

Depuis un...	Description
script	Appelez la fonction getVariables() pour obtenir les variables.

<script type="text/javascript">
  var variables = window.stSmartBot.getVariables();
  console.log(variables);
</script>

Événements

Le Smart Agent émet des événements personnalisés que vous pouvez écouter :

STSmartBotLoaded

Déclenché lorsque le script Smart Agent est chargé et prêt à être initialisé.

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    console.log('Smart Agent chargé', e.detail);
  });
</script>

STSmartBotInitialized

Déclenché lorsque le Smart Agent a été initialisé avec succès.

<script type="text/javascript">
  window.addEventListener('STSmartBotInitialized', function (e) {
    console.log('Smart Agent initialisé', e.detail);
  });
</script>

Exemple complet

Voici un exemple complet d'intégration avec toutes les options :

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    window.stSmartBot = e.detail;
    window.stSmartBot.init({
      botId: 'xxx',
      locale: 'fr',
      containerId: 'st-smartbot',
      env: 'production',
      variables: {
        userName: 'Jean',
        userType: 'premium',
      },
      auth: true,
      ui: {
        display: {
          alwaysOpen: false,
          displayAiGenerationVoteSatisfaction: true,
        },
        authentication: {
          defaultLoginMethod: 'sso',
          account: 'my-account',
        },
      },
    });
  });

  window.addEventListener('STSmartBotInitialized', function (e) {
    console.log('Smart Agent prêt !');
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>