Chat über einen eigenen Link oder Knopf öffnen

Statt über die Chat-Blase unten in der Ecke können Ihre Besucher den Chat auch über einen Link oder Knopf Ihrer Website öffnen, zum Beispiel über „Hilfe & Support“ in der Seitenleiste oder „Frage zum Tarif“ auf der Preisseite. Das Chatfenster öffnet sich dann direkt neben diesem Element.

Sie brauchen dafür keinen zusätzlichen Code: Der normale Einbindungsschnipsel aus Das Widget einbinden genügt. Das Beispiel zum Kopieren finden Sie auch im Konto unter Projekt → Einbindung → Chat über eigenen Link öffnen.

Der einfachste Fall

Ein Link mit dem Ziel #rc-open:

<a href="#rc-open">Hilfe & Support</a>

Oder ein Knopf mit dem Attribut data-rc-open:

<button type="button" data-rc-open>Chat öffnen</button>

data-rc-open funktioniert an jedem Element, nicht nur an Knöpfen. Statt #rc-open versteht das Widget auch #reactive-chat als Linkziel.

Der Klick wird auch dann angenommen, wenn das Widget noch nicht vollständig geladen ist: Das Fenster öffnet sich, sobald es bereit ist.

Wo das Fenster erscheint

• Rechts neben dem Element, wenn dort genug Platz ist, sonst links davon. Oben schließt das Fenster bündig mit dem Element ab.
• Immer ganz im Bild: Das Fenster wird an den sichtbaren Bereich angepasst und folgt dem Element, wenn die Seite gescrollt oder das Browserfenster in der Größe verändert wird.
• Auf schmalen Bildschirmen (unter 480 Pixel Breite, also auf den meisten Smartphones) öffnet sich der Chat wie gewohnt über die ganze Fläche. Neben dem Element wäre dort kein Platz.
• Als Seitenleiste: Ist das Chatfenster unter Aussehen als Seitenleiste in voller Höhe eingestellt, erscheint es dort und nicht neben dem Element.
• Ist der Chat schon offen, wandert das Fenster zu dem Link, der zuletzt angeklickt wurde.
• Beim Schließen (auch mit der Escape-Taste) springt der Tastaturfokus zurück auf den Link oder Knopf, über den der Chat geöffnet wurde.

Soll das Fenster an seiner normalen Position unten in der Ecke aufgehen, schreiben Sie data-rc-open="corner". Gleichwertig ist data-rc-anchor="none":

<button type="button" data-rc-open="corner">Chat öffnen</button>

Text ins Eingabefeld schreiben

Mit data-rc-message steht beim Öffnen bereits ein Satz im Eingabefeld. Er wird nicht abgeschickt – der Besucher kann ihn ergänzen, ändern oder löschen und sendet selbst.

<button type="button" data-rc-open data-rc-message="Ich habe eine Frage zu meinem Tarif">
  Frage zum Tarif
</button>

Übernommen werden höchstens 200 Zeichen. Der Chat wechselt dafür in den Reiter mit dem Gespräch.

Einen Reiter wählen

Hat Ihr Chat mehrere Reiter, bestimmt data-rc-tab, welcher beim Öffnen vorne liegt:

• msg – das Gespräch,
• home – die Startseite,
• help – die Hilfeartikel.

<a href="#rc-open" data-rc-tab="help">Hilfeartikel durchsuchen</a>

Gibt es den genannten Reiter in Ihrem Chat nicht (zum Beispiel help ohne Hilfeartikel), öffnet sich der Chat ganz normal.

Aus eigenem JavaScript öffnen

Dieselben Möglichkeiten gibt es als Aufruf. anchor ist das Element, neben dem das Fenster erscheinen soll; message und tab sind optional:

document.querySelector('#mein-knopf').addEventListener('click', function (ev) {
  ReactiveChat('open', {
    anchor: ev.currentTarget,
    message: 'Ich habe eine Frage zu meinem Tarif',
    tab: 'msg'
  });
});

Ohne anchor öffnet sich das Fenster an der normalen Position. ReactiveChat('open') ohne Angaben verhält sich wie bisher. Trägt das Element selbst data-rc-message oder data-rc-tab, gelten diese Angaben auch beim Aufruf; was Sie im Aufruf ausdrücklich angeben, hat Vorrang.

Läuft Ihr Code womöglich, bevor der Einbindungsschnipsel geladen ist, setzen Sie diese Zeile davor. Aufrufe werden dann vorgemerkt und ausgeführt, sobald das Widget bereit ist:

window.ReactiveChat = window.ReactiveChat || function () { (window.ReactiveChat.q = window.ReactiveChat.q || []).push(arguments); };

Ganz ohne Chat-Blase

Soll der Chat nur noch über Ihre eigenen Links erreichbar sein – etwa über „Hilfe & Support“ in der Seitenleiste –, gibt es dafür zwei Wege.

Im Konto: Unter Projekt → Aussehen → Marke wählen Sie bei Anzeige den Eintrag Nur über eigene Links (kein Chat-Symbol) und speichern. Die Einstellung wirkt ohne Änderung an Ihrer Website. Kopieren Sie danach trotzdem den Einbindungsschnipsel unter Projekt → Einbau neu: Der neue Schnipsel enthält keine Markenfarbe mehr, und so blitzt das Chat-Symbol auch während des Ladens nicht kurz auf. Solange das Widget Ihre Einstellung nicht vom Server bekommen konnte – etwa ohne Verbindung oder beim ersten Besuch, bevor der Besucher Cookies zugestimmt hat –, erscheint das Symbol zur Sicherheit trotzdem, damit der Chat erreichbar bleibt.

Am Schnipsel: Wenn das Symbol auf keinen Fall erscheinen darf, blenden Sie die Chat-Blase mit data-rc-hide-launcher="true" am Einbindungsschnipsel aus. Dieses Attribut gilt immer, unabhängig von der Einstellung im Konto:

<script src="https://cdn.reactive.chat/loader.js"
        data-rc-site-key="SITE_KEY"
        data-rc-hide-launcher="true"
        async></script>

Achten Sie dann darauf, dass auf jeder Seite, auf der Besucher den Chat erreichen sollen, mindestens ein solcher Link steht.

Wenn etwas nicht klappt

• Beim Klick hängt der Browser nur #rc-open an die Adresse: Auf dieser Seite ist das Widget nicht eingebunden oder (etwa ohne Einwilligung) nicht geladen. Prüfen Sie, ob der Einbindungsschnipsel dort steht.
• Das Fenster öffnet sich in der Ecke statt neben dem Link: Steht data-rc-open="corner" oder data-rc-anchor="none" am Element? Ist das Browserfenster schmaler als 480 Pixel? Ist das Chatfenster als Seitenleiste eingestellt?
• Der Text erscheint nicht im Eingabefeld: Das Attribut heißt data-rc-message und muss am angeklickten Element selbst stehen.

Mehr zu den übrigen Angaben am Schnipsel steht unter Das Widget einbinden. Wie Sie im Chat eine Karte für Ihr eigenes Angebot zeigen, beschreibt Die Werbekarte im Chat.