So erhältst du den Einbettungscode im Button-Stil für das TuCalendi-Widget

In dieser Anleitung erfährst du, wie du den Einbettungscode im Button-Stil für das TuCalendi-Widget erhältst. Im Gegensatz zum Inline-Widget, das direkt auf der Seite angezeigt wird, fügt der Button-Typ deiner Website eine Schaltfläche hinzu, die beim Anklicken das Buchungs-Widget als Popup-Fenster öffnet. Außerdem kann die Schaltfläche als schwebende Schaltfläche konfiguriert werden, die während des gesamten Seitenaufrufs stets sichtbar bleibt.

Bevor du loslegst: Mit TuCalendi kannst du den Button-Text, das Aussehen und die Farben direkt im Code-Generator anpassen – ganz ohne technische Vorkenntnisse.

Schritt 1. Gehe zum Bereich Widgets

Klicke im TuCalendi-Seitenmenü auf "Widgets" und wähle "Einbettungscode" aus oder klicke auf die Schaltfläche "Auswählen" auf der Karte "Einbettungscode".

Widget Einbettungscode

Schritt 2. Wähle den Einbettungstyp "Button" aus

Klicke auf dem Auswahlbildschirm für den Einbettungstyp auf die Schaltfläche "Auswählen" auf der "Button"-Karte.

Widget code Button Einfugen

Schritt 3. Wähle zwischen Kalender und Umfrage

Wähle als Nächstes aus, welche Art von Widget sich beim Klicken auf die Schaltfläche öffnen soll: "Kalender" für das Terminbuchungs-Widget oder "Umfrage" für eine Umfrage mit Weiterleitung. Klicke auf der entsprechenden Karte auf "Auswählen" – in diesem Tutorial ist das die Karte "Kalender".

Widget zum Einfugen button kalendercode

Schritt 4. Wähle den Termin aus

Klicke auf das Feld "Veranstaltung", um das Dropdown-Menü zu öffnen, und wähle die Veranstaltung oder den Kalender aus, für den du den Code generieren möchtest.

Widget zum Einfugen von Button Kalendercode Auswahlen

Das Menü zeigt die in deinem Konto verfügbaren Kalender und Termine an, sortiert nach Kategorie.

Widget zum einfugen von code fur einen online kalender termin order kalender auswahlen

Schritt 5. Passe die Schaltfläche an und kopiere den Code

Sobald du den Termin ausgewählt hast, zeigt TuCalendi zwei Bereiche auf demselben Bildschirm an:

  • Einstellungen: Hier kannst du die Schaltfläche anpassen, bevor du den Code kopierst. Du kannst den Schaltflächentext (Standard: „Buchen“), den Schaltflächentyp (inline oder schwebend), das Aussehen (abgerundet oder andere Optionen), die Schaltflächenfarbe und die Textfarbe ändern. Du kannst auch den Schaltflächen-Designer aktivieren, um weitere Optionen zu nutzen.
  • Einbettungscode: Zeigt den automatisch generierten HTML-Code basierend auf deinen ausgewählten Einstellungen an.

Sobald die Schaltfläche so aussieht, wie du es möchtest, klick auf das "Kopiersymbol", das in der oberen rechten Ecke des Codefelds erscheint, um den Code in die Zwischenablage zu kopieren.

Rekrutierungscode der Schaltfläche kopieren

Prozessübersicht

Um den Einbettungscode vom Typ „Schaltfläche“ für das TuCalendi-Widget zu erhalten, gehe zu  "Widget-Einbettungscodes", wähle den Typ "Schaltfläche" aus und wähle dann "Kalender" oder "Umfrage". Wähle im Feld „Veranstaltung“ die gewünschte Veranstaltung aus. Im Abschnitt  "Einstellungen" kannst du den Text, das Aussehen und die Farben der Schaltfläche anpassen. Wenn du fertig bist, klicke auf das "Kopiersymbol" im Codefeld, um den Code in die Zwischenablage zu kopieren und ihn auf deiner Website einzufügen.