Language:

Wie man eine schwebende WhatsApp-Schaltfläche auf einer Website einbettet html

Suchen Sie nach einer Möglichkeit, eine schwebende WhatsApp-Chat-Schaltfläche für Ihre Website zu erstellen? Wir bieten Ihnen eine einfache Lösung mit einem praktischen Plugin! In diesem Artikel zeigen wir Ihnen, wie Sie in wenigen Schritten Ihre eigene schwebende Chat-Schaltfläche erstellen und auf Ihrer Website einfügen können.
WhatsApp-Schaltfläche erstellen
Share:
Auf Facebook teilen
Share on X
Share on LinkedIn
Share on WhatsApp
Copy Link

Über das Floating-WhatsApp-Button-Plugin

Möchten Sie die Funktionalität Ihrer Website erweitern, indem Sie eine schwebende WhatsApp-Schaltfläche hinzufügen, wissen aber nicht, wie das geht? Hier können Ihnen einige fertige Lösungen helfen – zum Beispiel ein Plugin, das in den HTML-Code jeder Website eingebettet werden kann – von WordPress und Squarespace bis hin zu Shopify und Wix. Und wir können Ihnen diese Lösung zur Verfügung stellen. Es handelt sich um das Floating-WhatsApp-Button-Plugin von Elfsight. Mit Hilfe dieses Plugins können Sie ganz einfach ein Chatfenster für jeden Zweck auf Ihrer Website erstellen.

  1. Beginnen Sie mit der Auswahl einer passenden Vorlage für den Chat.
  2. Verbinden Sie Ihr Profil und passen Sie das Chatfenster an.
  3. Holen Sie sich den Code für Ihr WhatsApp-Chat-Widget.
  4. Betten Sie den Code in Ihre Website ein.

Erstellen Sie Ihre schwebende WhatsApp-Schaltfläche direkt hier in nur wenigen Klicks!

Floating WhatsApp-Schaltfläche zum HTML-Code der Website hinzufügen

Sie können mit nur wenigen Klicks eine schwebende WhatsApp-Schaltfläche erstellen, die Sie zum HTML-Code Ihrer Website hinzufügen können. HTML hilft Ihnen beim Erstellen einer Website für jeden Zweck. Und selbst wenn das Erstellen der Website nicht schwer ist, kann das Hinzufügen zusätzlicher Elemente wie einer schwebenden Schaltfläche Hilfe von Drittanbietern erfordern. Dies lässt sich ganz einfach mit unserem benutzerfreundlichen Konfigurator erledigen. Sehen wir uns an, wie Sie das machen können.

  1. Erstellen Sie ein Konto bei Elfsight Apps und melden Sie sich im Admin-Panel an.
  2. Wählen Sie im Konfigurator die Floating-Vorlage aus und passen Sie diese an.
  3. Speichern Sie Ihre schwebende Chat-Schaltfläche.
  4. Kopieren Sie den Installationscode, der im Popup-Fenster erscheint.
  5. Betten Sie den Code des Plugins an der gewünschten Stelle auf Ihrer Website ein.

Das war ziemlich einfach, oder? Wenn Sie eine visuellere Anleitung bevorzugen, wie Sie die schwebende WhatsApp-Schaltfläche in Ihren HTML-Code einfügen, sehen Sie sich das Video unten an:

Wie man die schwebende WhatsApp-Schaltfläche zu WordPress und anderen Plattformen hinzufügt

WordPress ist einer der beliebtesten Website-Builder weltweit, daher ist es nicht verwunderlich, dass viele Nutzer Anleitungen benötigen, wie man eine schwebende Chat-Schaltfläche hinzufügt. Es ist wirklich einfach, eine WhatsApp-Chat-Schaltfläche für WordPress zu Websites hinzuzufügen. Nachfolgend haben wir beschrieben, wie Sie dies mit dem nativen Editor von WordPress tun können. Sie werden sehen, wie einfach es ist, WhatsApp zu WordPress hinzuzufügen.

Sobald Sie Ihre schwebende Chat-Schaltfläche im Elfsight-Admin-Dashboard erstellt und angepasst haben, betten Sie den Installationscode in das HTML-Feld des WordPress-Admin-Panels ein. Das ist wirklich leicht umzusetzen! In der Regel sollten Sie den Installationscode in einen HTML-Code-Abschnitt einfügen. So funktioniert es:

  1. Erstellen Sie Ihr WhatsApp-Floating-Button-Plugin im Admin-Panel, indem Sie die passende Vorlage auswählen.
  2. Speichern Sie das Ergebnis und kopieren Sie den Installationscode aus dem speziellen Popup-Fenster.
  3. Melden Sie sich im Admin-Panel von WordPress an.
  4. Gehen Sie zum Abschnitt „Seiten“ und wählen Sie die Seite aus, auf der Sie die Schaltfläche einbetten möchten.
  5. Fügen Sie an der gewünschten Stelle auf der Website einen benutzerdefinierten HTML-Block hinzu.
  6. Fügen Sie in diesem HTML-Block den schwebenden Schaltflächen-Code ein, den Sie im Generator erhalten haben.
  7. Klicken Sie auf „Aktualisieren“, um alle Änderungen zu speichern.

Sie können im Elfsight-Panel beliebig viele Anpassungen vornehmen, und diese werden in Ihrer schwebenden Chat-Schaltfläche angezeigt. Änderungen am HTML-Code Ihrer WordPress-Seite sind nicht erforderlich.

Erfahren Sie mehr über das Hinzufügen von WhatsApp zu WordPress und seine nützlichen Funktionen.

Unser WhatsApp-Chat ist auch auf anderen Plattformen verfügbar, z. B. bei Wix. Hier finden Sie einfache Anleitungen zum Hinzufügen Ihres Chat-Plugins zu einer bestimmten Wix-Seite:

  1. Melden Sie sich beim Wix-Website-Builder an, wählen Sie die Seite aus, auf der unser Plugin erscheinen soll, und klicken Sie auf „Website bearbeiten“.
  2. Fügen Sie einen HTML-Block hinzu, indem Sie auf das Plus-Symbol klicken, zum Abschnitt „Einbetten“ gehen und in der Registerkarte „Benutzerdefinierte Einbettungen“ „Widget einbetten“ auswählen.
  3. Fügen Sie den Installationscode ein. Klicken Sie dann auf „Code eingeben“, fügen Sie den Code-Schnipsel ein und fahren Sie mit „Aktualisieren“ fort.
  4. Passen Sie die Größe und Position des Plugins an. Ziehen Sie das Plugin an die gewünschte Stelle und ändern Sie die Maße, bis es perfekt passt – ohne Scrollbalken.
  5. Optimieren Sie das Plugin für mobile Geräte und veröffentlichen Sie es. Klicken Sie auf das Mobile-Symbol, um im mobilen Editor zu arbeiten, passen Sie ggf. die Größe des Plugins an und klicken Sie dann auf „Veröffentlichen“.

Fertig! Sie haben Ihre Elfsight-App zu einer bestimmten Seite Ihrer Wix-Website hinzugefügt.

Und wie steht es mit dem Hinzufügen eines WhatsApp-Chats zu Shopify? Das ist ganz einfach. So geht’s in nur wenigen Schritten:

  1. Melden Sie sich im Admin-Panel von Shopify an und navigieren Sie zu Vertriebskanäle → Onlineshop.
  2. Klicken Sie auf die Schaltfläche „Anpassen“, um den visuellen Editor zu öffnen.
  3. Um die Seite zu wechseln, verwenden Sie die Dropdown-Liste oben.
  4. Klicken Sie auf „Abschnitt hinzufügen“ und wählen Sie „Custom Liquid“ aus.
  5. Fügen Sie den Code Ihres Shopify WhatsApp-Chats in das Custom-Liquid-Feld ein, passen Sie Farben und Abstände bei Bedarf an und speichern Sie.

Auf diese Weise können Sie ganz einfach einen benutzerdefinierten WhatsApp-Chat zu den Seiten Ihrer Shopify-Website hinzufügen.

WhatsApp-Schaltfläche: coole Anwendungsfälle

Wenn Sie Ihre schwebende WhatsApp-Chat-Schaltfläche für WordPress oder eine andere Website erstellen und anpassen, gibt es oft ein Problem – Schwierigkeiten bei der Anpassung. Besonders bei Einleitungstexten ist es nicht immer klar, wie man diese im HTML-Code der Website gestalten sollte. Deshalb haben wir für Sie einige Designbeispiele zusammengestellt, die Ihnen als Inspiration dienen können.

Beispiel 1: Chat-Schaltfläche einbetten

Dies ist ein Beispiel für eine schwebende Schaltfläche für WordPress oder eine andere Website in klassischem Design, das den Nutzern vertraut ist. Um ein benutzerdefiniertes Dialogfeld zu öffnen, muss der Nutzer nur auf die Schaltfläche klicken. Das Chatfenster enthält eine individuell gestaltete Antwortzeit-Nachricht, die das Vertrauen Ihrer Besucher stärkt – sie sehen, dass Sie für Fragen jederzeit erreichbar sind.

Beispiel 2: Beratungs-Schaltfläche

Das WhatsApp-Chat-Symbol auf WordPress oder jeder anderen Website ist eine großartige Möglichkeit, Nutzern bei ihren Fragen Beratung anzubieten. Mit den umfangreichen Anpassungsoptionen des Plugins können Sie die Farben der Schaltfläche und des Chatfensters problemlos an Ihr Website-Design und dessen HTML-Code anpassen.

Beispiel 3: Onboarding-Schaltfläche

Kundensupport und Onboarding sind ein wichtiger Teil jeder kommerziellen Website. Diese Dienstleistungen über ein Chatfenster bereitzustellen, das in den HTML-Code Ihrer WordPress- oder anderen Website eingebettet ist, ist eine hervorragende Idee. Sie können die schwebende Chat-Schaltfläche auf allen Seiten Ihrer Website verwenden und so ständig mit Ihren Kunden in Kontakt bleiben und die Servicequalität verbessern.

Beispiel 4: Feedback-Schaltfläche

Möchten Sie die Qualität Ihrer Produkte und Dienstleistungen verbessern, indem Sie schnell und zuverlässig Feedback erhalten? Dann hilft Ihnen die schwebende Chat-Schaltfläche im HTML-Code Ihrer Website – jeder kann sie jederzeit anklicken, um seine Meinung zu äußern. Wie bei den vorherigen Beispielen können Sie das Chatdesign einfach in Ihren Wunschfarben anpassen, um es nahtlos in das Gesamtbild Ihrer Website einzufügen.

Vorteile der WhatsApp Floating-Schaltfläche für Ihr Unternehmen

Warum sollten Sie sich dafür entscheiden, eine schwebende WhatsApp-Schaltfläche in den HTML-Code Ihrer Website einzufügen? Die Antwort ist einfach – wegen der Benutzerfreundlichkeit. Es bietet Ihrer Zielgruppe die Möglichkeit, mit Ihrem Unternehmen mit nur zwei Klicks in einen Dialog zu treten. Kein Ausfüllen von Formularen, keine Telefonnummern oder Nachrichten nötig. Nur zwei Klicks: einer auf der Website, der andere in der WhatsApp-App. Was könnte einfacher sein?

Die meisten Menschen finden es bequemer, über Messenger zu kommunizieren, deren Oberfläche ihnen vertraut ist. Es ist praktischer als E-Mail, Telefon oder Online-Chat. Nachfolgend erläutern wir, warum Sie in Erwägung ziehen sollten, eine WhatsApp-Chat-Schaltfläche zu Ihrer Website hinzuzufügen.

Beliebtheitssteigerung durch die Schaltfläche

WhatsApp ist nach Facebook der zweitgrößte Dienst der Welt. Laut Statista hat WhatsApp über 500.000 täglich aktive Nutzer. In vielen Ländern ist WhatsApp der führende Messenger in Bezug auf Nutzerzahlen.

Schneller Kommunikationsweg mit der Schaltfläche

Menschen empfinden Messenger als einen schnellen Kommunikationsweg. Der Verkäufer wird in jedem Kanal schnell auf Nachrichten reagieren – aber der Nutzer wird in WhatsApp schneller antworten. Warum?

  • WhatsApp genießt ein hohes Vertrauen bei den Nutzern. Selbst wenn jemand die App nicht mag, wird er sie dennoch installieren – als Kommunikationskanal mit Familie und Freunden. Daher reagieren viele besonders schnell auf WhatsApp-Nachrichten.
  • WhatsApp ist kein Spam-Kanal. Meistens erhalten wir dort nur Nachrichten von Personen, die wir kennen. Es ist frei von aufdringlicher Werbung, nervigen Push-Benachrichtigungen, Newsfeeds und Massen-Spam.
  • Ungelesene Nachrichten lenken Nutzer ab. Selbst wenn sie nicht antworten möchten, werden sie die Nachricht öffnen.
  • Diese Punkte gelten nicht für E-Mails. Wenn eine E-Mail nicht wichtig erscheint, wird sie möglicherweise nie geöffnet – und Sie erfahren nie, ob sie gelesen wurde.

WhatsApp zeigt außerdem Nachrichtenstatus an. Sie sehen, ob der Kunde Ihre Nachricht gelesen hat – und umgekehrt weiß auch der Nutzer, dass Sie das sehen. Das erhöht die Wahrscheinlichkeit auf eine Antwort. Selbst ein kurzes „Ja“ oder „Nein“ hilft Ihnen, den nächsten Schritt zu planen.

Lockerere Atmosphäre mit WhatsApp-Schaltfläche

Menschen nehmen WhatsApp-Konversationen als ungezwungene Kommunikation wahr – ein Gespräch ohne Formalitäten. Solche Dialoge wirken einladend. Nutzer haben keine Angst davor, Fehler zu machen, Rückfragen zu stellen oder zu scherzen. E-Mails hingegen gelten weiterhin als formell und erfordern strukturierte, ausführliche Texte. „Das kostet Zeit“, denkt sich der Nutzer – und antwortet lieber dem Wettbewerber via WhatsApp.

Call-to-Action-Schaltfläche

Die Bedeutung eines Call-to-Actions (CTA) kann nicht hoch genug eingeschätzt werden. Das WhatsApp-Logo allein ist kein Call-to-Action. Nicht alle Besucher Ihrer Website erkennen sofort, was die Chat-Schaltfläche bewirkt. Und selbst wenn – ohne klaren CTA ist die Conversion-Rate niedrig.

Ohne CTAs sinkt die Conversion. Ein Tooltip-CTA ist ebenfalls nicht besonders effektiv. Am besten funktioniert eine Nachricht, die dauerhaft sichtbar ist und direkt in das Plugin integriert wurde.

Individuelles Design der Schaltfläche

Ein wichtiger Aspekt, damit sich die Chat-Schaltfläche harmonisch in das Design Ihrer Website einfügt. Flexible Einstellungen verhindern Designkonflikte mit anderen Elementen Ihrer Seite. Ideal ist ein Service, der Änderungen an Schriftart, Farbe, Größe und Position ermöglicht.

Fazit

Das WhatsApp-Plugin ist kein Zauberwerkzeug, das Ihnen sofort massenweise Aufträge bringt. Aber bei richtiger Anwendung kann es die Conversion bei mobilem Traffic auf Ihrer Website erheblich verbessern.