Développeurs

Le widget dans le code

Placez la conversation sur votre site avec une seule balise script, ouvrez-la depuis vos propres boutons et indiquez-lui quel client connecté pose la question.

Qui peut l'utiliser : Tous les membres de l'espace. Générer, renouveler et désactiver le secret d'identité demande « Créer, modifier et supprimer des assistants » (Propriétaire et Administrateur).

Les images montrent les écrans en anglais. Les étapes citent les boutons et les onglets tels que votre tableau de bord les affiche en français.

1. 1

   Étape 1 : Copiez la balise script depuis l'onglet « Installer »

   Appuyez sur « Agent IA » dans le menu de gauche, ouvrez votre chatbot puis son onglet « Installer ». L'« Extrait de code » contient la clé publique de votre chatbot dans data-key : collez-le juste avant la balise de fermeture </body> de chaque page.

   <script src="https://magiz.ai/widget.js" data-key="YOUR_PUBLIC_KEY" defer></script>

   Vos chatbots

   

2. 2

   Étape 2 : Ajoutez des attributs data- là où il en faut

   data-open="load" ouvre la conversation dès le chargement de la page, pour une page faite uniquement pour la conversation. data-launcher="bubble" ou data-launcher="teaser" impose le lanceur sur cette page, quel que soit le réglage du tableau de bord, data-cookie-domain=".example.com" garde une seule conversation sur tous vos sous-domaines, et data-lang="ar", data-lang="fr" ou data-lang="en" affiche la fenêtre de chat dans cette langue, de droite à gauche pour l’arabe, quand vos visiteurs lisent une autre langue que la page.

   <script src="https://magiz.ai/widget.js" data-key="YOUR_PUBLIC_KEY" data-open="load" defer></script>

3. 3

   Étape 3 : Ouvrez la conversation depuis votre propre bouton

   Une fois le script chargé, la page dispose d'un objet MagizAI. MagizAI.open() ouvre la conversation, MagizAI.open() avec une question l'ouvre avec cette question déjà posée, et MagizAI.close() la ferme.

   <button onclick="MagizAI.open('Which facial suits sensitive skin?')">Ask about facials</button>

4. 4

   Étape 4 : Appelez MagizAI.logout() quand un client se déconnecte

   Cet appel met fin à la conversation de ce navigateur et oublie à qui elle appartenait : la personne suivante sur le même ordinateur démarre comme un nouveau visiteur. Vous pouvez l'appeler sans risque même si la conversation n'a jamais été ouverte.

5. 5

   Étape 5 : Appuyez sur « Générer un secret » sous « Identité de visiteur signée »

   Sur la même page d'installation, appuyez sur « Générer un secret » et copiez-le aussitôt : « Copiez-le maintenant. Il ne sera plus affiché. » Gardez-le sur votre serveur, jamais dans le code du navigateur.

   

6. 6

   Étape 6 : Signez un jeton pour le client connecté

   Sur votre serveur, signez un JWT en HS256 avec le secret. Mettez votre propre identifiant de la personne dans sub (jamais « 0 »), ajoutez email et name, et si vous le souhaitez plan, company et locale ; un jeton n'est jamais accepté plus de 24 heures, quoi que dise son exp.

   import jwt from 'jsonwebtoken';
   
   const token = jwt.sign(
     { sub: user.id, email: user.email, name: user.name },
     process.env.MAGIZAI_IDENTITY_SECRET,
     { algorithm: 'HS256', expiresIn: '10m' },
   );

7. 7

   Étape 7 : Donnez le jeton au widget

   Placez-le sur la balise script comme data-identity, ou donnez à window.MagizAIIdentity le jeton ou une fonction qui en renvoie un nouveau. L'assistant sait alors qui pose la question et peut répondre sur le compte de cette personne, par exemple « où est ma commande », au lieu de la traiter comme anonyme.

   <script src="https://magiz.ai/widget.js" data-key="YOUR_PUBLIC_KEY" data-identity="SIGNED_TOKEN" defer></script>

8. 8

   Étape 8 : Renouvelez ou désactivez le secret

   « Renouveler le secret » en crée un nouveau et l'ancien cesse aussitôt de fonctionner : mettez donc d'abord le nouveau secret sur votre serveur. « Désactiver » traite les nouveaux visiteurs comme anonymes ; les visiteurs déjà vérifiés gardent leur accès.

Bloqué à une étape ? Demandez à notre équipe