Eigenen Button gestalten
Den Chat über einen eigenen Button auf Ihrer Website öffnen statt über die Chat-Blase in der Ecke. Mit einem KI-Assistenten oder von Ihrem Entwickler.
Statt der runden Chat-Blase in der Ecke kann ein eigener Button den Chat öffnen, zum Beispiel „KI fragen“ in der Navigation Ihres Hilfe-Centers oder Ihrer Dokumentation. Der Chat öffnet sich dann als Fenster in der Mitte der Seite. Das richten Sie im Code Ihrer Website ein; im Widget Studio gibt es dafür keinen Schalter.
Wer baut den Button ein?
Dafür ändern Sie den Code Ihrer Website an einer Stelle. Das kann Ihr Entwickler oder Ihre Agentur, ein KI-Assistent wie ChatGPT, Claude oder Cursor, oder Sie selbst über einen Baustein für eigenen HTML-Code in Ihrem Website-Baukasten, zum Beispiel in WordPress, Webflow oder Wix.
Was Sie brauchen
- Den Code aus Einbetten. Klicken Sie im Widget Studio in der Live-Vorschau oben auf Einbetten und kopieren Sie den Code im Reiter HTML.
- Die Stelle und den Text Ihres Buttons, zum Beispiel „KI fragen“ in der Hauptnavigation.
Button einbauen
- Kopieren Sie den Prompt unten mit dem Symbol oben rechts im Kasten.
- Fügen Sie ihn in Ihren KI-Assistenten ein, zum Beispiel ChatGPT, Claude, Cursor oder Lovable.
- Ersetzen Sie die drei Stellen in eckigen Klammern: Ihren Code aus Einbetten, die Stelle für den Button und seinen Text.
- Übernehmen Sie das Ergebnis in Ihre Website und testen Sie den Button dort.
Arbeitet Ihr KI-Assistent direkt in Ihrem Website-Code, etwa Cursor oder Lovable, ändert er die Dateien selbst. Sonst bekommen Sie fertigen Code zum Einfügen.
Bitte baue auf meiner Website einen eigenen Button ein, der unseren Jexity
Chat öffnet.
Mein Code aus Jexity Chat (Einbetten, Reiter HTML):
[HIER IHREN CODE EINFÜGEN]
Wo der Button stehen soll: [zum Beispiel Hauptnavigation, neben „Kontakt“]
Text auf dem Button: [zum Beispiel „KI fragen“]
So soll es umgesetzt werden:
1. Ersetze im Code am Ende der Adresse widget.js durch loader.js. Die
restliche Adresse und die Werte von data-org-slug und data-proj-slug
bleiben genau so.
2. Ergänze am script-Tag data-trigger="none". Dann erscheint die runde
Chat-Blase nicht.
3. Ergänze am script-Tag data-window-position="middle-center". Dann öffnet
sich der Chat in der Mitte der Seite.
4. Lade das Skript einmal pro Seite vor dem schließenden </body>-Tag und
behalte async bei.
5. Baue an der genannten Stelle einen echten <button type="button"> mit
meinem Text ein. Gestalte ihn wie die anderen Buttons an dieser Stelle.
6. Beim Klick ruft der Button window.JexityChat?.open() auf. Das ?. ist
wichtig, weil das Skript asynchron lädt.
7. Nutzt meine Website React oder Next.js, frag mich nach dem Code aus dem
Reiter React. Dann setzt du am JexityChatProvider trigger="none" und
windowPosition="middle-center" und öffnest den Chat mit open() aus
useJexityChat().
Ändere sonst nichts an der Seite. Sag mir danach, welche Dateien du geändert
hast und wie ich den Button teste.Button testen
Die Live-Vorschau im Widget Studio zeigt immer die Chat-Blase. Ihren eigenen Button testen Sie auf Ihrer Website.
Haben Sie unter Domains festgelegt, auf welchen Websites der Chat erscheinen darf, muss Ihre Website dort stehen. Sonst öffnet der Button keinen Chat. Änderungen unter Domains gelten sofort, ohne Speichern. Mehr dazu unter Festlegen, wo der Chat erscheint.
Fragen
Macht mein eigener Button die Seite langsamer?
Nein. Der Chat lädt erst, wenn jemand zum ersten Mal auf Ihren Button klickt. Bis dahin lädt Ihre Seite nur ein kleines Skript.
Welche Einstellungen aus dem Widget Studio gelten weiter?
Farben, Texte, Gesprächseinstiege, Sprache und Datenschutz-Hinweis kommen weiter aus dem Widget Studio. Die Einstellungen unter Trigger-Button, auch die proaktive Nachricht, gelten hier nicht, weil Ihr eigener Button den Chat öffnet.
Was passiert auf dem Handy?
Auf Handys und kleinen Tablets öffnet sich der Chat über den ganzen Bildschirm, auch mit Ihrem eigenen Button.
Mein Button tut nichts. Was prüfe ich?
Prüfen Sie, ob die Adresse im Skript auf loader.js endet, ob das script-Tag data-trigger="none" hat, ob Ihr Button window.JexityChat?.open() aufruft und ob Ihre Website unter Domains erlaubt ist.