chat widget herunterladen - chat widget -Quellcode herunterladen

chat widget

Anderer Quellcode

1.0.0

Herunterladen

Web-Chat-Widget

Fügen Sie ganz einfach mit einem einzigen script Tag eine Chat-Blase zu Ihrer Website hinzu. Ein einfaches und reaktionsfähiges Chat-Widget, das mit HTML, CSS und JavaScript erstellt wurde. Das Chat-Widget wird mit Tailwind CSS (v2) gestaltet. Der Blogbeitrag beschreibt, wie ich es gemacht habe.

Gebaut mit ChatGPT (GPT-4)

Ungefähr 95 % des Codes für dieses Widget ist von GPT-4 geschrieben, ich habe nur ein paar Dinge bearbeitet und angepasst

Merkmale

Keine externen Abhängigkeiten, reines Javascript
Responsives Design
Reibungslose Animationen und Übergänge
Leicht anpassbar
Leicht und unabhängig

TODO

Ersetzen Sie Tailwind durch eine benutzerdefinierte CSS-Datei
Sitzungspersistenz
Ajax-Mechanismus zum Senden und Empfangen von Nachrichten

Installation

Um das Chat-Widget zu installieren, befolgen Sie diese Schritte:

Kopieren Sie die Datei chat-widget.js in Ihr Projektverzeichnis.
Fügen Sie das folgende Skript-Tag zum Abschnitt <head> Ihres HTML-Dokuments hinzu:

 <script async src="./chat-widget.js"></script>

Nutzung und Anpassung

Der Code ist recht einfach und leicht zu befolgen. Sie können ihn problemlos an Ihre Bedürfnisse anpassen.
Nachrichten werden an die Funktion onUserRequest übergeben, wo Sie Benutzeranfragen bearbeiten und entsprechende Antworten bereitstellen können. Nutzen Sie die reply , um Antworten im Chat-Popup anzuzeigen.
Zur visuellen Anpassung können Sie direkt Änderungen am CSS vornehmen oder die Tailwind-CSS-Klassen durch Ihre eigenen benutzerdefinierten CSS-Klassen oder Inline-Stile ersetzen.

Demo

Hier ist eine Live-Demo des Chat-Widgets:

Chat-Widget-Demo

Mitwirken

Beiträge sind willkommen! Wenn Sie einen Fehler finden, eine Funktionsanfrage haben oder das Chat-Widget verbessern möchten, können Sie gerne ein Problem eröffnen oder eine Pull-Anfrage erstellen.