Integrations-Leitfaden

Einen Rufen-Sie-uns-an-Button auf jede Website setzen.

Ein einziges <script>-Tag platziert einen schwebenden Anruf-Button auf Ihrer Seite. Besucher klicken ihn an, landen in einem privaten CodeB-Meeting-Raum, und die SIP-Bridge ruft das Telefon Ihres Teams an. Keine Installation auf beiden Seiten. Der Besucher sieht Ihre echte Rufnummer nie.

Was es kostet

Nichts pro Besucher. Das Widget ist ein statisches Skript, das Sie selbst hosten (kein Drittanbieter-CDN, keine Analytik). Jeder zustande gekommene Anruf verbraucht eine Minute auf dem SIP-Trunk, an dem Ihre CodeB-SIP-Bridge hängt — genau wie ein normaler ausgehender Anruf.

Das Minimum-Snippet

Fügen Sie das folgende Snippet irgendwo innerhalb von <body> ein — in der Regel direkt vor </body>, damit das Skript das Rendern Ihrer Seite nicht blockiert:

<!-- CodeB Phone Anruf-Button --> <script src="https://phone.codeb.io/embed.js" data-dial="n_xxxxxxxxxxxxxxxx" defer></script>

Ersetzen Sie n_xxxxxxxxxxxxxxxx durch den Alias der Rufnummer, die bei einem Klick angerufen werden soll. Aliase werden in der web.config Ihrer CodeB-Installation unter WebPhone:NumberAliases definiert — fragen Sie Ihren CodeB-Administrator, falls Sie Ihren Alias nicht kennen.

Warum ein Alias und nicht die echte Nummer?

Der Alias ist ein nicht erratbares 16-stelliges Hex-Token (z. B. n_dbbe66524a5cd792). Bots, die Ihre Seite scrapen, sehen nur den Alias, nicht die tatsächliche Rufnummer. Um zu ändern, welches Telefon angerufen wird, passen Sie die web.config auf dem CodeB-Server an — das eingebundene Snippet auf Ihrer kundenseitigen Seite muss nicht angefasst werden.

Anpassungs-Optionen

Alle Attribute sind optional, außer data-dial:

AttributStandardWirkung
data-dial — Pflichtfeld Ziel-Alias (oder rohe E.164 / Nebenstelle, wenn Sie dieses Risiko in Kauf nehmen). Wird über Ihre WebPhone:NumberAliases-Tabelle aufgelöst.
data-label Call us Text auf dem schwebenden Button.
data-position bottom-right Ecke, in der der Button platziert wird. Einer von bottom-right, bottom-left, top-right, top-left.
data-color #f5a524 Hintergrundfarbe des Buttons. Beliebige gültige CSS-Farbe.
data-host Skript-Origin Host, der room.html ausliefert. Nur überschreiben, wenn Sie das CodeB-Frontend auf einer anderen Domäne selbst hosten als dort, wo dieses Skript liegt.

Beispiele

Markenfarbener „Talk to sales"-Button, unten links:

<script src="https://phone.codeb.io/embed.js" data-dial="n_dbbe66524a5cd792" data-label="Talk to sales" data-position="bottom-left" data-color="#1f6feb" defer></script>

„Support-Hotline" mit der Support-Nebenstelle:

<script src="https://phone.codeb.io/embed.js" data-dial="n_069f8ae77accb13d" data-label="📞 Support-Hotline" defer></script>

Selbst gehostetes CodeB auf eigener Domäne:

<script src="https://meet.yourcompany.com/embed.js" data-dial="n_xxxxxxxxxxxxxxxx" data-host="https://meet.yourcompany.com" defer></script>

Wie es funktioniert

1

Besucher klickt den Button

Das Widget erzeugt einen frischen, nicht erratbaren Raumnamen (etwas in der Form callus-7k3p2m) und öffnet ihn in einem neuen Tab. Zwei Besucher, die gleichzeitig klicken, landen nie zusammen im selben Raum.

2

Der Browser tritt dem CodeB-Meeting-Raum bei

Kamera und Mikrofon werden angefragt. Der Besucher sieht die normale CodeB-Meeting-Oberfläche mit der eigenen Kachel und einer „Warten auf die Gegenseite"-Meldung, bis das Telefon abnimmt.

3

Die SIP-Bridge löst den Alias auf und wählt

Ihr CodeB-Signaling-Server prüft die Wähl-Anfrage gegen Whitelist und Fraud-Caps, sucht den Alias in WebPhone:NumberAliases nach und reicht ihn an die SIP-Bridge weiter. Die Bridge wählt über den konfigurierten Trunk.

4

Das Telefon klingelt, Ihr Team nimmt ab

Das antwortende Telefon tritt dem Meeting-Raum als reiner Audio-Teilnehmer bei. Besucher und Team sprechen miteinander — die Sprache ist Ende-zu-Ende verschlüsselt zwischen Besucher-Browser und CodeB-SIP-Bridge.

Sicherheit & Missbrauchs-Schutz

Der Button ist öffentlich — jeder kann ihn anklicken. Die CodeB-SIP-Bridge setzt mehrere Sperren gegen Missbrauch durch:

Wenn Sie Klicks vor Erreichen der CodeB-Bridge zusätzlich begrenzen wollen (etwa hinter einem CAPTCHA auf Ihrer Seite), können Sie den Klick selbst abfangen und das Widget manuell initialisieren. Sprechen Sie uns an, wenn Sie diese Variante benötigen.

Zuletzt aktualisiert für embed.js, ausgeliefert mit CodeB Phone 2026-05-25-3.