14. Geburtstagssale 33 % Rabatt + 1 GRATIS MONAT LIMITIERTES ANGEBOT Jetzt Angebot sichern
33 % Rabatt + 1 GRATIS MONAT Jetzt Angebot sichern
Sprache:

So fügen Sie den schwebenden WhatsApp-Button in Ihre Website ein.

Auf der Suche nach einer Möglichkeit, eine schwebende WhatsApp-Chat-Schaltfläche für Ihre Website zu erstellen? Wir bieten dies mithilfe eines praktischen Plugins an! In diesem Artikel zeigen wir Ihnen, wie Sie Ihre eigene schwebende Chat-Schaltfläche erstellen und sie in wenigen Schritten auf Ihrer Website hinzufügen.
Sehen Sie, was ChatGPT denkt Öffnen Sie den Live-Widget-Editor
How to Embed Floating WhatsApp Button to Website

Zum 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 Sie das anstellen? Hier finden Sie einige fertige Lösungen, zum Beispiel ein Plugin, das in den HTML-Code jeder Website eingebettet werden kann – von WordPress und Squarespace bis Shopify und Wix. Und wir können Ihnen diese Lösung anbieten. Wir sprechen hier vom Elfsight-Plugin Floating WhatsApp Button. Damit erstellen Sie ganz einfach ein Chatfenster für jeden Zweck auf Ihrer Website.

  1. Starten Sie damit, eine passende Vorlage für den Chat auszuwählen.
  2. Verbinden Sie Ihr Profil und passen Sie das Chatfenster an.
  3. Erhalten Sie den Code Ihres WhatsApp-Chat-Widgets.
  4. Fügen Sie den Code in Ihre Website ein.

Erstelle hier in wenigen Klicks deinen schwebenden WhatsApp-Button!

Fügen Sie dem HTML-Code Ihrer Website einen schwebenden WhatsApp-Button hinzu.

Sie können ganz einfach in wenigen Klicks eine schwebende WhatsApp-Schaltfläche erstellen und sie dem HTML-Code Ihrer Website hinzufügen. HTML hilft Ihnen dabei, eine Website für jedes Ziel zu erstellen. Und falls die Website-Erstellung nicht allzu schwer ist, kann das Hinzufügen zusätzlicher Elemente wie einer schwebenden Schaltfläche die Unterstützung durch Drittanbieterlösungen erfordern. Das lässt sich ganz einfach über unseren benutzerfreundlichen Konfigurator umsetzen. Sehen wir uns an, wie Sie es machen können.

  1. Erstellen Sie ein Konto bei Elfsight Apps und melden Sie sich im Admin-Bereich an.
  2. Wählen Sie im Konfigurator die Floating-Vorlage aus und passen Sie sie an.
  3. Speichern Sie Ihren schwebenden Chat-Button.
  4. Kopieren Sie den Installationscode, den Sie im Pop-up sehen.
  5. Fügen Sie den Plugin-Code an der gewünschten Stelle Ihrer Website ein.

Das war ganz einfach, oder? Wenn Sie eine visuellere Anleitung wünschen, wie Sie den WhatsApp-Float-Button in den HTML-Code Ihrer Website einfügen, schauen Sie sich unten das Video an:

So fügen Sie eine schwebende WhatsApp-Schaltfläche zu WordPress und anderen Plattformen hinzu.

WordPress ist einer der beliebtesten Website-Builder weltweit, daher ist es wenig überraschend, dass viele Nutzer Anleitungen benötigen, wie man einen schwebenden Chat-Button zu einer Website hinzufügt. Es ist wirklich einfach, einen WordPress WhatsApp-Chat-Button zu Websites hinzuzufügen. Unten haben wir erläutert, wie Sie dies über den WordPress-eigenen Editor tun können. Sie können sehen, wie einfach es ist, WhatsApp zu WordPress hinzufügen.

Sobald Sie Ihren schwebenden Chat-Button im Elfsight-Dashboard erstellt und angepasst haben, fügen Sie den Installationscode in das HTML-Feld des WordPress-Admin-Panels ein. Die Ausführung ist wirklich einfach! Normalerweise fügen Sie den Installationscode in einen HTML-Code-Bereich ein. So geht’s:

  1. Erstellen Sie Ihr WhatsApp-Schweb-Button-Plugin im Admin-Bereich, indem Sie die passende Vorlage auswählen.
  2. Speichern Sie die Ergebnisse und kopieren Sie den Installationscode, der im speziellen Popup-Fenster angezeigt wird.
  3. Melde dich im WordPress-Adminbereich an.
  4. Gehen Sie zum Abschnitt Seiten und wählen Sie die Seite aus, auf der Sie den Button einbetten möchten.
  5. Fügen Sie im entsprechenden Bereich der Website einen benutzerdefinierten HTML-Block hinzu.
  6. Fügen Sie in diesem HTML-Block den Code des Floating-Buttons ein, den Sie im Code-Generator erhalten haben.
  7. Klicken Sie auf „Aktualisieren“, um alle Änderungen zu speichern.

Du kannst im Elfsight-Panel beliebig viele Anpassungen vornehmen – sie erscheinen dann in deinem schwebenden Chat-Button. Änderungen am HTML-Code deiner WordPress-Seite sind nicht erforderlich.

  1. Greifen Sie über Ihr Wix-Konto auf den Wix-Website-Builder zu und wählen Sie die Website aus, auf der Sie unser Plugin sehen möchten. Klicken Sie anschließend auf „Website bearbeiten“.
  2. Fügen Sie einen HTML-Block hinzu, indem Sie auf das Plus-Symbol klicken, zum Abschnitt „Einbetten“ gehen und dort „Ein Widget einbetten“ im Reiter „Eigene Einbettungen“ auswählen.
  3. Fügen Sie den Installationscode ein. Klicken Sie anschließend auf „Code eingeben“, fügen Sie den Installations-Schnipsel ein und fahren Sie mit „Aktualisieren“ fort.
  4. Passen Sie Größe und Position des Plugins an. Ziehen Sie das Plugin an die gewünschte Stelle und justieren Sie die Abmessungen, bis es perfekt aussieht – ganz ohne Scrollleisten.
  5. Optimiere das Plugin für Mobilgeräte und veröffentliche es. Klicke auf das Mobile-Symbol, um im mobilen Editor zu arbeiten, passe bei Bedarf die Größe des Plugins an und klicke anschließend auf „Publish“.

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

Wie wäre es damit, einen WhatsApp-Chat zu Shopify hinzufügen? Das geht ganz einfach. Sehen Sie, wie Sie das in hust a few steps tun:

  1. Melden Sie sich in Ihrem Shopify-Adminbereich an und navigieren Sie zu Sales Channels → Online Store.
  2. Klicken Sie auf die Schaltfläche Anpassen, um den visuellen Editor zu öffnen.
  3. Um die Seite zu wechseln, verwenden Sie oben die Dropdown-Liste.
  4. Abschnitt hinzufügen, dann Benutzerdefiniertes Liquid auswählen.
  5. Fügen Sie den Shopify WhatsApp Chat‑Code in das Custom Liquid-Feld ein, passen Sie bei Bedarf Farben und Abstände an, und speichern Sie.

So können Sie ganz einfach einen benutzerdefinierten WhatsApp-Chat zu Ihren Shopify-Webseiten hinzufügen.

WhatsApp-Floating-Button: Coole Anwendungsfälle

Beim Erstellen und Anpassen Ihres schwebenden WhatsApp-Chat-Buttons für WordPress oder eine andere Website gab es nur ein Problem – Schwierigkeiten bei der Anpassung. Denn manchmal, insbesondere wenn Sie eine Einführung erstellen, wissen Sie möglicherweise nicht, wie Sie das am besten im HTML-Code der Website stylen. Um Ihnen Inspiration zu geben, haben wir Beispiele von Button-Designs zusammengestellt, die Sie inspirieren können.

Beispiel 1: Chat-Button einbetten

WhatsApp floating chat button example

Dies ist ein Beispiel für einen schwebenden Button für WordPress oder jede andere Website in einem klassischen Design, das Nutzern vertraut ist. Um ein benutzerdefiniertes Dialogfenster zu öffnen, muss der Benutzer einfach auf den Button klicken. Das Chatfenster wird von einer individuell angepassten Antwortzeit-Nachricht begleitet, die das Vertrauen Ihres Publikums deutlich erhöht – denn Ihre Besucher sehen, dass Sie sich kümmern und jederzeit bereit sind, Ihre Fragen zu beantworten.

Beispiel 2: Beratungs-Button

WhatsApp floating chat button consultation

Das schwebende WhatsApp-Chat-Icon auf WordPress oder jeder anderen Website ist eine hervorragende Möglichkeit, Nutzern bei Fragen Unterstützung zu bieten. Nutzen Sie die umfangreichen Anpassungsoptionen des Plugins, um Button und Chat-Fenster einfach in die gewünschten Farben zu gestalten, sodass es nahtlos in das Gesamtdesign Ihrer Website und den HTML-Code passt.

Beispiel 3: Onboarding-Button

WhatsApp floating chat button onboarding

Kundenservice und Onboarding gehören zu den wichtigsten Bestandteilen einer kommerziellen Website. Diese Services in ein Chatfenster zu integrieren, das in den HTML-Code Ihrer WordPress- oder einer anderen Website eingebettet ist, ist eine hervorragende Idee. Verwenden Sie den schwebenden Chat-Button auf allen Seiten Ihrer Website, um dauerhaft in Kontakt mit Ihren Kunden zu bleiben und so die Servicequalität zu verbessern.

Beispiel 4: Feedback-Button

WhatsApp floating chat button feedback

Möchten Sie die Qualität Ihrer Produkte und Dienstleistungen durch schnelles, garantiertes Feedback verbessern? Dann unterstützt Sie der als schwebender Chat-Button in den HTML-Code Ihrer Website integrierte Button – jeder, der eine Meinung äußern möchte, kann ihn jederzeit anklicken. Wie bei den vorherigen Beispielen können Sie den Chat auf Ihrer Website ganz einfach mit Ihren Wunschfarben anpassen, damit er sich nahtlos in das Design einfügt.

Vorteile der WhatsApp-Schwebeschaltfläche für Ihr Unternehmen

Warum sollten Sie eine schwebende WhatsApp-Schaltfläche in den HTML-Code Ihrer Website einfügen? Die Antwort ist einfach – dank der einfachen Bedienung. Dies ermöglicht Ihrem Publikum, in nur zwei Klicks mit dem Unternehmen in Dialog zu treten. Kein Ausfüllen von Formularen, keine Telefonnummer oder Nachricht eingeben. Nur zwei Klicks. Der erste Klick erfolgt auf der Website, der zweite in der WhatsApp-App. Was könnte leichter sein?

Für die meisten Menschen ist es bequemer, über Instant-Messenger zu kommunizieren, mit denen sie vertraut sind. Es ist bequemer als E-Mail, Telefon oder Online-Chat. Im Folgenden erläutern wir, warum Sie in Erwägung ziehen sollten, auf Ihrer Website einen WhatsApp-Chat-Button zu integrieren.

Beliebtheitswachstum mit Button

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

Schnelle Kontaktaufnahme per Button

Menschen sehen den Messenger als schnellen Kommunikationskanal. Der Verkäufer wird ebenso zügig auf die Nachricht des Kunden aus jeder Quelle reagieren. Der Nutzer reagiert jedoch schneller über WhatsApp. Warum?

  • WhatsApp genießt ein hohes Maß an Nutzervertrauen. Selbst wenn dem Nutzer die Anwendung nicht gefällt, wird er sie dennoch herunterladen. Es ist ein Kanal zur Kommunikation mit Verwandten und Freunden. Aus diesem Grund – und nicht nur deshalb – reagieren Menschen schnell auf Nachrichten über WhatsApp.
  • WhatsApp ist ebenfalls ein Spam-freier Kanal. In den meisten Fällen erhält der Messenger Nachrichten von Personen, die wir kennen. Er ist frei von aufdringlicher Werbung, nervigen Push-Benachrichtigungen, News-Feeds und massivem Spam.
  • Ein Nutzer wird durch Hinweise auf ungelesene Nachrichten abgelenkt. Selbst wenn er die Nachricht nicht lesen möchte, wird er sie öffnen.
  • Nicht alle Punkte gelten für E-Mails. Wenn die E-Mail nicht wichtig genug ist, öffnet der Empfänger sie möglicherweise nicht sofort. Vielleicht nie. Und Sie werden nicht wissen, ob die Nachricht gelesen wurde.

WhatsApp bietet auch Nachrichten-Statusanzeigen. Sie erfahren immer, ob der Kunde Ihre Nachricht gelesen hat. Noch wichtiger: Der Nutzer weiß, dass Sie diese Statusmeldungen sehen. Das erhöht die Wahrscheinlichkeit einer Antwort. Selbst ein kurzes “Ja” oder “Nein” hilft Ihnen, einen Plan zu erstellen.

Mehr informelles Ambiente mit dem WhatsApp-Button.

Die WhatsApp-Kommunikation wird von Nutzern als informelle Unterhaltung wahrgenommen – ein lockeres Gespräch ohne Förmlichkeiten. Ein solcher Dialog wirkt abschreckend. Die Nutzer scheuen sich nicht davor, Fehler zu machen, eine klärende Frage zu stellen oder zu scherzen. E-Mails werden nach wie vor als etwas Offizielles wahrgenommen und erfordern einen strukturierten, detaillierten Text. „Es braucht Zeit, es zusammenzustellen“, denkt der Nutzer, und antwortet möglicherweise einem Wettbewerber via WhatsApp.

Handlungsaufruf-Button

Die Bedeutung eines klaren Call-to-Action kann nicht hoch genug betont werden. Das WhatsApp-Logo selbst ist kein Handlungsaufruf. Nicht alle Besucher Ihrer Website verstehen, wofür das Chat-Button-Plugin gedacht ist. Ohne eine deutliche Handlungsaufforderung würden die Ergebnisse dennoch niedrig bleiben.

Konversionen sinken ohne CTAs. Der Call-to-Action, der als Tooltip angezeigt wird, wirkt ebenfalls nicht stark genug. Die beste Option ist eine dauerhaft sichtbare Meldung, die direkt im Plugin integriert ist.

Button-Design anpassen

Ein wichtiger Parameter, der dem Chat-Button ermöglicht, sich nahtlos in das Design Ihrer Website einzufügen. Flexible Einstellungen verhindern Design-Konflikte mit anderen Elementen der Seite. Es ist großartig, wenn der Dienst die Möglichkeit bietet, Schriftart, Farbe, Größe und Position anzupassen.

Fazit

Das WhatsApp-Plugin ist kein Zauberwerk, das Ihnen eine Flut an Bestellungen beschert. Wird es jedoch richtig eingesetzt, kann es die Conversion von mobilem Traffic auf Ihrer Website deutlich verbessern.

Artikel von
Content-Manager
Als Content-Manager bei Elfsight erstelle ich Inhalte, die sowohl praktisch als auch inspirierend sind. Ich liebe es, Komplexes einfach und angenehm lesbar zu gestalten.