Dokumentation
Funktionen
Widget

Widget

Das chatjetapp.com Chat-Widget kann verwendet werden, um einen chatjetapp.com-basierten Chatbot zu jeder Website hinzuzufügen (wie dieser hier). Folge diesen Schritten, um es zu installieren.

Voraussetzungen

Um das chatjetapp.com Widget auf deiner Seite einzurichten, musst du zuerst einen Bot erstellen und ihn öffentlich machen.

Widget installieren

Folge diesen Schritten, um das Chat-Widget auf deiner Seite zu installieren.

Füge zunächst im <head> deiner Seite das chatjetapp.com Widget JavaScript-Modul hinzu:

<script type='module' src='https://unpkg.com/chatjetapp-widget@0.1.0/dist/chatjetapp-widget/chatjetapp-widget.esm.js'></script>

Füge dann dort, wo du den Button zum Öffnen von chatjetapp.com haben möchtest, ein Snippet wie dieses hinzu:

<chatjetapp-widget visible="false" team="demo" bot="demo" button-text="Los geht's"></chatjetapp-widget>

Stelle sicher, dass du die team und bot Attribute an die IDs in deinem chatjetapp.com Konto anpasst.

Widget anpassen

Du kannst die Farbe und Position des Chat-Widgets mit CSS und CSS-Variablen anpassen. Du kannst auch den Button-Text mit dem button-text Attribut ändern.

Hier ist ein Beispiel, das die Farben und den Text ändert und das Widget in der unteren rechten Ecke fixiert:

<style>
  chatjetapp-widget {
    /* Zur Referenz, dies ist die Standard-Positionierung
    position: fixed;
    right: 20px;
    bottom: 20px;
    */

    /* Wenn du die Position auf 'static' änderst, wird der Button dort auf der Seite platziert, wo das <chatjetapp-widget> Element definiert ist (anstatt in der Ecke zu schweben) */
    position: static;

    /* Farben ändern */
    --button-background-color: blue;
    --button-background-color-hover: black;
    --button-text-color: white;
    --button-text-color-hover: yellow;
    --button-border-color: gray;
    --button-border-color-hover: black;
  }
</style>
<chatjetapp-widget visible="false" team="demo" bot="demo" button-text="👋"></chatjetapp-widget>

Z-Index

Wenn der Chatbot unter anderen Elementen auf der Seite erscheint, kannst du den z-index des Chatbots erhöhen, indem du die CSS-Variable --chatjetapp-widget-z-index setzt. Der Standardwert ist 50.

<style>
  chatjetapp-widget {
    --chatjetapp-widget-z-index: 1000;
  }
</style>

Du kannst auch JavaScript verwenden, um Widget-Eigenschaften dynamisch zu setzen. Für detaillierte Informationen über die unterstützten JS-Eigenschaften, HTML-Tag-Attribute und CSS-Eigenschaften, siehe die Widget-Referenzdokumentation.

AssistentChats