Site web

Dans ce guide, nous voyons comment intégrer votre Assistant IA à votre site avec notre Widget ou un iFrame.

Widget

Le Widget permet d’intégrer l’Agent Quickchat AI directement sur votre site. Il apparaît généralement comme une bulle de chat en bas à droite. Au clic, il s’ouvre en fenêtre de chat pour poser des questions, obtenir de l’aide ou accéder à des informations.

Intégrer le Widget

1. Localisez le code de votre page

   Ouvrez le fichier HTML de votre page ou l’éditeur de code de votre builder.

2. Récupérez le code du Widget

   • Connectez‑vous à Quickchat AI App.
   • Allez dans Website sous Channels dans la barre latérale gauche.
   • Cliquez sur l’onglet Install.
   • Copiez le Widget script.

3. Collez le code

   Insérez le script juste avant la balise de fermeture </body> sur toutes les pages concernées.

Si vous utilisez WordPress

Avec footer.php

1. Connectez‑vous au tableau de bord WordPress.
2. Allez dans Apparence > Éditeur de thème et ouvrez footer.php.
3. Collez le script du Widget juste avant </body>.
4. Enregistrez.

Voici une vidéo pas‑à‑pas pour ajouter le Widget via footer.php :

Avec une extension

1. Installez par exemple Insert Headers and Footers depuis le répertoire des extensions.
2. Ouvrez ses réglages (Settings > Insert Headers and Footers).
3. Collez le script dans la section footer.
4. Enregistrez.

Voici une vidéo pas‑à‑pas pour l’installation via extension :

Si vous utilisez un Website Builder

Pour WordPress, Webflow, Wix, etc., consultez leur documentation pour ajouter du code personnalisé.

Pour de l’aide, écrivez‑nous à contact@quickchat.ai.

Personnaliser le Widget

La section Appearance permet d’ajuster l’aspect et l’expérience du Widget.

Options :

• Primary Color : couleur principale des messages utilisateur
• Header Background Color : fond de l’en‑tête
• Header Text Color : couleur du texte de l’en‑tête
• AI Avatar Image : avatar de l’Agent dans l’en‑tête et les messages
• Widget Bubble : icône visible avant ouverture
• Widget Bubble Size : petit, moyen ou grand
• Widget Bubble Position : bas‑droite ou bas‑gauche
• Widget Chat Window Dimensions : largeur (320–720 px) et hauteur (520–1020 px)
• Animate AI Responses : affiche la génération progressive des réponses
• Auto-Open Widget : ouvre automatiquement le Widget au chargement
• Remove Quickchat AI Branding : expérience en marque blanche
• Animate Chat Header Collapsing : animation fluide de l’en‑tête après le premier message

Fonctionnalités avancées : paramètres personnalisés

Le widget et l’iFrame Quickchat AI acceptent des paramètres personnalisés à l’initialisation. Ils permettent :

• d’enrichir l’analytique (visibles dans l’export CSV sur la plateforme)
• de personnaliser la conversation (l’Agent est conscient des paramètres)

Exemples utiles :

• User name : Mike
• Subscription Tier : VIP
• Most recently purchased item : Silver package (upgraded)
• Next account level : Platinum
• Points required to reach the next account level : 758

Exemple d’échange :

Pour ajouter des paramètres comme ci‑dessus, incluez la ligne suivante dans le script de Your Website > Install.

widget :

_quickchat("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

iFrame :

_quickchat_embedded("custom_params", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

L’objet JSON peut contenir jusqu’à cinq clés. Elles seront ajoutées à chaque nouvelle conversation.

Script complet :

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://widget.quickchat.ai/chat.js","_quickchat");
  _quickchat("host", "app.quickchat.ai");
  _quickchat("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758");
  _quickchat("init", "abcdefghij");
</script>

iFrame

<div id="quickchat-embedded" style="height:600px;overflow: hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://widget.quickchat.ai/embed.js","_quickchat_embedded");
  _quickchat_embedded("host", "app.quickchat.ai");
  _quickchat_embedded("custom_params", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758");
  _quickchat_embedded("init", "0zmn6up7zo");
</script>

iFrame

L’iFrame permet d’intégrer l’Agent en tant que fenêtre de chat à l’emplacement exact souhaité.

Intégrer l’iFrame

1. Récupérer le code iFrame Quickchat AI

   • Connectez‑vous à Quickchat AI App.
   • Allez dans Website sous Channels.
   • Cliquez sur Install.
   • Copiez le iFrame script.

2. Ouvrir le fichier HTML ou l’éditeur de code

3. Coller le code

   • Insérez l’iFrame dans le <body>.
   • Placez‑le exactement là où vous voulez afficher la fenêtre de chat.