Wie kann ich einen WhatsApp-Link in HTML einfügen?

1. Grundidee hinter einem WhatsApp-Link
2. Aufbau eines WhatsApp-Links
3. HTML-Code zum Einfügen des WhatsApp-Links
4. Zusätzliche Gestaltungsmöglichkeiten

Grundidee hinter einem WhatsApp-Link

Ein WhatsApp-Link ermöglicht es Besuchern einer Webseite, direkt eine WhatsApp-Nachricht an eine bestimmte Telefonnummer zu senden, ohne diese manuell eingeben zu müssen. Solche Links sind besonders praktisch für Unternehmen, die ihren Kunden einen einfachen Weg bieten möchten, Kontakt aufzunehmen.

Aufbau eines WhatsApp-Links

Der Standard-Link für WhatsApp ist folgendermaßen aufgebaut:

https://wa.me/ gefolgt von der internationalen Telefonnummer ohne Pluszeichen, Klammern oder Bindestriche.

Beispiel: Für die deutsche Nummer +49 123 4567890 wird der Link

https://wa.me/491234567890

genutzt. Optional kann man eine vorgefertigte Nachricht hinzufügen, indem man ?text= und den URL-kodierten Text anfügt.

Beispiel:

https://wa.me/491234567890?text=Hallo%20ich%20habe%20eine%20Frage

HTML-Code zum Einfügen des WhatsApp-Links

Um den Link in eine HTML-Seite einzufügen, nutzt man ein normales <a>-Element (Anker-Tag). Innerhalb des href-Attributs steht der fertige WhatsApp-Link. Optional kann man das Attribut target="_blank" verwenden, damit der Link in einem neuen Tab geöffnet wird.

Hier ein Beispielcode:

Das rel="noopener" Attribut erhöht aus Sicherheitsgründen die Sicherheit beim Öffnen in einem neuen Tab.

Zusätzliche Gestaltungsmöglichkeiten

Um den Link ansprechender zu gestalten, kann man ein WhatsApp-Symbol als Bild oder ein Icon einfügen. Mit CSS lässt sich der Link optisch anpassen, z.B. durch Farbgebung oder Hover-Effekte.

Beispiel mit einem einfachen Icon (hier als Emoji):

Oder mit einem Bild:

<img src="whatsapp-icon.png" alt="WhatsApp Logo" style="width:24px; vertical-align:middle;">