Mode intégré : le chat dans un conteneur ou en plein écran

Quand l'utiliser

Utilisez le mode intégré quand le chat est le contenu d'un écran et non un bouton posé dessus :

• Une WebView dans votre application mobile, par exemple derrière un élément Contacter le support. L'application mobile Deskwoot utilise le mode intégré sur son propre écran Contacter le support.
• Une page Contact en pleine page sur votre site web.
• Une fenêtre modale ou un panneau qui a son propre cadre.

Si vous voulez seulement masquer le bouton du chat et ouvrir le chat flottant normal depuis votre propre bouton, vous n'avez pas besoin du mode intégré. Ouvrir le widget de chat depuis votre propre bouton explique comment faire.

Ce qui change en mode intégré

• Le chat s'ouvre dès que la page se charge et remplit son conteneur, ou tout l'écran quand il n'y a pas de conteneur.
• Le bouton rond du chat, les messages qui s'affichent avec vos déclencheurs de chat et le bouton de fermeture du chat sont masqués. Votre page ou votre application décide comment les gens arrivent au chat et comment ils le quittent.
• Le chat n'a ni ombre, ni coins arrondis, ni le décalage de 20px par rapport au bord.
• Les couleurs, le thème clair ou sombre et les textes d'accueil viennent toujours des paramètres de votre boîte de réception, comme pour le chat flottant.
• L'API JavaScript fonctionne toujours : window.deskwoot.close() masque le chat, et open() ou toggle() l'affiche de nouveau.

Mise en place

1. Allez dans Paramètres > Boîtes de réception, ouvrez votre boîte de réception de chat en direct et cliquez sur Sur votre site web. Sous Comment ajouter le chat, cliquez sur Copier.
2. Dans le code, ajoutez embedded: true à window.deskwootSettings, à côté de votre widgetToken.
3. Pour ne remplir qu'une partie de la page, ajoutez aussi container. Cette option accepte un sélecteur CSS comme "#support-pane" ou l'élément lui-même. Donnez une hauteur à cet élément.
4. Collez le code sur la page où le chat doit s'afficher, idéalement juste avant la balise de fermeture </body>. Placez l'élément conteneur avant le code, pour qu'il soit déjà sur la page quand le widget démarre.

Exemples

Plein écran, pour une page Contact ou une WebView d'application

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN",
    embedded: true
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot-loader.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

Sans container, le chat couvre toute la fenêtre du navigateur.

Dans un conteneur de votre page

<div id="support-pane" style="height: 600px"></div>

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN",
    embedded: true,
    container: "#support-pane"   // leave out to fill the whole viewport
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot-loader.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

Le chat remplit toute la largeur et toute la hauteur de l'élément, l'élément a donc besoin de sa propre hauteur.

Votre propre bouton pour afficher et masquer le chat

<button onclick="window.deskwoot.toggle()">Contact Support</button>

Le mode intégré n'a pas de bouton de fermeture, un bouton comme celui-ci permet donc aux gens de masquer le chat puis de le rouvrir. Utilisez open() au lieu de toggle() si le bouton doit seulement l'afficher. window.__deskwootUnread contient le nombre de nouvelles réponses de votre équipe ou de votre bot IA arrivées pendant que le chat était masqué, pour afficher une pastille sur votre bouton.

Bons emplacements pour le bouton : un élément Contacter le support dans votre navigation, à côté de Paramètres ou Aide (c'est ce que fait Deskwoot), une ligne Discuter avec le support en haut de votre menu Aide ou Compte, ou un petit bouton flottant dans le coin quand votre application n'a pas de barre de navigation toujours visible. Placez-le au même endroit sur chaque page derrière votre connexion, pour que les gens sachent toujours où trouver le support.

Questions fréquentes

Puis-je activer le mode intégré dans le tableau de bord ?

Non. Le mode intégré se définit uniquement dans le code du widget de votre page. L'apparence du chat, comme ses couleurs, son thème et ses textes d'accueil, se règle toujours dans les paramètres de votre boîte de réception. Plus d'informations dans Personnaliser votre widget de chat.

Le chat n'apparaît pas dans mon conteneur. Que dois-je vérifier ?

L'élément doit être sur la page quand le widget démarre. Si Deskwoot ne le trouve pas, le chat ne se charge pas du tout (il ne passe pas en plein écran à la place), et la console du navigateur affiche [deskwoot] embedded container not found. Vérifiez aussi que l'élément a une hauteur, car le chat en occupe 100%.

Les visiteurs peuvent-ils fermer le chat ?

Le mode intégré n'a pas de bouton de fermeture. C'est votre page qui décide : window.deskwoot.close() masque le chat, et open() ou toggle() l'affiche de nouveau.

Le mode intégré fonctionne-t-il avec la vérification d'identité ?

Oui. Mettez l'objet user dans le même window.deskwootSettings, à côté de embedded: true. La façon de le signer est expliquée dans Vérification d'identité des clients connectés.

Puis-je afficher le bouton du chat sur certaines pages et le chat intégré sur d'autres ?

Oui. Le mode intégré se définit dans le code de chaque page. Les pages avec embedded: true affichent le chat dans la page, et les pages sans cette option affichent le chat comme d'habitude.

Où en savoir plus sur les options ?

Toutes les options du widget et l'API JavaScript se trouvent dans la documentation du widget.