Tutoriel : Personnaliser la taille et la position du chat en ligne

Ce tutoriel montre comment vous pouvez modifier la taille et la position du chat en ligne en le rendant dans un élément personnalisé.

Pour obtenir une version complète et fonctionnelle de l'exemple décrit dans ce tutoriel, consultez la section « Éléments personnalisés pour le chat Web de l'assistant IA ».

Par défaut, l'interface de discussion en ligne de votre site web est rendue dans un élément hôte " div qui est stylisé pour apparaître à un emplacement fixe sur la page. Si vous souhaitez modifier la taille ou la position du chat Web, vous pouvez spécifier un élément personnalisé comme emplacement hôte du chat Web. Cet élément hôte est utilisé comme emplacement pour l'interface principale de chat en ligne et pour le lanceur de chat en ligne (à moins que vous n'utilisiez un lanceur personnalisé).

Lorsque vous utilisez un élément personnalisé, vous prenez également le contrôle de l'affichage et du masquage du web chat lorsqu'il est ouvert ou fermé (par exemple, lorsque le client clique sur l'icône du lanceur ou sur le bouton de minimisation). Cela vous permet d'appliquer des effets supplémentaires, tels que des animations d'ouverture et de fermeture. Vous pouvez afficher ou masquer la fenêtre principale à l'aide des fonctions ` addClassName( )` et ` removeClassName( )`.

Pour utiliser un élément personnalisé, procédez comme suit :

1. Dans le code de votre site web, définissez l'élément personnalisé dans lequel vous souhaitez que le chat web soit affiché. Il existe de nombreuses façons de procéder, en fonction du cadre que vous utilisez. Un exemple simple consiste à définir un élément HTML vide avec un ID :

    <div id="WebChatContainer"></div>

1. Obtenez une référence à votre élément personnalisé afin de pouvoir le référencer dans la configuration du chat Web. Pour obtenir une référence, utilisez le mécanisme le plus approprié pour la bibliothèque que vous utilisez. Par exemple, vous pouvez enregistrer la référence renvoyée par " document.createElement() ou utiliser une fonction de requête pour rechercher l'élément dans le DOM. Cet exemple recherche l'élément à l'aide de l'ID qui lui a été attribué :

    const customElement = document.querySelector('#WebChatContainer');

1. Dans le script d'intégration du chat Web, définissez la propriété " element, en spécifiant la référence à votre élément personnalisé.

    window.watsonAssistantChatOptions = {
      integrationID: "YOUR_INTEGRATION_ID",
      region: "YOUR_REGION",
      serviceInstanceID: "YOUR_SERVICE_INSTANCE_ID",
    
      // The important piece.
      element: customElement,
    
      onLoad: function(instance) {
        instance.render();
      }
    };

1. Assurez-vous que la fenêtre principale du chat en ligne est cachée par défaut. Vous pouvez le faire dans le gestionnaire d'événements " onLoad, après que " render a été appelé. Vous devez également ajouter des gestionnaires pour écouter l'événement " view:change afin que le client puisse ouvrir et fermer le chat en ligne après le chargement de la page. Dans notre exemple, nous utilisons une classe CSS nommée HideWebChat pour cela (voir l 'exemple complet pour la définition de cette classe) :

    function onLoad(instance) {
      instance.render();
      instance.on({ type: 'view:change', handler: viewChangeHandler });
      instance.elements.getMainWindow().addClassName('HideWebChat');
    }

1. Créez des gestionnaires pour masquer et afficher la fenêtre principale du chat en ligne en réponse à l'événement " view:change. Cet exemple se contente d'afficher et de masquer l'élément; l 'exemple complet montre comment ajouter des effets d'animation.

    function viewChangeHandler(event, instance) {
      if (event.newViewState.mainWindow) {
        instance.elements.getMainWindow().removeClassName('HideWebChat');
      } else {
        instance.elements.getMainWindow().addClassName('HideWebChat');
      }
    }

Pour obtenir le code complet et fonctionnel, consultez l'exemple « Éléments personnalisés pour un chat Web avec assistant IA ».