Centre d'Assistance
Accueil IA Réceptionniste IA

Réceptionniste IA : Configurer le widget du site Web

Pour le Réceptionniste IA

Avec le widget pour site Web, vous offrez aux visiteurs de votre site Web la possibilité de lancer directement un appel avec votre Réceptionniste IA via un bouton ("Parler avec l'IA"). L'appel se fait alors facilement et directement via le navigateur Web du visiteur.

Dans cet article, vous apprendrez à configurer le widget, à l'adapter au design de votre site Web et à intégrer le code généré dans votre page.

Conditions préalables

  • Vous avez terminé la configuration initiale de votre Réceptionniste IA avec l'Assistant de configuration.
  • 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é à son propre domaine enregistré : Le widget ne peut pas être utilisé avec un domaine système IONOS temporaire (par ex. *.live-website.com ou *.live-website.com).

Étape 1 : Accéder à l'interface de configuration

  • Connectez-vous à votre compte IONOS.
  • Dans la barre de titre, cliquez sur Menu > Réceptionniste IA. L'interface de configuration s'ouvre.
  • Facultatif : si vous disposez de plusieurs contrats Réceptionniste IA, cliquez en haut à gauche sur le sélecteur de contrat (menu déroulant avec le nom de votre contrat actuel) pour ouvrir la liste de vos contrats et sélectionner le contrat souhaité.

Étape 2 : Configurer et activer le widget

  • Dans l'interface de configuration, ouvrez la section Widget pour site Web.
  • Saisissez le domaine de votre site Web sous Domaines autorisés.
    • Uniquement pour le domaine principal : Indiquez votre domaine au format www.exemple.com (le widget ne fonctionnera alors que sur cette adresse précise).
    • Pour tous les sous-domaines : Si le widget doit également être actif sur des sous-domaines supplémentaires (par ex. shop.exemple.com ou blog.exemple.com), utilisez un astérisque comme caractère générique : * .exemple.com.

Remarque

Dans ce guide, le nom exemple.com ne sert que de joker. Remplacez-le dans tous les cas par votre propre nom de domaine réel. Tant que ce champ reste vide ou est mal rempli, le widget reste inactif pour des raisons de sécurité.

  • Sous Position, choisissez l'endroit où le bouton doit apparaître sur votre site Web. Vous avez le choix entre En bas à gauche, En bas au centre et En bas à droite.
  • Sous Couleur d'accent, vous pouvez définir la couleur de votre bouton. Pour ce faire, cliquez sur l'aperçu des couleurs (le carré coloré à côté du champ de saisie) pour définir facilement une couleur via le sélecteur de couleurs. Vous pouvez également saisir le code couleur hexadécimal souhaité (par ex. #00188f) directement dans le champ de texte. Si vous ne définissez pas de couleur, la couleur de la marque IONOS est utilisée par défaut.
  • Dans la zone Aperçu, vous pouvez vérifier en direct à quoi ressemble le bouton avec les paramètres que vous avez choisis.
  • Cliquez en haut à droite sur Enregistrer les modifications.

Étape 3 : Intégrer le code d'intégration

Pour que le widget soit visible pour les visiteurs de votre site Web, l'extrait de code généré doit être inséré dans votre site Web.

  • Faites défiler la section Widget pour site Web jusqu'au point Code d'intégration.

  • Cliquez sur le bouton Copier pour copier le code HTML affiché (commençant par <script src=...) dans votre presse-papiers.

    Votre script se présente à peu près comme suit. Au lieu du caractère de remplacement YOUR_AGENT_ID, il contient votre secret client individuel :

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

  • Passez maintenant au système de gestion de contenu (CMS) ou au module d'édition de page d'accueil de votre site Web.

  • Collez le code copié dans le code source HTML de votre site Web. Placez le code directement devant la balise de fermeture </body>.

    ... 
    <!-- AI Receptionist Voice Widget -->
       <script
         src="https://ionos.ai-voicereceptionist.com/widget/v1/embed.js"
         data-agent-id="YOUR_AGENT_ID">
       </script>
    </body>
    </html> 

Instructions pour les systèmes de sites Web et CMS courants

La procédure exacte pour insérer du code HTML diffère selon le système utilisé. Utilisez le guide de démarrage 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 MyWebsite avant la balise </body >, mais dans la zone <head> (en-tête) :

  • Ouvrez l'éditeur de site Web de votre MyWebsite.
  • Naviguez vers Paramètres > Code d'en-tête.
  • Collez le script copié dans le champ prévu à cet effet.
  • Créez un accord de confidentialité (entrée de cookie) pour votre widget vocal (voir la section Confidentialité ci-dessous).
  • Enregistrez et publiez votre site Web pour que les modifications soient actives.
WordPress

Pour l'intégration du widget dans WordPress, nous recommandons en principe l'utilisation d'un plugin (option A). Cela fonctionne avec tous les thèmes et garantit que votre code ne sera pas perdu lors d'une mise à jour du thème. Alternativement, pour les thèmes classiques, vous pouvez insérer le code directement dans les fichiers du thème (option B).

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

  • Installez et activez le plugin "Insert Headers and Footers".
  • Allez dans Réglagess > 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 d'édition plein site (par ex. Twenty Twenty-Three et plus récents) ne disposent pas de footer.php. Dans ce cas, utilisez impérativement l'option A.
  • Les modifications dans les fichiers de thème sont écrasées lors d'une mise à jour du thème. Utilisez donc un thème enfant pour sauvegarder durablement vos modifications.
  • Dans votre tableau de bord WordPress, allez dans Design > Theme-Editor 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. Dans la section Développement et intégrations, cliquez sur Code personnalisé.
  • Cliquez sur + Ajouter un code personnalisé.
  • Insérez le script.
  • Sélectionnez l'option Toutes les pages.
  • Définissez le placement sur Body - End (Corps - fin).
  • Cliquez sur Appliquer.
Shopify
  • Dans la zone d'administration de votre boutique Shopify, allez sur Boutique en ligne > Thèmes.
  • Cliquez sur les trois points du thème actif et sélectionnez Modifier le code.
  • Ouvrez le fichier theme.liquid.
  • Insérez le script juste avant la balise de fermeture </body> et cliquez sur Enregistrer.
Webflow
  • Dans Webflow, ouvrez les paramètres du projet (Project Settings) et allez dans l'onglet Custom Code.
  • Insérez le script dans la section Footer Code.
  • Publiez (Publish) votre site Web.

Informations importantes sur la protection des données

Si vous utilisez le widget du site Web, vous devez informer les visiteurs de votre site Web du traitement des données. Veillez donc à ce que votre déclaration de confidentialité contienne un paragraphe correspondant à l'assistant vocal d'intelligence artificielle.

Vous trouverez un élément de texte correspondant dans l'article Assistant vocal d'intelligence artificielle : Complément important pour votre déclaration de confidentialité.

Contenu