WhatsApp auf deiner Website einbinden, so funktioniert's

WhatsApp auf deiner Website einbinden, so funktioniert's blog

By Etienne Kiefer

Chief Creative Officer, charles

Posted: März 31, 2023

Updated: Mai 02, 2024

Du hast WhatsApp Business und willst das jetzt auch auf deiner Website zeigen? Keine Sorge, wir zeigen dir, wie du WhatsApp auf deiner Website einbinden kannst und mehr Chats über deine Website generieren kannst.

 

Als weltweit größte Messaging-App stellt WhatsApp den Facebook-Messenger, Telegram, Instagram und viele andere in den Schatten. Während die Konkurrenz weit ins Hintertreffen gerät, ist WhatsApp auf dem globalen Markt so ziemlich der einzige angesagte und akzeptierte Messenger.

 

Immer mehr Unternehmen machen sich diese Popularität zunutze, um einen direkten Draht zu ihren Kunden zu erschließen. Dieser direkte Kommunikationskanal kann auf ganz viele Wege entstehen und einer der offensichtlichsten ist WhatsApp Business auf der Homepage oder Produktseiten einzubinden um Website Besucher direkt mit einem click-to-chat button oder QR code in den WhatsApp chat zu bringen.

 

4 Methoden wie du WhatsApp in deine Website einbinden kannst

Selbstverständlich gibt es einige Möglichkeiten WhatsApp auf deiner Website einzubinden, deshalb haben wir die einfachsten Methoden für dich zusammengestellt.

 

Inline chat links

Links stellen den wohl einfachsten Weg dar, wie du WhatsApp in deine Website einbauen kannst. Click-to-Chat bietet Nutzer*innen die Möglichkeit, durch einen simplen Klick auf eine URL einen Chat in WhatsApp zu starten. Bei der Verwendung eines Smartphones wird die WhatsApp-App geöffnet. Auf dem Desktop wiederum werden Nutzer*innen zu WhatsApp Web weitergeleitet.

 

Folge diesen Schritten um einen WhatsApp-Link in deine Website zu integrieren:

 

  1. Gehe zu unserem WhatsApp Link und QR Code Generator.
  2. Gebe deine WhatsApp Business Nummer ein.
  3. Füge eine Nachrichtenvorlage für den Nutzer hinzu. 
  4.  Klicke auf "Link erstellen".
  5. Kopiere den wa.me link und füge ihn in deine Website ein. 

 

Du kannst diesen Link auch in Bilder, CTAs oder andere Elemente einbauen um diesen sichtbarer als nur blauen unterstrichenen Text zu machen.

 

WhatsApp QR Codes

Ein Vorteil gegenüber des einfachen Chat-in Link ist, dass er von Natur aus sichtbarer als ein einfacher Link ist und zum anderen Nutzer*innen an sich schon vertrauter mit der Idee sind, einen QR-Code zu scannen, um einen Effekt auf ihrem Telefon zu erzielen. Allerdings hat der QR Code auch einen großen offensichtlichen Nachteil, was macht man, wenn man den QR auf dem Handy hat? In diesem Fall kannst du einfach einen Link in das QR-Code Bild einfügen. 😉

 

Generieren kannst du deinen WhatsApp-QR-Code wieder ganz einfach mit unserem WhatsApp-Link und QR-Generator.

Folge diesen Schritten um einen WhatsApp-QR-Code in deine Website zu integrieren:

  1. Gehe zu unserem WhatsApp Link und QR Code Generator.
  2. Gebe deine WhatsApp Business Nummer ein.
  3. Füge eine Nachrichtenvorlage für den Nutzer hinzu. 
  4.  Klicke auf "Link erstellen".
  5. Klicke auf QR code als PNG oder SVG herunterladen und füge ihn in deine Website ein.


Wenn du dir mehr Personalisierung wünschst, unterstützen einige QR-Code Anbieter auch das Hinzufügen von Logos, Einstellen von Formen und Farben.

 

WhatsApp Chat Bubbles mit charles

Die WhatsApp Click-to-Chat-Funktion von charles macht die Einbindung eines WhatsApp-Buttons zu einem Kinderspiel. Wie du es bestimmt schon von anderen Seiten kennst, folgt dieses Symbol den Nutzer*innen, wenn sie sich auf der Seite nach unten bewegen und fungiert so als eine Art „scrollender CTA”, während sie deine Website durchstöbern.

 

Die charles Bubble kannst du in nur fünf einfachen Schritten auf deine Website einbinden. Lese weiter, um einen kurzen Überblick darüber zu erhalten, wie es geht!


1. Schritt: Schreibe einen Teaser

Nachdem du im Charles-Backend Landing Page Bubble gewählt hast, wirst du dazu aufgefordert, im ersten Tab einen optionalen Teaser zu erstellen. Dieser wird für eine von dir gewählte Anzahl von Sekunden in einer Sprechblase angezeigt und dient dazu, die Aufmerksamkeit der Nutzer*innen auf die Sprechblase zu lenken. Möchtest du von dieser Option keinen Gebrauch machen, dann kannst du sie einfach mithilfe des Buttons unter den Tabs deaktivieren.

 

Die Vorschau-Schaltfläche bietet dir eine ausgezeichnete Möglichkeit, um zu überprüfen, wie dein Teaser für die Nutzer*innen aussehen wird. Diese Funktion erweist sich besonders dann als nützlich, wenn du dir noch nicht sicher bist, wie lange der Teaser angezeigt werden soll. Je länger die Nachricht, desto mehr Zeit solltest du den Nutzer*innen zum Lesen geben.


2. Schritt: Personalisiere das äußere Erscheinungsbild der Schaltfläche

Mach aus der Chat-Bubble von charles was du möchtest, indem du die Farbe und Größe änderst, Logos hinzufügst oder die Position der Seite verschiebst.


3. Schritt: Bubble Text

Bei dem Bubble Text handelt es sich um den Text, den die Nutzer*innen sehen, nachdem sie auf die Schaltfläche bzw. den Button geklickt haben. Stelle hier sicher, dass deine Nachricht freundlich und ansprechend ist und den Nutzer einlädt, auf den Click to Chat Button zu klicken.


4. Schritt: Weitere Personalisierung des Buttons

Möchtest du den Button nur auf dem Handy haben? Dann kannst du dies hier entsprechend einstellen. Soll er überall auf deiner Website auftauchen oder nur auf ganz speziellen Seiten? Das alles kannst du hier festlegen.

 

5. Schritt: Einstellungsprioritäten

Diese Option spielt dann eine Rolle, wenn du mehrere Buttons konfiguriert hast. Je nachdem, welche Parameter du im 4. Schritt festgelegt hast, ist es wahrscheinlich, dass sich einige Seiten für mehr als einen Button eignen. In diesem Fall kannst du relative Prioritäten bestimmen, um zu gewährleisten, dass der wichtigste Button derjenige ist, der angezeigt wird.

 

Software und Plugins von Drittanbietern

Die letzte hier aufgeführte Methode, WhatsApp in deine Website einzubinden, ist die via eines WhatsApp Business Solution Providers.

 

charles erlaubt es dir alle deine Chat-ins, seien es Links, QR Codes, Bubbles, Pop- ups,... ganz einfach an einem Ort zu erstellen, zu verwalten und zu vergleichen. Außerdem bietet dir charles die Möglichkeit alle deine Chats und Konversationen an einem Ort zu verwalten und von verschiedenen Computern gleichzeitig Nachrichten zu beantworten. 

 

Hier findest du alle unsere Features.

 

 

 


Get updates straight
to your phone.

TRY IT OUT