Your AI Connector Docs

WhatsApp-Widget

Integration des WhatsApp-Widgets

Fügen Sie mit dieser einfachen Anleitung einen schwebenden WhatsApp-Chat-Button zu Ihrer Website hinzu.

Gut zu wissen. Das WhatsApp-Widget ist eine einfache „Click-to-Chat“-Schaltfläche – ein Klick darauf öffnet WhatsApp für Ihre Besucher, damit diese Ihnen dort eine Nachricht senden können. Es leitet keine Nachrichten in Ihren Chats-Posteingang weiter und aktiviert nicht von selbst die KI. Für ein KI-Chat-Erlebnis, das direkt auf Ihrer Website eingebettet ist, verwenden Sie stattdessen das separate Chat-Widget.

Sie möchten nur einen einfachen Link oder eine eigene Schaltfläche? Wenn Sie kein schwebendes Widget wünschen und stattdessen lieber Ihre eigene Schaltfläche (oder einen Textabschnitt) direkt mit einem WhatsApp-Chat verknüpfen möchten, springen Sie weiter unten zu Bevorzugen Sie einen einfachen Link oder eine Schaltfläche? (wa.me). Für ein SMS-Äquivalent siehe Hinzufügen eines Click-to-Text (SMS)-Links.

Installation

  1. Öffnen Sie die HTML-Datei Ihrer Website in einem Texteditor.
  2. Suchen Sie das </body>-Tag (normalerweise am Ende Ihrer HTML-Datei).
  3. Fügen Sie das folgende Skript direkt vor dem </body>-Tag ein:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  1. Ersetzen Sie im obigen Code:
    • NUMBER durch Ihre WhatsApp-Nummer
    • Beispiel: Verwenden Sie für die Nummer +1 555 123 4567 einfach: 15551234567

Hinzufügen einer benutzerdefinierten Nachricht

Wenn Sie möchten, dass eine vorausgefüllte Nachricht erscheint, sobald jemand auf den Button klickt:

  1. Verwenden Sie stattdessen diesen Code:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. Beispiel mit einer echten Nummer und Nachricht:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

Was Sie erhalten

Nach der Installation sehen Sie automatisch:

  • Einen grünen WhatsApp-Button unten rechts auf Ihrer Website
  • Der Button bleibt beim Scrollen sichtbar
  • Der Button funktioniert nahtlos auf Mobilgeräten
  • Eine dezente Animation erscheint, wenn Sie mit der Maus über den Button fahren

Zusätzliche Informationen

  • Ihre Telefonnummer kann mit oder ohne folgende Zeichen geschrieben werden:
    • Pluszeichen (+)
    • Leerzeichen
    • Bindestriche (-)
    • Diese werden automatisch korrekt verarbeitet
  • Die Nachricht kann ganz natürlich Leerzeichen enthalten
  • Keine zusätzlichen Dateien oder Installationen erforderlich
  • Der Button passt sich automatisch an mobile Bildschirme an

Vollständiges Webseiten-Beispiel 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>

Das obige Widget bietet Ihnen einen fertigen schwebenden Button. Wenn Sie jedoch bereits einen eigenen Button (oder einen Menü-Link, ein Bild oder einen Text) haben und möchten, dass dieser einfach einen WhatsApp-Chat mit Ihrer Nummer öffnet, benötigen Sie das Widget gar nicht – Sie verlinken ihn einfach mit einer wa.me URL.

Das Format lautet:

https://wa.me/NUMBER

Ersetzen Sie NUMBER durch Ihre vollständige Nummer im internationalen Format – nur Ziffern, kein Pluszeichen, keine Leerzeichen oder Bindestriche. Für +31 6 5801 5937 würden Sie zum Beispiel Folgendes verwenden:

https://wa.me/31658015937

Vorab ausgefüllte Nachricht

Damit beim Öffnen des Chats bereits eine Nachricht vorausgefüllt ist, fügen Sie ?text= gefolgt von Ihrer Nachricht hinzu:

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

Leerzeichen in der Nachricht müssen als %20 geschrieben werden (so gehen Links mit Leerzeichen um).

Einbindung in einen Button

Verlinken Sie einen beliebigen Button mit dieser URL – genau so, wie Sie einen Button mit jeder anderen Webadresse verlinken würden. In reinem HTML sieht das so aus:

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

In einem Website-Baukasten (Wix, Squarespace, WordPress, Webflow usw.) fügen Sie wie gewohnt einen Button hinzu und fügen die wa.me URL in das Feld „Link“ / „URL“ ein.

Sie möchten einen kurzen Link, der zwischen mehreren Nummern rotiert, sich an wiederkehrende Besucher erinnert und Klicks nachverfolgt? Verwenden Sie Short Links (unter Einstellungen → Kanäle) anstelle einer einfachen wa.me-URL.