Tutoriel: Personnalisation de la taille et de la position de la discussion Web

Ce tutoriel explique comment modifier la taille et la position de la discussion Web en la rendant dans un élément personnalisé.

Pour une version complète et fonctionnelle de l'exemple décrit dans ce tutoriel, voir Custom elements for watsonx Assistant web chat.

Par défaut, l'interface de discussion Web de votre site Web est rendue dans un élément div hôte qui est défini pour apparaître à un emplacement fixe sur la page. Si vous souhaitez modifier la taille ou la position de la discussion Web, vous pouvez spécifier un élément personnalisé comme emplacement hôte pour la discussion Web. Cet élément hôte est utilisé comme emplacement pour l'interface de discussion Web principale et pour le lanceur de discussion Web (sauf si vous utilisez un lanceur personnalisé).

Lorsque vous utilisez un élément personnalisé, vous prenez également le contrôle de l'affichage et du masquage de la discussion Web lorsqu'elle est ouverte ou fermée (par exemple, lorsque le client clique sur l'icône du lanceur ou sur le bouton Réduire). Cela vous donne la possibilité d'appliquer des effets supplémentaires, tels que des animations d'ouverture et de fermeture. Vous pouvez contrôler l'affichage et le masquage de la fenêtre principale à l'aide des fonctions addClassName () et removeClassName () .

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

Dans le code de votre site Web, définissez l'élément personnalisé dans lequel vous souhaitez que la discussion Web soit rendue. Il existe de nombreuses façons de le faire, en fonction de l'infrastructure que vous utilisez. Un exemple simple consiste à définir un élément HTML vide avec un ID:
```
<div id="WebChatContainer"></div>
```
Obtenez une référence à votre élément personnalisé pour pouvoir la référencer dans la configuration de discussion Web. Pour obtenir une référence, utilisez le mécanisme approprié pour la bibliothèque que vous utilisez. Par exemple, vous pouvez sauvegarder 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 que nous lui avons affecté:
```
const customElement = document.querySelector('#WebChatContainer');
```

Dans le script d'imbrication de discussion 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();
  }
};

Assurez-vous que la fenêtre de discussion Web principale est masquée par défaut. Vous pouvez effectuer cette opération dans le gestionnaire d'événements onLoad , une fois 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 la discussion Web après le chargement de la page. Dans notre exemple, nous utilisons une classe CSS appelée HideWebChat pour ce faire (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');
}
```
Créez des gestionnaires pour masquer et afficher la fenêtre de discussion Web principale en réponse à l'événement view:change . Cet exemple montre et masque simplement l'élément ; l' exemple complet montre comment vous pouvez 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 de travail complet, voir l'exemple Custom elements for watsonx Assistant web chat .