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 : Installer (choisissez comment ajouter votre Agent IA), Apparence (style visuel) et Contenu textuel (les messages et libellés visibles par vos visiteurs). L’onglet Installer s’ouvre sur un sélecteur de méthode, regroupe les contrôles de disponibilité et d’accès dans leur propre section, et affiche un Scenario ID copiable dont les extensions et l’API ont besoin.

Outils de configuration facultatifs

• Vérifier un extrait Widget. Vérifiez le code collé avec le Scenario ID fourni. Votre site n’est pas récupéré.

• Comparer les méthodes de déploiement. Comparez les canaux, accès au site et fonctionnalités déclarés aux options de configuration de Quickchat AI. Votre site et votre compte ne sont pas inspectés.

• Comparer HTML et Markdown d’une page exemple. Récupérez le HTML initial, le contenu Markdown et les liens d’outils d’un exemple Quickchat AI fixe. JavaScript n’est pas exécuté et les sites arbitraires ne sont pas inspectés.

Les formulaires sont en anglais.

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.

Ajouter le Widget à votre site web

Ouvrez Canaux → Votre site web → Installer. L’onglet débute par « Comment souhaitez-vous ajouter votre Agent IA ? » et liste les méthodes d’installation, de la plus simple à la plus complexe. Choisissez celle qui correspond à votre site :

• WordPress : installez notre Quickchat AI Agent plugin gratuit, collez votre Scenario ID, et le Widget apparaît automatiquement, sans aucun code de thème à modifier.
• Shopify : ajoutez le Widget via l’éditeur de thème de votre boutique. Consultez le guide Shopify.
• Webflow, Wix et autres : copiez un extrait et collez-le dans le paramètre de code personnalisé pour tout le site de votre constructeur, en l’appliquant à toutes les pages. N’utilisez pas d’élément Embed ou HTML sur une page. Consultez Constructeurs de site.
• Partagez un lien à la place : n’installez rien ; partagez le lien de votre Page de discussion hébergée.
• Installer manuellement avec du code : copiez l’extrait Widget ou Embed brut et collez-le vous-même dans votre HTML.

Chaque méthode ouvre un panneau dédié, étape par étape, contenant uniquement le code ou l’ID dont elle a besoin.

Votre Scenario ID se trouve en haut de l’onglet Installer, sous forme de champ copiable. C’est l’identifiant dont les extensions et l’API ont besoin : copiez-le ici chaque fois qu’une étape de configuration vous le demande.

Installer manuellement avec du code

Si vous gérez votre propre HTML, développez Installer manuellement avec du code dans l’onglet Installer et :

1. Copiez l’extrait Widget.
2. Ouvrez le fichier HTML de votre page. Sur un constructeur de site, utilisez plutôt son paramètre de code pour tout le site (consultez Constructeurs de site).
3. Collez l’extrait juste avant la balise de fermeture </body> sur toutes les pages où vous souhaitez afficher le Widget.

Constructeurs de site

Sur Webflow, Wix, Squarespace, Hostinger et les constructeurs similaires, ajoutez le Widget une seule fois, via le paramètre de code pour tout le site du constructeur :

1. Ouvrez le paramètre qui ajoute du code à toutes les pages. Selon le constructeur, il s’appelle Custom code, Code injection, Footer code ou Body end.
2. Collez-y l’extrait du Widget et appliquez-le à toutes les pages. Si vous pouvez choisir où va le code, choisissez le pied de page ou la fin du body. L’extrait ne fonctionne pas dans le head.
3. Publiez votre site. La bulle de chat apparaît sur chaque page.

Attention

N’ajoutez pas le Widget avec un élément Embed ou HTML placé sur une page. De nombreux constructeurs affichent ces éléments dans un petit cadre séparé, où le Widget ne peut pas s’ouvrir. Même s’il se charge, il n’apparaît que sur cette seule page.

Où se trouve le paramètre pour tout le site :

Constructeur	Paramètre de code pour tout le site
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code, puis All pages et Body - end. Nécessite un domaine connecté.
Squarespace	Custom Code → Code Injection → Footer. Forfaits Core, Plus, Advanced et certains anciens forfaits.
Hostinger Website Builder	More (⋯) → Integrations → Custom code. Les scripts se chargent automatiquement à la fin de la page.

Les menus peuvent changer et être traduits dans la langue de votre constructeur. Si votre constructeur ou votre forfait n’a pas de paramètre de code pour tout le site, partagez plutôt le lien de votre Page de discussion.

Besoin d’aide ?

Vous n’êtes pas développeur ? L’onglet Installer propose deux raccourcis sous Besoin d’aide ? :

• Demander de l’aide à l’IA : ouvre l’assistant intégré à l’application, pré-rempli avec une question sur l’ajout de l’Agent à votre site web.
• Envoyer les instructions à un développeur par e-mail : envoie à un collègue tout ce dont il a besoin (l’extrait Widget, votre Scenario ID et un lien vers ce guide) pour qu’il puisse l’installer à votre place.

Pour plus d’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).

Démarrer une nouvelle conversation

Pour réinitialiser le chat et repartir de zéro :

• Widget ou Embed : ouvrez le chat et cliquez sur le bouton représentant un stylo dans un carré dans le coin supérieur droit de la fenêtre de chat.
• Page de discussion : sélectionnez Nouveau chat dans la barre latérale, ou utilisez le bouton représentant un stylo dans un carré dans l’en-tête.

Cela démarre une nouvelle conversation avec votre Agent IA. La conversation précédente reste dans la Boîte de réception. Si vous fermez puis rouvrez le Widget ou actualisez la page, la conversation existante peut reprendre. Demander à l’IA de « réinitialiser » ou d’« effacer le chat » ne démarre pas de nouvelle conversation. Vous n’avez pas besoin d’effacer les cookies du navigateur.

Contrôle d’accès

L’onglet Installer regroupe les contrôles d’accès dans une section repliable Disponibilité et accès. Développez-la pour trouver deux contrôles qui s’appliquent à votre déploiement :

Accès aux widgets et aux intégrations

L’interrupteur situé en haut de Disponibilité et accès. 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

• 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.

Le lien Inviter les utilisateurs du chat ouvre Paramètres → Organisation → Paramètres utilisateur. Le formulaire d’invitation actuel propose des rôles d’équipe avec des autorisations d’accès au tableau de bord ; il ne propose ni rôle réservé au chat, ni section Utilisateurs du chat. Consultez Membres de l’équipe et rôles avant d’inviter quelqu’un.

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 : la photo de profil ou le logo de l’Agent, 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. Disponible sur tous les forfaits, y compris Free.

L’Avatar de l’agent IA s’applique au Widget, à l’Embed et à la Page de discussion, mais pas à Discord, où l’avatar du bot provient de son app Discord (voir Discord).

Taille et position

• Taille du launcher : Classic, Input Only ou Petit. Contrôle l’apparence du lanceur de chat avant son ouverture.
• Fermer le launcher : le launcher Classic comporte un petit bouton de fermeture en haut à droite, révélé au survol sur ordinateur et toujours visible sur les appareils tactiles. Il masque le widget pour la page consultée uniquement ; le launcher réapparaît au chargement suivant. Les autres tailles de launcher n’ont pas de bouton de fermeture.
• 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‑gauche, bas‑centre ou bas‑droite.
• 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.

Dans Transparence, le réglage Arrière-plan définit à quel point la fenêtre de chat laisse voir le site. Il fonctionne avec tous les modes de thème, et c’est le thème qui fournit la teinte :

• Opaque : la fenêtre de chat a un arrière‑plan opaque. C’est le réglage par défaut.
• Verre : la fenêtre de chat devient translucide et le site situé derrière est flouté, comme du verre dépoli. Elle est teintée de blanc en Clair, de sombre en Sombre et de votre couleur d’arrière‑plan en Personnalisé, où une couleur d’en‑tête différente de l’arrière‑plan est conservée telle quelle pour que votre marque reste visible. L’Opacité du verre règle l’intensité avec laquelle la teinte recouvre la page, du niveau le plus bas où le texte du thème reste lisible sur n’importe quel site (50 % en Clair, 65 % en Sombre et selon vos couleurs en Personnalisé) jusqu’à 95 %. Si, en Personnalisé, aucune opacité ne garde le texte lisible avec vos couleurs, le widget utilise un fond uni et les paramètres en indiquent la raison. Verre reste sélectionné et s’applique de nouveau dès que vous ajustez les couleurs du texte ou du fond pour obtenir assez de contraste.

La transparence s’applique au Widget, y compris sur téléphone, et à l’Embed. La Page de discussion en pleine page a toujours un arrière‑plan opaque. Les visiteurs qui ont activé « Réduire la transparence » sur leur appareil voient le style Opaque dans Chrome et Edge, les navigateurs qui transmettent ce réglage aux sites web. Dans un navigateur qui ne peut pas flouter la page, Verre reste presque opaque pour que le texte reste lisible.

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

• Saisie vocale : permet aux visiteurs d’enregistrer un message vocal avec le microphone de la zone de chat. Il est transcrit dans le champ de saisie afin qu’ils puissent le modifier avant de l’envoyer. Les enregistrements s’arrêtent automatiquement après deux minutes (disponible sur les forfaits payants).
• Pièces jointes : permet aux visiteurs de joindre une image ou un document à leur message. Activé par défaut ; désactivez cette option pour retirer le bouton de pièce jointe de la zone de chat.
• Ouverture automatique du widget : ouvre automatiquement le Widget au chargement de la page.
• Masquer 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).

Pour permettre aux visiteurs de noter leurs conversations, ouvrez Conversations → Insights → Évaluation des Conversations. Les paramètres et les résultats se trouvent dans cet onglet ; consultez Évaluation des Conversations.

Contenu textuel

Ouvrez Canaux → Votre site web → Contenu textuel pour modifier le message d’accueil et les autres textes destinés aux visiteurs :

• 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 (ce que certains appellent le « teaser » ou le « message du lanceur ») pour attirer l’attention avant que le visiteur ne clique. La bulle affiche le texte même du message de bienvenue : modifiez donc ce champ pour changer ce qu’elle dit.
• 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.

La section Écran Pré-chat se trouve sous ces champs, dans le même onglet Contenu textuel. Activez-la ici et modifiez le texte de son en-tête, de son bouton et de son message.

Langues et traductions

Par défaut, votre Contenu textuel s’affiche pour chaque visiteur exactement comme vous l’avez saisi. Sur les forfaits payants, vous pouvez ajouter des traductions par langue pour que les visiteurs voient le widget dans leur propre langue.

1. Ouvrez le sous-onglet Contenu textuel et cliquez sur Traduire dans Autres langues. Le panneau Traduire le texte du widget s’ouvre, avec votre texte principal affiché à côté de chaque traduction sous Par défaut (source).
2. Cliquez sur Ajouter une langue et choisissez une langue. Quickchat AI génère une traduction de votre texte actuel. Vérifiez et modifiez les champs (en-tête, message de bienvenue, conversation starters, placeholder de saisie, écran pre-chat, avertissement) pour cette langue. Les modifications sont enregistrées automatiquement.
3. Tout champ laissé vide utilise votre texte par défaut, vous ne traduisez donc que ce que vous voulez changer. Si la traduction automatique échoue, vous pouvez toujours saisir le texte vous-même.

Le nombre de langues que vous pouvez ajouter dépend de votre forfait.

Comment la langue d’un visiteur est choisie

Quickchat choisit la langue dans cet ordre :

1. Un remplacement explicite défini dans le loader : _quickchat("language", "de") (à appeler avant _quickchat("init", ...)).
2. L’attribut <html lang> de votre page — par exemple <html lang="de"> sert votre traduction allemande. C’est l’approche recommandée : définissez correctement lang sur chaque page localisée et le widget suit automatiquement.
3. La langue du navigateur du visiteur, puis votre texte Default si rien ne correspond.

Note

Si la langue d’un visiteur n’a pas de traduction, il voit toujours votre texte Default. Rien n’est jamais laissé vide.

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)
• fournir des valeurs aux API Actions et, lorsque cela est autorisé, personnaliser les réponses. L’IA reçoit un sous-ensemble filtré des paramètres, pas leur totalité ; consultez Contexte du modèle et autorisation

Voici des exemples de paramètres personnalisés utiles :

• visitor_name : Mike
• customer_tier : VIP
• order_id : ord_123

visitor_name est une clé de contact reconnue. Les clés personnalisées comme customer_tier peuvent être stockées et utilisées dans les Actions, mais leur envoi seul ne garantit pas que l’IA les utilisera dans sa réponse. Traitez les valeurs fournies par le navigateur comme des données non vérifiées, et non comme une autorisation d’accéder au compte d’un client.

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", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

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", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _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", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _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, puis développez Installer manuellement avec du code.
   • 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 la page dans votre constructeur de site.

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.
   • Sur un constructeur de site, ajoutez un élément de code ou HTML à l’endroit où la fenêtre de chat doit apparaître et collez-y l’extrait.

Note

L’Embed ne fonctionne que si votre constructeur insère le code directement dans la page. Certains constructeurs, comme Wix, affichent les éléments HTML dans un cadre séparé, et l’Embed ne peut pas se charger dans un cadre. Si la fenêtre de chat n’apparaît pas sur votre page publiée, ajoutez plutôt le Widget via le paramètre de code pour tout le site, ou partagez le lien de votre Page de discussion.