🛠️ Erweiterte Koalendar-Einbettung für Entwickler

Betten Sie Ihre Koalendar-Seite ein, damit Besucher Termine buchen können, ohne Ihre Website verlassen zu müssen.

In dieser Anleitung erfahren Sie, wie Sie unser Einbettungsskript installieren und auf verschiedene Arten die Anzeige von Terminplanungslinks auslösen können.

🎨 Möchten Sie eine Vorschau der einzelnen Stile anzeigen?

Beispiele für unsere Einbettungsoptionen anzeigen →

💡 Benötigen Sie die schnellste Einbettung per Kopieren und Einfügen?

Befolgen Sie unsere einfache Anleitung zum Hinzufügen zur Website hier →

Installieren des Einbettungs-Skripts

Kopieren Sie den folgenden JavaScript-Code und fügen Sie ihn unmittelbar vor dem schließenden </body> Tag:

<script>window.Koalendar=window.Koalendar||function(){(Koalendar.props=Koalendar.props||[]).push(arguments)};</script>
<script async src="https://koalendar.com/assets/widget.js"></script>
<script>Koalendar('init');</script>

Wir unterstützen 4 verschiedene Modi für die Einbettung Ihres Koalendar:

Popup über Hyperlink anzeigen
Eine schwebende Popup-Schaltfläche anzeigen
Öffnen Sie ein Popup-Fenster über JavaScript.
Eine Inline-Buchungsschnittstelle rendern

Lesen Sie weiter, um zu erfahren, wie das geht!

1. Popup über Hyperlink anzeigen

Um eine Buchungsseite zu öffnen, wenn jemand auf einen Hyperlink klickt, fügen Sie ein Daten-Kalender-Widget Attribut zum Link hinzufügen.

<a data-koalendar-widget href="https://koalendar.com/e/demo">Schedule a meeting</a>

Wir zeigen den Link aus dem href in einem Leuchtkasten:

2. Einen schwebenden Popup-Button anzeigen

Um ein schwebendes Widget auf Ihrer Website darzustellen, rufen Sie Koalendar('Widget') und stellen Sie die URL Attribut mit Ihrer Koalendar-URL.

<script>
  Koalendar('widget', {
    "url": "https://koalendar.com/e/demo",
    "text": "Schedule a meeting",
    "shape": "rounded-full",
    "backgroundColor": "#5145CD",
    "textColor": "#FFFFFF",
    "position": "bottom-right",
    "icon": "calendar"
  });
</script>

Dadurch wird eine schwebende Schaltfläche am unteren Rand Ihrer Website eingefügt:

Die Widget-Konfiguration akzeptiert die folgenden Eigenschaften:

Eigentum	Standardwert	Beschreibung
`URL`	—	Die URL Ihrer Koalendar-Seite.Erforderlich.
`Symbol`	`"Kalender"`	Das Symbol, das auf der Schaltfläche angezeigt werden soll (entweder `Kalender` , `Uhr` oder `keine` ).
`Text`	`„Termin vereinbaren“`	Der Text der Schaltfläche. Um den Text wegzulassen, setzen Sie diesen Wert auf eine leere Zeichenfolge (`""` ).
`Hintergrundfarbe`	`„#5145CD“`	Die Hintergrundfarbe für die Schaltfläche.
`textColor`	`„#FFFFFF“`	Die Textfarbe für die Schaltfläche.
`Position`	`"unten rechts"`	Die Position für die schwebende Schaltfläche. (entweder `oben links` , `oben in der Mitte` , `oben rechts` , `unten links` , `unten in der Mitte` oder `unten rechts` ).
`Form`	`vollständig abgerundet`	Die Form der schwebenden Schaltfläche. (entweder `scharf` , `abgerundet` oder `vollständig abgerundet` ).

3. Öffnen Sie ein Popup-Fenster über JavaScript.

Sie können die offen Aufruf zum Öffnen des Koalendar-Widgets jederzeit:

<script>
  Koalendar('open', { url: 'https://koalendar.com/e/demo' });
</script>

4. Eine Inline-Buchungsschnittstelle rendern

Mit dieser Option können Sie die Koalendar-Planungsschnittstelle direkt in Ihren anderen Website-Inhalten einbinden:

Um Ihren Link inline darzustellen, erstellen Sie einen inline Anruf nach Anruf init :

<div id="booking-page">
  <!-- this is where we will inject the booking page embed -->
</div>

<script>
  Koalendar('inline', {
     "url": "https://koalendar.com/e/demo",
     "selector": "#booking-page"
  });
</script>

Das inline Der Befehl akzeptiert die folgenden Optionen:

Eigentum	Standardwert	Beschreibung
`URL`	—	Die URL Ihrer Koalendar-Seite.Erforderlich.
`Selektor`	—	Der DOM-Selektor für den Knoten, an dem wir die Schnittstelle rendern sollten (z. B. `#Buchungsseite` ). Erforderlich.