Le chat voyageurs,
sur votre propre site.

1. 1
   Créez votre widget

   Ouvrez l’app Widget de chat IA dans Prohost et définissez le nom, le message d’accueil et le style du bouton que verront vos visiteurs.

2. 2
   Copiez votre extrait

   Dans la section Ajouter à un autre site, copiez l’extrait. Il contient déjà l’identifiant de votre widget, votre clé d’intégration et vos réglages de bouton.

3. 3
   Collez-le avant la balise body fermante

   Placez-le dans le pied de page global ou la zone de code personnalisé, puis publiez. Le bouton apparaît dans le coin au chargement suivant.

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  data-position="bottom-right"
  data-launcher-color="#4F46E5"
  data-launcher-icon="chat"
  data-sound="on"
  async></script>

Remplacez WIDGET_ID et WIDGET_API_KEY par les valeurs de vos réglages de widget, ou copiez simplement l’extrait tout prêt depuis l’app, qui les remplit pour vous. La clé d’intégration est publique et limitée à ce seul widget : elle ne donne aucun accès à votre compte. Prohost masque la clé après le premier affichage ; utilisez Renouveler la clé si vous avez besoin d’un extrait copiable à jour.

<script
  src="https://app.prohost.ai/webchat.js"
  data-widget="WIDGET_ID"
  data-api-key="WIDGET_API_KEY"
  async></script>

Fonctionne avec la plupart des créateurs de sites : Webflow, WordPress, Squarespace et Wix disposent tous d’un emplacement pour du code personnalisé en pied de page.

data-hide-mobile ne compte que par sa présence : n’importe quelle valeur, y compris une chaîne vide, l’active. Tous les autres attributs sont évalués sur leur valeur, et data-sound ne réagit qu’à la valeur exacte en minuscules on.

• Le visiteur doit d’abord interagir avec la page

  Les navigateurs bloquent l’audio tant que personne n’a cliqué, touché ou tapé. Ouvrir le bouton compte, écrire dans la fenêtre aussi — celui qui a envoyé le message à l’origine de la réponse l’entendra donc. Si le navigateur bloque quand même la lecture, rien ne casse : la pastille de non-lus sur le bouton reste le signal principal et le son n’est qu’un bonus.

• Jamais pendant qu’il lit

  Pas de carillon tant que la fenêtre est ouverte et l’onglet au premier plan : la réponse est déjà à l’écran. Il retentit fenêtre fermée ou onglet en arrière-plan. La pastille de non-lus suit une règle un peu plus stricte : elle n’apparaît que fenêtre fermée.

• Une rafale de réponses, un seul carillon

  Plusieurs messages arrivant ensemble produisent un seul signal, pas un par message.

function wireUpWebchat() {
  window.ProhostWebchat.on('webchat_host_message', (event) => {
    console.log(event.type);
  });

  document.querySelector('#my-chat-button')?.addEventListener('click', () => {
    window.ProhostWebchat.open();
    // window.ProhostWebchat.close() collapses it again.
  });
}

if (window.ProhostWebchat) {
  wireUpWebchat();
} else {
  // src*= rather than src$= — the tag may carry a cache-busting query string.
  document
    .querySelector('script[src*="/webchat.js"]')
    ?.addEventListener('load', wireUpWebchat);
}

Pratique avec data-hide-mobile : masquez le bouton par défaut sur mobile et ouvrez la fenêtre depuis votre propre bouton. Les événements ne sont relayés que s’ils proviennent de l’intégration Prohost, jamais d’une autre origine.