Click-to-Call auf der Website: Anruf- und WhatsApp-Button einbauen

Ein Click-to-Call-Button macht deine Telefonnummer zu einem Link. Tippt ein Kunde auf dem Handy darauf, öffnet sich die Telefon-App mit deiner Nummer, und er muss nur noch auf „Anrufen“ tippen.

Technisch reicht dafür ein Link mit tel: und der Nummer im internationalen Format, für WhatsApp ein Link auf wa.me. Hier findest du den passenden Code, die besten Stellen für die Buttons, eine Test-Checkliste und die Datenschutzpunkte. Und du liest, wie aus Anrufen und Chats echte Termine werden, ohne dass dein Handy zur Terminzentrale wird.

Was beim Tippen auf einen Anruf-Button passiert

Ein Click-to-Call-Link ist ein ganz normaler Link. Statt auf eine Webseite zeigt er über das Schema tel: auf eine Telefonnummer. Der Browser gibt diese Nummer an die Telefon-App weiter, auf dem iPhone genauso wie auf Android. Laut Google (web.dev) fragen die meisten Geräte mit Telefonfunktion vor dem Wählen noch einmal nach. So ruft niemand aus Versehen an.

Für dich heißt das: Niemand muss deine Nummer abschreiben, sich merken oder zwischen Browser und Telefon-App hin- und herwechseln. Gerade bei der Fahrzeugaufbereitung zählt das. Viele Kunden suchen unterwegs, auf dem Parkplatz oder in der Mittagspause nach einem Aufbereiter. Wer deine Seite auf dem Handy öffnet und den Anruf mit einem Fingertipp starten kann, ruft eher dich an als den nächsten Treffer.

Am Rechner verhält sich der Link anders. Der Browser übergibt die Nummer an ein Programm, das Anrufe übernehmen kann, etwa FaceTime auf dem Mac mit verbundenem iPhone. Gibt es so ein Programm nicht, passiert beim Klick nichts, oder es erscheint ein Hinweis. Deshalb sollte die Nummer immer auch als lesbarer Text im Link stehen, damit man sie am Rechner abtippen kann.

Manche Handys erkennen Telefonnummern im Text auch von selbst und machen sie antippbar. Darauf solltest du dich nicht verlassen: Das klappt nicht auf jedem Gerät und nicht mit jeder Schreibweise. Nur ein sauber gesetzter tel:-Link funktioniert überall gleich.

Telefonnummer klickbar machen: der Code

Der Grundbaustein ist eine Zeile HTML:

<a href="tel:+49301234567">030 123 45 67</a>

Im href steht die Nummer so, wie ein Telefon sie wählen kann. Zwischen den Tags steht sie so, wie Menschen sie lesen. Google empfiehlt, Nummern immer im internationalen Format anzugeben: Pluszeichen, Ländercode, Vorwahl ohne 0 und Rufnummer. So klappt der Anruf auch, wenn dein Kunde mit einer ausländischen SIM-Karte unterwegs ist.

Aus deiner Handynummer 0170 1234567 wird im Link also +491701234567, aus der Festnetznummer 089 9876543 wird +49899876543.

Ohne Code: im Baukasten oder in WordPress

Du musst kein HTML schreiben. In fast jedem Website-Editor markierst du die Telefonnummer, klickst auf „Link einfügen“ und trägst als Adresse tel:+49… statt einer Webadresse ein. In WordPress geht das genauso, im Block-Editor oder als Menüpunkt mit eigenem Link. Viele Baukästen haben außerdem einen eigenen Button-Typ „Telefon“, in den du nur noch die Nummer einträgst.

Button statt Textlink

Ein unterstrichener Textlink geht auf dem Handy leicht unter. Besser ist ein Button mit klarer Aufschrift wie „Jetzt anrufen“ und einem Telefonsymbol. Mach ihn groß genug für den Daumen: Apple empfiehlt mindestens 44 × 44 Punkt, Google 48 × 48 dp. Lass genug Abstand zum nächsten Button, damit niemand versehentlich die Route statt des Anrufs öffnet. Schrift und Hintergrund brauchen einen deutlichen Kontrast, damit der Button auch bei Sonne auf dem Display lesbar ist.

WhatsApp-Button auf der Website einbinden

WhatsApp hat dafür eine eigene Funktion namens „Click to Chat“. Laut WhatsApp-Hilfe lautet der Link https://wa.me/ plus die vollständige Nummer im internationalen Format, ohne Nullen, Klammern oder Bindestriche. Der Chat öffnet sich auch, wenn der Kunde deine Nummer nicht gespeichert hat, auf dem Handy und in WhatsApp Web.

<a href="https://wa.me/491701234567" target="_blank" rel="noopener">Per WhatsApp anfragen</a>

Wichtig ist der Unterschied zum Anruf-Link: Bei wa.me steht kein Pluszeichen vor der 49.

Mit vorformulierter Nachricht

Über ?text= steht beim Öffnen schon ein Text im Eingabefeld. Leer- und Sonderzeichen müssen dafür URL-kodiert sein, aus einem Leerzeichen wird %20, aus einem ü %C3%BC. Ein Beispiel:

https://wa.me/491701234567?text=Hallo%2C%20ich%20interessiere%20mich%20f%C3%BCr%20eine%20Aufbereitung.%20Fahrzeug%3A%20

Der Kunde sieht dann „Hallo, ich interessiere mich für eine Aufbereitung. Fahrzeug: “ und muss nur noch ergänzen. Das spart ihm Zeit und dir Rückfragen. Was idealerweise in so einer Anfrage steht, liest du weiter unten.

Schwebender Button oder fester Link

Viele Seiten zeigen WhatsApp als runden grünen Button, der unten rechts über dem Inhalt schwebt. Das geht mit wenigen Zeilen CSS (position: fixed). Für Aufbereiter ist ein normaler Button neben dem Anruf-Button oft die bessere Wahl: Kunden sehen beide Wege nebeneinander und entscheiden selbst, ob sie lieber sprechen oder schreiben.

Fürs Logo nimmst du die offizielle Grafik aus den WhatsApp-Markenressourcen, veränderst sie nicht und legst sie auf deinem eigenen Server ab. Ein Icon, das von einem fremden Server geladen wird, überträgt bei jedem Seitenaufruf die IP-Adresse deiner Besucher an diesen Server.

Wo Anruf- und WhatsApp-Buttons hingehören

Ein Kontaktblock ganz unten reicht nicht. Interessenten entscheiden an verschiedenen Stellen, und an jeder sollte der nächste Schritt sichtbar sein:

• Im Kopfbereich: ein Telefonsymbol oder „Anrufen“ oben rechts, auf jeder Unterseite.
• Als feste Leiste am unteren Rand: Auf dem Handy liegt dieser Bereich direkt unter dem Daumen. Hier passen Anrufen, WhatsApp und Termin buchen nebeneinander.
• Nach der Leistungs- und Preisliste: Wer gerade „Innenraumaufbereitung“ gelesen hat, hat oft eine konkrete Frage zu seinem Auto.
• Nach der Vorher-Nachher-Galerie: Die Bilder überzeugen, hier fällt die Entscheidung oft.
• Nach den Bewertungen: Das Vertrauen ist da, jetzt fehlt nur der Kontakt.
• Auf der Kontaktseite: groß, gut lesbar, mit Öffnungszeiten.

Der häufigste Fehler: Die Nummer steht nur klein und ohne Link im Footer. Dann muss der Kunde scrollen, die Nummer abschreiben und selbst wählen, und viele tun das nicht.

Auch außerhalb der Website zählt der Anruf mit einem Tipp. Dein Google-Unternehmensprofil zeigt in der Suche und in Maps einen eigenen Anruf-Button. Wie du das Profil vollständig einrichtest, steht in der Anleitung zum Google-Unternehmensprofil. Für Flyer, Visitenkarten oder die Beschriftung deines Servicefahrzeugs eignet sich ein QR-Code. Er kann direkt auf tel:, auf deinen WhatsApp-Link oder auf deine Buchungsseite führen.

Vor dem Livegang testen

Ein Anruf-Button, der ins Leere führt, kostet Aufträge, und du merkst es nicht einmal. Teste deshalb jeden Button einmal durch:

1. 1Auf dem iPhone tippen: Öffnet sich die Telefon-App mit der richtigen Nummer?
2. 2Auf einem Android-Handy tippen: gleicher Test, gern in Chrome und einem zweiten Browser.
3. 3Nummer Ziffer für Ziffer vergleichen: Ein Zahlendreher im href fällt nur auf, wenn man genau hinsieht.
4. 4WhatsApp-Link öffnen: Startet der Chat mit deinem Geschäftskonto, und steht der vorformulierte Text mit Umlauten richtig im Feld?
5. 5Am Rechner klicken: Bleibt die Nummer als Text lesbar, und öffnet sich WhatsApp Web?
6. 6Feste Leiste prüfen: Verdeckt sie Inhalte, etwa Preise oder das Cookie-Banner?
7. 7Anrufen lassen: Bitte jemanden, über die Website anzurufen, während du im Betrieb bist. So siehst du, ob die Rufumleitung aufs Handy klappt, wenn du gerade am Fahrzeug arbeitest.

Datenschutz beim WhatsApp-Kontakt

Ein reiner tel:- oder wa.me-Link lädt beim Seitenaufruf nichts von fremden Servern und setzt keine Cookies. Er ist ein Verweis wie jeder andere. Anders ist es bei fertigen Chat-Widgets von Drittanbietern: Sie laden Skripte von deren Servern, und diese Anbieter gehören in deine Datenschutzerklärung. Je nach Widget brauchst du außerdem eine Einwilligung im Cookie-Banner.

Schreibt dir ein Besucher über deinen WhatsApp-Link, läuft die Unterhaltung über WhatsApp, also über Meta. Weise in deiner Datenschutzerklärung darauf hin, dass Anfragen über WhatsApp an Meta übermittelt werden. Wenn du WhatsApp geschäftlich für Kundenanfragen nutzt, lass Datenschutzerklärung und Einstellungen einmal von einem Datenschutzbeauftragten oder einer Anwältin für IT-Recht prüfen, etwa die Frage, ob dein Adressbuch mit WhatsApp abgeglichen wird. Und eine Grundregel gilt immer: Schreib Kunden über WhatsApp nur an, wenn sie den Kontakt selbst begonnen oder ausdrücklich zugestimmt haben.

Welche Angaben eine WhatsApp-Anfrage braucht

Die typische erste Nachricht lautet „Was kostet eine Aufbereitung?“. Darauf folgen fünf Rückfragen, bevor du überhaupt einen Preis nennen kannst. Mit diesen Angaben kannst du gleich einen Termin und eine realistische Preisspanne vorschlagen:

• Fahrzeug: Marke, Modell und Größe, also Kleinwagen, Limousine, SUV oder Transporter.
• Gewünschte Leistung: Innenraum, Außenwäsche, Politur, Keramikversiegelung oder Komplettaufbereitung.
• Zustand mit Fotos: Tierhaare, Flecken auf den Sitzen, Kratzer, Wasserflecken. Zwei, drei Bilder sagen mehr als jede Beschreibung, und genau dafür ist WhatsApp praktisch.
• Terminwunsch: zwei oder drei mögliche Tage, und ob das Auto über Nacht bleiben kann.
• Ort: Bei mobilem Service die Adresse oder mindestens die Postleitzahl, damit du Anfahrt und Anfahrtskosten einschätzen kannst.
• Name und Rückrufnummer, falls du lieber kurz telefonierst.

Diese Liste kannst du direkt in den vorformulierten Text deines WhatsApp-Links schreiben, etwa „Fahrzeug: … / Leistung: … / Wunschtermin: … / PLZ: …“. Viele Kunden füllen die Lücken einfach aus. Für wiederkehrende Fragen lohnen sich Textbausteine mit deinen Leistungen, Öffnungszeiten und dem Link zu deiner Preisliste.

Vom Chat zum Termin: WhatsApp-Buchungen organisieren

WhatsApp ist ein starker Einstieg ins Gespräch, als Terminkalender stößt es schnell an Grenzen. Bei zehn Anfragen pro Woche geht das noch. Bei vierzig stehen Termine verstreut in Chats, ein Kunde sagt per Sprachnachricht ab, ein anderer fragt um 22 Uhr nach einem freien Samstag, und du suchst zwischen zwei Fahrzeugen nach der Nachricht von letzter Woche. Diese Abläufe sorgen für Ordnung:

1. 1Ein Ort für alle Termine: Trag jeden zugesagten Termin sofort in einen Kalender ein, nicht erst abends.
2. 2Feste Antworten für feste Fragen: Preise, Dauer der Leistungen und Vorbereitung des Autos als Textbaustein.
3. 3Buchungslink statt Hin und Her: Ist die Frage geklärt, schickst du den Link zu deinem Buchungskalender. Der Kunde wählt selbst einen freien Termin.
4. 4Bestätigung und Erinnerung automatisch: Eine E-Mail mit allen Details schützt vor Missverständnissen und vergessenen Terminen.
5. 5Absagen geregelt: klare Stornoregeln, die der Kunde vor der Buchung sieht.

Wie sich beide Wege im Alltag unterscheiden, steht im Vergleich WhatsApp-Buchungen vs. Online-Buchungssystem. Was du darüber hinaus automatisieren kannst, liest du im Beitrag zur Automatisierung im Detailing-Business.

Unsere Sicht: Kontakt ist der Anfang, die Buchung das Ziel

Wenn wir uns Websites von Aufbereitern ansehen, fällt immer wieder dasselbe Muster auf: Es gibt eine Telefonnummer, vielleicht einen WhatsApp-Button, und trotzdem kommen weniger Termine herein als möglich. Am Angebot liegt das selten, meistens am Weg dorthin.

Ein Anruf-Button ist Pflicht, ein WhatsApp-Button ebenso. Aber beide setzen voraus, dass du gerade erreichbar bist. Wer mit Poliermaschine und Gehörschutz am Fahrzeug steht, nimmt nicht ab. Und wer abends um zehn schreibt, will eigentlich nur wissen, ob am Samstag noch etwas frei ist.

Deshalb gehören für uns drei Wege nebeneinander auf jede Aufbereiter-Seite: anrufen, schreiben und ein Kalender, in dem Kunden sofort einen Termin buchen, ohne Registrierung und ohne auf eine Antwort zu warten. Wer Fragen hat, ruft an oder schreibt. Wer schon weiß, was er will, bucht direkt. Du bekommst weniger Rückfragen und mehr feste Termine, auch während du arbeitest.

Anrufen, WhatsApp und Online-Buchung auf einer Seite

Mit DetailBook bekommst du als Aufbereiter deine eigene Buchungsseite, ohne eine Zeile Code. Anrufen, WhatsApp, Route und Instagram sind als Buttons oben auf der Seite eingebaut, sobald du die Angaben hinterlegt hast. Die Links stehen automatisch im richtigen Format: Du trägst deine Nummer ganz normal ein, etwa als 0170 1234567, und der Anruf-Button wählt +491701234567. Darunter zeigst du Leistungen mit Preisen und deine Fotos, und Kunden buchen ihren Termin direkt im Kalender, ohne sich zu registrieren.

Kontakt-Buttons oben

Kontakt & Anfahrt

Außerdem dabei:

• Buchungskalender mit Kalender-Synchronisation, damit keine Doppelbuchungen entstehen
• Automatische E-Mails mit Bestätigung und Erinnerung, Stornierung durch den Kunden bis zu deiner Frist
• Anfahrtszonen mit Preis für mobile Aufbereiter
• QR-Code für Visitenkarten, Flyer und die Beschriftung deines Fahrzeugs
• Im Pro-Tarif: Online-Zahlung und Anzahlung über Stripe und automatische Bewertungsanfragen

Der Starter-Tarif kostet 19 € im Monat, der Pro-Tarif 39 € im Monat (oder 190 € bzw. 390 € im Jahr). Alle Details stehen auf der Preisseite und in der Übersicht aller Funktionen.

Häufige Fragen

Quellen

• web.dev (Google): Click-to-Call
• WhatsApp-Hilfe: Click to Chat verwenden
• Apple Human Interface Guidelines: Accessibility
• Google: Größe von Touch-Zielen
• sendseven: WhatsApp-Button auf der Website einbinden

Weiterlesen