Site web

Il existe trois façons de placer votre Agent Quickchat AI sur le web : choisissez celle qui convient à la surface que vous souhaitez afficher.

• Widget : la bulle de chat flottante dans le coin de votre site. Idéal pour un support polyvalent.
• Embed : une fenêtre de chat intégrée, placée exactement où vous le souhaitez sur une page. Idéal pour intégrer l’IA dans un écran d’application spécifique, une page de centre d’aide ou une fiche produit.
• Page de discussion : une expérience de chat plein écran hébergée par Quickchat (aucune installation, aucun code). Idéal lorsque vous souhaitez partager un lien avec quelqu’un (par exemple par e-mail de support, sur un Slack interne, avec des bêta-testeurs) sans toucher à son navigateur.

Installez la surface de votre choix depuis Canaux → Votre site web → Installer. La page comporte trois sous-onglets qui reflètent la structure de cet article : Installer (extraits de code + accès), Apparence (style visuel) et Contenu textuel (les messages et libellés visibles par le visiteur).

Widget

Le Widget vous permet d’intégrer votre Agent Quickchat AI directement sur votre site web, offrant aux utilisateurs un moyen fluide d’interagir avec l’IA. Le Widget s’affiche généralement sous forme de bulle de chat dans le coin inférieur droit de votre page. Au clic, il s’ouvre en fenêtre de chat, permettant aux utilisateurs de poser des questions, d’obtenir de l’aide ou d’accéder à des informations.

Intégrer le Widget sur votre site

1. Localisez le code de votre page

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

2. Récupérez le code du Widget

   • Connectez‑vous à Quickchat AI App.
   • Allez dans la section Votre site web sous la catégorie Canaux dans la barre latérale gauche.
   • Cliquez sur l’onglet Installer.
   • Copiez le code du Widget script.

3. Collez le code

   Insérez le Widget script juste avant la balise de fermeture </body> sur toutes les pages où vous souhaitez afficher le Widget.

Si vous utilisez WordPress

Le plus simple est notre extension officielle Quickchat AI Agent plugin : installez-la depuis le répertoire des extensions WordPress, collez votre Scenario ID, et le Widget apparaît automatiquement, sans aucun code de thème à modifier. Le guide WordPress fournit des instructions pas à pas, ainsi qu’une option de script manuel si vous préférez ne pas utiliser l’extension.

Si vous utilisez un Website Builder

Si vous utilisez des plateformes comme WordPress, Webflow ou Wix, consultez leur documentation pour ajouter du code personnalisé.

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

Page de discussion

La Page de discussion est une version hébergée et plein écran de votre Agent IA, accessible via une URL Quickchat. Il n’y a rien à installer : partagez le lien et vos visiteurs peuvent discuter avec votre Agent directement dans leur navigateur. Utilisez-la lorsque :

• Vous souhaitez une expérience de chat mais n’avez pas de site web (ou ne voulez pas toucher à son code).
• Vous partagez l’IA en interne avec un petit groupe (bêta-testeurs, équipe de support, prospects commerciaux) et avez besoin d’un lien à accès contrôlé plutôt que d’un widget public.
• Vous souhaitez envoyer l’IA comme canal de suivi par e-mail, sur Slack ou dans votre CRM.

Configurez qui peut ouvrir la Page de discussion depuis Installer → Accès à la page de discussion (voir Contrôle d’accès ci-dessous).

Contrôle d’accès

L’onglet Installer propose deux contrôles d’accès qui s’appliquent à votre déploiement :

Accès aux widgets et aux intégrations

Un interrupteur principal en haut de l’onglet Installer. Lorsqu’il est activé, les scripts du Widget et de l’Embed fonctionnent normalement dans les navigateurs des visiteurs. Lorsqu’il est désactivé, le Widget et l’Embed sont indisponibles sur votre site même si le script y est toujours collé : utile pour mettre l’IA temporairement hors ligne sans retirer l’extrait de code, ou pour restreindre l’accès public tout en gardant la Page de discussion ouverte aux utilisateurs invités.

Accès à la page de discussion

Indépendamment de l’interrupteur du Widget et de l’Embed, vous pouvez restreindre qui peut ouvrir la Page de discussion :

• Tout le monde : l’URL de la Page de discussion est publique. Toute personne disposant du lien peut l’utiliser.
• Utilisateurs invités uniquement : seuls les utilisateurs du chat que vous avez invités (par e-mail) peuvent utiliser la Page de discussion. Ils devront s’authentifier.
• Personne : la Page de discussion est entièrement désactivée.

Pour accorder l’accès sous Utilisateurs invités uniquement, cliquez sur Inviter les utilisateurs du chat à côté du bouton radio : cela vous amène vers Paramètres du compte → Utilisateurs du chat, où vous pouvez envoyer des invitations par e-mail et gérer qui a accès.

Personnalisation

Les sous-onglets Apparence et Contenu textuel vous permettent d’adapter l’apparence du Widget, de l’Embed et de la Page de discussion, ainsi que le texte vu par vos visiteurs. Ces trois surfaces de déploiement partagent ces réglages : modifiez-les une fois et ils s’appliquent partout où votre Agent est déployé.

Le volet de droite des onglets Installer/Apparence/Contenu textuel dispose de ses propres commandes d’aperçu : basculez entre les aperçus Widget, Embed et Page de discussion, et entre les fenêtres Desktop et Mobile, pour visualiser vos changements avant de publier.

Apparence

Style visuel des surfaces de chat, regroupé en Branding, Taille et position, Thème et Autres réglages.

Marque

• Avatar de l’agent IA : une seule image utilisée à la fois dans l’en‑tête du chat et sur le bouton du lanceur (max 5 Mo). Il s’agit d’un seul réglage, pas de deux : importez une seule image et elle apparaît aux deux endroits (elle remplace l’ancien « header logo » et l’ancienne « launcher icon », auparavant distincts). Chaque Agent démarre avec un avatar par défaut intégré. Réinitialiser par défaut le restaure, et le supprimer n’affiche aucun avatar.

Taille et position

• Taille du launcher : Classic, Input Only ou Petit. Contrôle l’apparence du lanceur de chat avant son ouverture.
• Libellé du launcher : affiché uniquement lorsque Petit est sélectionné : texte personnalisé sur le petit bouton du lanceur (jusqu’à 25 caractères), par exemple « Ask AI » ou « Chat ». Laissez vide pour un lanceur avec icône uniquement.
• Position du widget : bas‑droite ou bas‑gauche.
• Dimensions de la fenêtre de chat : largeur (300–700 px) et hauteur (400–1200 px) de la fenêtre de chat.
• Launcher déplaçable : permet aux visiteurs de déplacer le lanceur à un autre endroit de la page. Utile lorsqu’il recouvre du contenu important.

Thème

Choisissez la façon dont les surfaces de chat sont colorées :

• Clair et Sombre sont des préréglages fixes qui ont la même apparence sur chaque compte.
• Personnalisé débloque une palette complète qui vous est propre. Lorsque Personnalisé est sélectionné, des commandes de couleur apparaissent pour l’arrière‑plan, l’en‑tête et le texte de l’en‑tête, l’accent (utilisé pour les boutons comme le bouton de démarrage avant le chat, les puces de suggestion et les actions de notation), la bulle de message et son texte, le texte des messages de l’IA, la couleur des liens, le champ de saisie, les bordures, et plus encore. Chaque couleur est vérifiée pour respecter le contraste WCAG AA par rapport à son arrière‑plan et vous avertit lorsqu’un appariement est difficile à lire.

Les couleurs d’en‑tête et d’accent de marque vivent dans le thème Personnalisé. Clair et Sombre restent des préréglages neutres, donc basculer de l’un à l’autre ne reporte jamais une couleur personnalisée.

Lorsque Personnalisé est sélectionné, la Chat Page dispose aussi de ses propres couleurs de barre latérale : Fond de la barre latérale, Texte de la barre latérale, Survol de la barre latérale et Texte au survol. Elles s’appliquent uniquement à la vue plein écran de la Chat Page, pas au widget bubble ou embed. Laissez les couleurs de texte vides et la Chat Page choisit automatiquement une couleur lisible pour l’arrière‑plan choisi.

Vous pouvez aussi définir l’arrondi des coins (rondeur des bulles, des champs de saisie et des boutons) ainsi que la taille du texte. Les deux s’appliquent dans tous les modes de thème.

Autres paramètres

• Ouverture automatique du widget : ouvre automatiquement le Widget au chargement de la page.
• Supprimer la marque Quickchat IA : masque le pied de page « Powered by Quickchat AI » pour une expérience entièrement en marque blanche (disponible sur les forfaits incluant la marque blanche).
• Évaluation des Conversations : permet aux visiteurs de noter la conversation à la fin. Les résultats apparaissent dans Insights → Évaluation des Conversations.

Contenu textuel

Le sous-onglet Contenu textuel contrôle chaque élément de texte visible par le visiteur :

• Texte d’en-tête : texte affiché en haut de la fenêtre de chat.
• Message de bienvenue : le premier message de l’Agent IA au début de chaque conversation (par exemple « Bonjour, avez-vous besoin d’aide ? »).
• Afficher comme pop-up : interrupteur qui affiche le message de bienvenue sous forme de bulle flottante à côté du lanceur pour attirer l’attention avant que le visiteur ne clique.
• Démarreurs de conversation : jusqu’à 3 exemples de messages présentés au visiteur avant qu’il ne commence à taper. En cliquer un l’envoie comme premier message : utile pour orienter les visiteurs vers les points forts de votre IA (« Comment installer le widget ? », « Quelles intégrations prenez-vous en charge ? »).
• Placeholder de saisie : texte d’indication dans le champ de message vide.
• Texte d’avertissement : texte affiché derrière la conversation, informant généralement les utilisateurs qu’ils s’adressent à une IA. Nous recommandons de le garder clair et visible.

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

Le Widget et l’Embed Quickchat AI vous permettent de passer des paramètres personnalisés à l’initialisation. Ils peuvent servir à :

• enrichir l’analytique (ils sont disponibles dans l’export CSV sur la plateforme Quickchat)
• personnaliser la conversation (Quickchat AI est conscient de tous les paramètres fournis)

Voici des exemples de paramètres personnalisés 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

Voici un exemple de conversation montrant un Agent IA conscient des valeurs fournies dans les paramètres personnalisés :

Pour ajouter des paramètres personnalisés comme ceux ci-dessus, incluez la ligne suivante dans le script que vous avez trouvé sous Votre site web > Installer.

Le Widget et l’Embed utilisent la même signature d’appel :

_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",
});

Ces attributs sont assignés à chaque nouvelle conversation ; nous recommandons de vous limiter à quelques clés.

Astuce

Les paramètres personnalisés avec des noms en snake_case (par exemple order_id, customer_tier) peuvent être injectés directement dans les API Actions sous la forme {{metadata_order_id}}, {{metadata_customer_tier}}, etc. Voir Variables d’AI Action pour plus de détails.

Exemple de script :

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://bubble.quickchat.ai/chat.js","_quickchat");
  _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>

Embed

<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://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _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>

Embed

L’Embed vous permet de placer l’Agent Quickchat AI directement dans une page sous forme de fenêtre de chat intégrée, au lieu d’une bulle flottante. Utilisez-le lorsque vous voulez que le chat se trouve à un endroit précis de la page : une colonne de centre d’aide, une page de contact, une barre latérale dans l’application, etc.

Ajouter l’Embed

1. Récupérez le code de l’Embed

   • Connectez‑vous à Quickchat AI App.
   • Allez dans Canaux → Votre site web dans la barre latérale gauche.
   • Cliquez sur l’onglet Installer.
   • Copiez le Embed snippet (il inclut à la fois le conteneur <div id="quickchat-embedded"> et le script de chargement).

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

3. Collez le code

   • Insérez le Embed snippet dans le <body> de votre page.
   • Placez-le exactement à l’endroit où vous voulez afficher la fenêtre de chat. Le <div> contrôle la taille : ajustez le style="height:600px" en ligne pour qu’il corresponde à l’emplacement de votre mise en page.