Centre d'Assistance
Accueil IA AI Frontdesk

Assistant de chat IA : Configurer et intégrer un widget sur un site Web

Valable pour Assistant de chat (Momentum AI).

Valable pour Assistant de chat IA

Grâce au widget de site Web, vous pouvez intégrer directement votre assistant à votre site Web via un bouton. Les visiteurs peuvent ainsi lancer le chat facilement depuis leur navigateur, sans quitter votre page. Dans cet article, vous découvrirez comment personnaliser le widget, l'autoriser pour votre domaine et intégrer le code généré à votre page.

Conditions préalables
  • Vous avez terminé la configuration initiale de votre assistant à l'aide de l'assistant de configuration. Vous trouverez des instructions dans l'article du Centre d'Assistance Assistant de chat : Premiers pas.
  • Vous avez accès au code source HTML de votre site Web ou à l'éditeur de modèles de votre CMS.
  • Votre site Web est associé à un nom de domaine propre et enregistré. Le widget ne peut pas être utilisé avec un nom de domaine système temporaire de IONOS (par exemple *.live-website.com).

Accéder aux paramètres de l'assistant

  • Connectez-vous à votre compte IONOS.
  • Dans la barre de titre, cliquez sur Menu > AI Frontdesk.
  • Si une liste des contrats s'affiche, cliquez sur Administrer sur la tuile du contrat souhaité.
  • Ouvrez la section Widget pour site Web. C'est ici que vous pouvez définir tous les paramètres suivants.
     

Remarque

Le widget du site Web fait partie de la configuration commune de votre assistant. Si vous avez ajouté le produit Réceptionniste IA en tant qu’extension de contrat, les paramètres d’affichage, les domaines autorisés et le code d’intégration s’appliquent aux deux produits, car le widget est identique pour le chat et le téléphone.

Définir les canaux

Remarque

La section Canaux n'apparaît que si vous avez acquis Réceptionniste IA en tant qu’extension de contrat. Si vous utilisez votre Assistant de chat sans cette extension, cette section n’apparaîtra pas : le widget proposera automatiquement le chat. Dans ce cas, passez à la section Personnaliser l’affichage.

Dans la section Canaux, vous pouvez définir si le même bouton doit permettre de passer un appel vocal, d'utiliser le chat textuel ou les deux. Vous avez le choix entre les options Appel uniquement, Chat uniquement et Chat et appel.

  • Appel uniquement : Aucune fonctionnalité de chat n’est intégrée et l’appel démarre directement dans le navigateur. 

  • Chat uniquement : Le bouton lance exclusivement le chat textuel.

  • Chat et appel : Le chat textuel s'ouvre. Les visiteurs peuvent ensuite choisir s'ils souhaitent écrire ou passer un appel en cliquant sur l'icône du combiné téléphonique. L'appel démarre alors directement dans le navigateur.

Pour que les visiteurs puissent discuter via le widget, l’option Chat uniquement ou Chat et appel doit être sélectionnée.

Activer le transfert d'appel depuis le chat

Votre assistant peut transférer le visiteur vers l'un de vos contacts via le chat, par exemple vers le service d'assistance ou le service comptable. Il propose ce transfert de sa propre initiative dès que la demande correspond à l'un de vos contacts, mais aussi lorsque le visiteur en fait la demande.

Dans la section Transfert d'appel depuis le chat, activez le bouton du même nom.

Lors du transfert, le nom du contact s'affiche dans le chat, suivi du bouton Appeler maintenant. Si le visiteur clique dessus, le téléphone du contact sonne et le visiteur peut parler via son navigateur.

Remarque

Si vous utilisez exclusivement l'Assistant de chat, la section Transfert d'appels depuis le chat ne s'affiche pas. Elle n'apparaîtra que si vous souscrivez également au Réceptionniste IA. Les contacts proposés par l’assistant se trouvent dans la rubrique Transfert et Contacts, qui n’est disponible qu’avec ce produit. Vous créez ces contacts dans la rubrique Transfert et Contacts. Remplissez-y, pour chaque contact, les champs Service ou Description : cela permet à votre assistant de savoir de quelles demandes la personne est responsable.

Personnaliser l'affichage

Dans la section Apparence, définissez l'apparence du bouton sur votre site Web :

  • Sous Position, choisissez l'emplacement où le bouton doit apparaître : en bas à gauche, en bas au centre ou en bas à droite.
  • Sous Couleur d'accent, définissez la couleur du bouton. Cliquez sur l'aperçu des couleurs (le carré coloré) pour sélectionner une couleur, ou saisissez directement un code hexadécimal (par exemple #003d8f) dans le champ de texte. Si vous n'indiquez pas de couleur, la couleur de marque IONOS sera utilisée.
  • Sous Libellé du bouton, saisissez le texte qui s’affichera sur le bouton (par exemple Parler à l’IA).

Dans la zone Aperçu, vous pouvez voir en temps réel à quoi ressemble le bouton avec vos paramètres.

Télécharger sa propre icône

Outre la position, la couleur et le texte, vous pouvez également définir l'icône du bouton. Sous Icône, vous pouvez ajouter votre propre image. Tant qu'aucune icône n'est définie, le widget affiche l'icône par défaut.

  • Dans la section Apparence, sous Icône, cliquez sur Importer une icône.
  • Dans la boîte de dialogue de sélection de fichiers de votre système d'exploitation, sélectionnez le fichier image souhaité. Les formats graphiques courants sont pris en charge, notamment JPG, PNG, GIF, ICO et SVG.
  • Dans la fenêtre Recadrer l'icône, définissez la zone de l'image que vous souhaitez conserver. Le recadrage est de forme ronde. Vous pouvez l'agrandir à l'aide du curseur situé sous l'image et le déplacer à l'emplacement souhaité en le faisant glisser tout en maintenant le bouton de la souris enfoncé.
  • Cliquez sur Appliquer.

L'icône apparaît désormais à gauche du bouton, qui s'intitule désormais Modifier. Elle s'affiche également immédiatement dans la zone d'aperçu.

Remarque

La couleur définie dans Couleur d'accent n'a aucun effet sur une icône téléchargée.

Remplacer ou supprimer une icône

Sous Icône , cliquez sur Modifier. Un menu comportant deux options s'ouvre :

  • Télécharger une icône : Cette option permet de remplacer l'icône enregistrée. La procédure est la même que lors du premier téléchargement.
  • Supprimer : Cela supprime l’icône enregistrée. Sous Icône , le bouton Importer une icône réapparaît alors, et le widget affiche à nouveau l’icône par défaut.

Partager un domaine

Pour des raisons de sécurité, le widget n'est chargé que sur les domaines que vous avez autorisés.

Dans la section Installation, sous Domaines autorisés, saisissez le domaine de votre site Web :

  • Uniquement pour le domaine principal : Indiquez votre domaine au format www.example.com. Le widget ne fonctionnera alors que sur cette adresse précise.
  • Pour tous les sous-domaines : Utilisez un astérisque comme caractère générique (*.example.com) afin que le widget soit également actif sur les sous-domaines (par exemple, shop.example.com).

Remarque

example.com n'est qu'un exemple. Remplacez-le par votre nom de domaine réel. Tant qu'aucun domaine n'est saisi, le widget reste désactivé.

Enregistrer les modifications

Pour enregistrer vos modifications, cliquez sur le bouton Enregistrer les modifications en haut à droite. Tant que vous n'avez rien modifié, le bouton Aucune modification est grisé.

Intégrer le code d'intégration

Pour que le widget soit visible par vos visiteurs, insérez le code généré dans votre site web.

  • Dans la section Installation, sous Code d'intégration, cliquez sur Copier.
  • Insérez le code à l'intérieur de la balise <head> de votre site Web. Le script se charge en arrière-plan et ne ralentit pas le chargement de la page.

Votre code contient votre identifiant d'agent individuel à la place de l'espace réservé YOUR_AGENT_ID et se présente à peu près comme suit :

<script src="https://ionos.ai-voicereceptionist.com/widget/v1/embed.js" data-agent-id="YOUR_AGENT_ID" defer></script>

Tester les paramètres

Pour tester vos paramètres, intégrez le widget sur votre site Web. Ouvrez ensuite votre site et lancez vous-même une conversation à l'aide du bouton. Vous verrez ainsi l'assistant exactement tel que vos visiteurs le perçoivent.

Guides d'utilisation pour les systèmes de sites Web courants et les CMS

La procédure exacte pour insérer du code HTML varie en fonction du système utilisé. Consultez le guide rapide adapté à votre plateforme :

IONOS MyWebsite

Contrairement à ce qui est décrit dans les instructions générales ci-dessus, n'insérez pas le code dans votre fichier MyWebsite avant la balise </body>, mais dans la section <head> (en-tête) :

  • Ouvrez l'éditeur de site de votre MyWebsite.
  • Accédez à Paramètres > Code d'en-tête.
  • Collez le script copié dans le champ prévu à cet effet.
  • Créez un consentement à la politique de confidentialité (entrée « Cookie Consent ») pour votre widget de langue (voir la section « Politique de confidentialité » ci-dessous).
  • Enregistrez et publiez votre site web pour que les modifications soient prises en compte.
WordPress

Pour intégrer le widget dans WordPress, nous recommandons généralement d'utiliser un plugin (option A). Cette méthode fonctionne avec tous les thèmes et garantit que votre code ne sera pas perdu en cas de mise à jour du thème. Vous pouvez également, pour les thèmes classiques, insérer directement le code dans les fichiers du thème (option B).

Option A : via un plugin (recommandée pour tous les thèmes)

  • Installez et activez le plugin « Insert Headers and Footers ».
  • Rendez-vous dans Paramètres > Insert Headers and Footers et insérez le script dans la section Scripts in Footer.
  • Enregistrez les modifications.


Option B : via l’éditeur de thème (uniquement pour les thèmes classiques)

Remarques :

  • Les thèmes modernes prenant en charge l'édition complète du site (par exemple, Twenty Twenty-Three et les versions plus récentes) ne disposent pas d'un fichier footer.php. Dans ce cas, vous devez impérativement utiliser l'option A.
  • Les modifications apportées aux fichiers du thème seront écrasées lors d'une mise à jour du thème. Utilisez donc un thème enfant pour conserver vos modifications de manière permanente.
  • Dans votre tableau de bord WordPress, rendez-vous dans Apparence > Éditeur de thème et ouvrez le fichier footer.php.
  • Insérez le script juste avant la balise de fermeture </body>.
  • Enregistrez les modifications.
Wix
  • Dans votre tableau de bord Wix, accédez à Paramètres > Code personnalisé.
  • Cliquez sur + Modifier le code personnalisé.
  • Collez le script.
  • Sélectionnez l'option Toutes les pages.
  • Définissez l'emplacement sur Body - Fin.
  • Cliquez sur Appliquer.
Shopify
  • Dans l'espace d'administration de votre boutique Shopify, accédez à Boutique en ligne > Thèmes.
  • Cliquez sur les trois points à côté du thème actif, puis sélectionnez Modifier le code.
  • Ouvrez le fichier theme.liquid.
  • Insérez le script juste avant la balise de fermeture </body>, puis cliquez sur Enregistrer.
Webflow
  • Dans Webflow, accédez aux paramètres du projet (Project Settings) et sélectionnez l'onglet Custom Code.
  • Insérez le script dans la section Footer Code.
  • Publiez (Publish) votre site Web.

Articles connexes

Contenu