Intégrer le Widget dans la page (mode Full Page)

Prérequis

Vérifiez que votre widget est configuré en mode Full Page

Dans votre tableau de bord ViaSay, allez dans Build > Integrate > Channels, ouvrez votre widget, puis Format & Design > Chat window. Sélectionnez le format Full page et cliquez sur Publish.

Consultez cette page pour plus d'indications.

Prérequis techniques

• Accès au code source HTML de votre site web

• Le jeton du widget, disponible dans l'onglet Integration de votre tableau de bord ViaSay

• Des connaissances de base en HTML et CSS

• Une zone de page avec une hauteur explicite (le widget ne s'affiche pas dans un conteneur de hauteur nulle)

Installation

👍 Quand utiliser le mode Full Page

Utilisez ce modèle pour les pages d'aide dédiées, les pages FAQ, les pages de contact ou les mini-sites à usage unique, où la conversation est le contenu principal. Pour les sites de plusieurs pages où le widget doit suivre les utilisateurs d'une page à l'autre, utilisez plutôt l'installation standard avec bulle flottante.

1. Choisir le type d'affichage Full Page

Allez dans Build > Integrate > Channels > [Votre widget] > Format & Design. Sous Chat window, sélectionnez Full page et cliquez sur Publish.

Le mode d'affichage du widget est déterminé par la configuration du tableau de bord, et non par un attribut HTML. Vous n'avez pas besoin de passer mode="fullpage" ni aucune propriété similaire sur l'élément personnalisé.

2. Ajouter un conteneur hôte à votre page

Ajoutez un conteneur vide à l'endroit où la fenêtre de discussion doit apparaître, et donnez-lui une hauteur explicite.

<div id="chat-host" class="chat-host"></div>

<style>
  .chat-host {
    width: 100%;
    min-height: 680px;
    display: flex;
    overflow: hidden;
  }
</style>

Pourquoi une hauteur explicite ? Le widget s'affiche à l'intérieur de son conteneur et occupe l'espace disponible. Sans hauteur définie (min-height ou height), le conteneur est réduit à 0 px et le widget est invisible.

3. Injecter le widget dans le conteneur

Collez le code du widget à la fin de la balise <body>, mais au lieu d'ajouter l'élément personnalisé à document.body, ajoutez-le à votre conteneur hôte.

<!DOCTYPE html>
<html>
<head>
    <title>Your Website</title>
</head>
<body>
    <!-- Your page content -->
    <div id="chat-host" class="chat-host"></div>

    <!-- ViaSay Widget — inline full-page mode -->
    <script>
        var widget = document.createElement("destygo-webchat");
        widget.setAttribute('id', "destygo_widget");
        widget.setAttribute('class', "destygo_widget");
        widget.setAttribute('token', "YOUR_TOKEN_HERE");
        document.getElementById('chat-host').appendChild(widget);
    </script>
    <script type="text/javascript" src="https://chatbot.viasay.io/widget/destygo-webchat.js"></script>
</body>
</html>

Pourquoi l'ajouter à un conteneur plutôt qu'au body ? Ajouter l'élément à document.body affiche le widget en superposition flottante, quelle que soit la configuration du tableau de bord. Pour un affichage intégré, l'élément personnalisé doit être un enfant du conteneur cible avant que le script du SDK ne l'initialise.

4. Contrôler la hauteur de la fenêtre de discussion

La fenêtre de discussion interne s'affiche dans un div portant la classe .cl-chatbox. Pour contrôler sa hauteur, ciblez cette classe — et non l'élément personnalisé <destygo-webchat>.

.chat-host .cl-chatbox {
  height: 680px !important;
}

⚠️ N'appliquez pas height, min-height, flex ou display directement sur <destygo-webchat> ou #destygo_widget. Ces surcharges sont soit ignorées par le shadow DOM, soit cassent l'affichage interne de la fenêtre de discussion.

5. Déployer les modifications

Enregistrez votre fichier HTML et déployez-le sur votre serveur web. La fenêtre de discussion s'affiche intégrée sur chaque page qui contient ce code.

Vérification

Vérifier que la fenêtre de discussion est en ligne

1. Ouvrez votre page dans un navigateur, servie en HTTP ou HTTPS (et non via file://)

2. Vérifiez que la fenêtre de discussion s'affiche dans votre conteneur #chat-host

3. Vérifiez que le champ de saisie est ancré en bas du conteneur

4. Envoyez un message de test

Modèles d'intégration courants

Applications monopages (SPA)

Pour les applications React, Vue ou Angular, montez le widget une seule fois lorsque le composant hôte est monté, et nettoyez-le lors du démontage pour éviter les instances en double à chaque nouveau rendu.

// React example
useEffect(() => {
  const widget = document.createElement("destygo-webchat");
  widget.setAttribute('token', "YOUR_TOKEN_HERE");
  hostRef.current.appendChild(widget);

  return () => {
    hostRef.current?.removeChild(widget);
  };
}, []);

Chargez le script destygo-webchat.js une seule fois dans votre index.html plutôt que de le réinjecter à chaque changement de route.

Sites basés sur des modèles

Pour WordPress, Shopify ou des plateformes similaires, ajoutez le conteneur hôte et le script du widget à un seul modèle dédié (par exemple un modèle de page « Aide ») — et non au pied de page global.

Générateurs de sites statiques

Pour Next.js, Gatsby ou Hugo, ajoutez le conteneur hôte dans le composant de mise en page de votre page d'aide et chargez le script du SDK via le chargeur de scripts du framework (par exemple next/script avec strategy="afterInteractive").

Dépannage

📌 Conseils d'intégration

Veillez à configurer correctement la liste d'autorisation de la Content Security Policy (CSP) :

• https://*.destygo.com

• https://*.mindsay.com

• https://*.laiye.com

• wss://*.mindsay.com

• wss://*.laiye.com

• https://fonts.googleapis.com

• https://fonts.gstatic.com

Chargez le script destygo-webchat.js après la création et l'ajout de l'élément personnalisé dans le DOM ; sinon, l'élément est inconnu au moment où le SDK tente de l'initialiser.

Options avancées

Hauteur adaptative : utilisez des unités relatives à la fenêtre (par exemple min-height: calc(100vh - 120px)) sur le conteneur hôte pour que la fenêtre de discussion occupe le reste de l'écran sur mobile.

Plusieurs fenêtres de discussion sur le même site : chaque instance doit utiliser un id unique sur le conteneur hôte et un élément personnalisé unique. Évitez de monter deux widgets partageant le même jeton sur la même page.

Style personnalisé : la plupart des options d'apparence (couleurs, polices, messages d'accueil) se configurent dans l'onglet Format & Design de votre tableau de bord. N'utilisez des surcharges CSS sur .cl-chatbox que pour les questions de mise en page ou de dimensions propres à votre page.