IBM Cloud Docs
Intégration de la discussion Web sur votre page

Intégration de la discussion Web sur votre page

Pour ajouter le widget de chat Web à votre site Web, vous devez intégrer un élément de script généré dans votre source HTML.

L'intégration du chat web est automatiquement incluse pour chaque assistant et configurée séparément pour chaque environnement.

Pour l'intégration de la discussion Web à une application basée sur React, voir les autres méthodes ici.

Pour ajouter le chat en ligne à votre site Web :

  1. Sur l’ icône Intégrations de la page Intégrations, recherchez la mosaïque Chat Web et cliquez sur Ouvrir. La fenêtre Ouvrir une discussion Web s'ouvre.

  2. Dans la zone Environnement, sélectionnez l'environnement auquel le widget de discussion Web doit se connecter. Cliquez sur Confirm.

    La page Discussion Web s'ouvre et affiche les paramètres de l'intégration de discussion Web dans l'environnement sélectionné.

    Le volet d'aperçu montre à quoi ressemblera le chat Web lorsqu'il sera intégré à une page Web. Si vous voyez un message commençant par There is an error, vous n'avez probablement pas encore ajouté d'actions à votre assistant. Une fois que vous avez ajouté une action, vous pouvez tester la conversation à partir du panneau de prévisualisation.

  3. Cliquez sur l'onglet Embed.

    Un fragment de code est généré en fonction de la configuration de la discussion Web. Vous (ou un développeur Web) ajouterez ce fragment de code à la page Web où vous souhaitez que la discussion Web apparaisse.

    Ce fragment de code contient un élément HTML script. Le script appelle le code JavaScript qui est hébergé sur un site IBM et crée une instance d'un widget qui communique avec l'assistant.

  4. Cliquez sur l'Icône Copier Copier dans le presse-papiers pour copier le script d'intégration dans le presse-papiers.

  5. Éditez la source HTML de la page Web dans laquelle vous souhaitez que le widget de discussion Web apparaisse. Copiez le fragment de code dans la page. Collez le code aussi près possible de la balise de fermeture </body> pour vous assurer que votre page s'affiche plus rapidement.

    Ne modifiez pas les valeurs de propriété integrationID ou region dans le script d'intégration généré.

    Si vous n'êtes pas prêt à ajouter la discussion Web à un site Web opérationnel, vous pouvez le tester rapidement à l'aide d'un fichier HTML local. Utilisez ce code HTML comme source d'une page de test :

    <html>
    <head></head>
    <body>
        <title>My Test Page</title>
        <p>The body of my page.</p>
        <!-- copied script elements -->
        </body>
    </html>
    

    Copiez ce code dans un fichier avec l'extension. .html, et remplacez l'élément. script par le script d'intégration que vous avez copié à l'étape précédente.

    Les identificateurs du script d'imbrication (par exemple, integrationID serviceInstanceID) ne sont pas considérés comme secrets et sont visibles par toute personne ayant accès à votre site Web. Pour plus d'informations, voir Sécurité.

  6. Si le système qui héberge votre site web a un accès Internet limité (par exemple, si vous utilisez un proxy ou un pare-feu), assurez-vous que les URL qui hébergent le chat web sont accessibles. Pour plus d'informations, voir Accès aux hôtes de discussion Web.

  7. Ouvrez la page Web (ou le fichier de test local) dans votre navigateur. Vous devriez voir l'icône du lanceur Icône du lanceur de chat Web s'afficher sur la page :

  8. Cliquez sur l'icône du programme de lancement pour ouvrir la fenêtre de discussion.

  9. Copiez le même script d'intégration dans chaque page Web dans laquelle l'assistant doit être à la disposition de vos clients.

    Vous pouvez coller la même balise script dans autant de pages de votre site Web que vous le souhaitez. Ajoutez-la partout où vous voulez permettre à vos utilisateurs de contacter l'assistant pour obtenir de l'aide. Toutefois, assurez-vous de ne l'ajouter qu'une seule fois sur chaque page.

Vous pouvez désormais tester votre assistant et voir ses réponses comme le feraient vos clients.

Toutefois, avant le passage en mode production avec la discussion Web, vous voudrez probablement le personnaliser pour votre site et pour les besoins de vos clients. Pour plus d'informations, voir Présentation du développement de la discussion Web.