Gästechat,
auf deiner eigenen Website.

1. 1
   Widget anlegen

   Öffne die KI-Chat-Widget-App in Prohost und lege Name, Begrüßung und Stil des Chat-Buttons fest, den deine Besucher sehen.

2. 2
   Snippet kopieren

   Kopiere das Snippet im Bereich Zu einer anderen Website hinzufügen. Es enthält bereits deine Widget-ID, deinen Embed-Key und deine Button-Einstellungen.

3. 3
   Vor dem schließenden Body-Tag einfügen

   Setze es in den seitenweiten Footer oder den Bereich für eigenen Code und veröffentliche. Beim nächsten Seitenaufruf erscheint der Chat-Button in der Ecke.

<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>

Ersetze WIDGET_ID und WIDGET_API_KEY durch die Werte aus deinen Widget-Einstellungen — oder kopiere einfach das fertige Snippet aus der App, das beides schon enthält. Der Embed-Key ist öffentlich und gilt nur für dieses eine Widget: Er gewährt keinerlei Zugriff auf dein Konto. Prohost blendet den Key nach der ersten Anzeige aus; nutze Key rotieren, wenn du ein frisches, kopierbares Snippet brauchst.

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

Funktioniert mit den meisten Website-Baukästen — Webflow, WordPress, Squarespace und Wix haben alle einen Platz für eigenen Code im Footer.

data-hide-mobile zählt nur als vorhanden oder nicht: Jeder Wert, auch eine leere Zeichenkette, schaltet es ein. Alle anderen Attribute werden über ihren Wert ausgewertet — data-sound reagiert ausschließlich auf den exakten Kleinbuchstaben-Wert on.

• Der Besucher muss zuerst mit der Seite interagieren

  Browser blockieren Audio, bis jemand klickt, tippt oder etwas eingibt. Das Öffnen des Chat-Buttons zählt dazu, ebenso das Schreiben im Chat-Fenster — wer die Nachricht geschickt hat, die zur Antwort führte, hört den Ton also. Blockiert der Browser die Wiedergabe trotzdem, geht nichts kaputt: Das Ungelesen-Zeichen am Button ist das eigentliche Signal, der Ton nur eine Zugabe.

• Nie, während gerade gelesen wird

  Kein Ton, solange das Chat-Fenster offen und der Tab im Vordergrund ist — die Antwort steht ja schon auf dem Bildschirm. Er erklingt bei geschlossenem Fenster oder wenn der Tab im Hintergrund liegt. Das Ungelesen-Zeichen folgt einer etwas engeren Regel: Es erscheint nur bei geschlossenem Fenster.

• Mehrere Antworten, ein Ton

  Kommen mehrere Nachrichten gleichzeitig an, gibt es ein einziges Signal statt eines pro Nachricht.

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);
}

Praktisch in Kombination mit data-hide-mobile: Blende den Standard-Button auf dem Handy aus und öffne das Chat-Fenster stattdessen über deinen eigenen Button. Ereignisse werden nur weitergereicht, wenn sie aus der Prohost-Einbettung stammen, nie von einer anderen Quelle.