In diesem Tutorial erfährst du, wie du den Einbettungscode im Button-Stil für das TuCalendi-Widget erhältst. Anders als das Inline-Widget, das direkt auf der Seite angezeigt wird, fügt der Typ Button deiner Website einen Button hinzu, der beim Anklicken das Buchungswidget als Pop-up-Fenster öffnet. Außerdem kannst du den Button als schwebenden Button konfigurieren, der jederzeit sichtbar bleibt, während die Nutzer durch die Seite scrollen.
Bevor du loslegst: Mit TuCalendi kannst du den Buttontext, das Aussehen und die Farben direkt im Codegenerator anpassen, ganz ohne technische Kenntnisse.
Schritt 1. Öffne den Bereich Widgets
Klicke im Seitenmenü von TuCalendi auf Widgets und wähle "Einbettungscode" aus oder klicke auf der Karte Einbettungscode auf den Button "Auswählen".
Schritt 2. Wähle den Einbettungstyp "Button"
Klicke im Auswahlbildschirm für den Einbettungstyp auf der Karte Button auf den Button "Auswählen".
Schritt 3. Wähle zwischen Kalender und Umfrage
Lege als Nächstes fest, welcher Widget-Typ sich beim Klick auf den Button öffnen soll: Kalender für das Widget zur Terminbuchung oder Umfrage für eine Umfrage mit Weiterleitung. Klicke auf der entsprechenden Karte auf "Auswählen", in diesem Tutorial auf der Karte "Kalender".
Schritt 4. Wähle das Event aus
Klicke auf das Feld "Event", um das Dropdown-Menü zu öffnen, und wähle das Event oder den Kalender aus, für das bzw. den du den Code erstellen möchtest.
Das Menü zeigt dir die in deinem Konto verfügbaren Kalender und Events, sortiert nach Kategorie.
Schritt 5. Passe den Button an und kopiere den Code
Sobald du das Event ausgewählt hast, zeigt TuCalendi dir auf demselben Bildschirm zwei Bereiche an:
- Einstellungen: Hier kannst du den Button anpassen, bevor du den Code kopierst. Du kannst den Buttontext (Standard: "Buchen"), den Buttontyp (inline oder schwebend), das Aussehen (abgerundet oder andere Optionen), die Buttonfarbe und die Textfarbe ändern. Außerdem kannst du den Button-Designer aktivieren, um weitere Optionen zu nutzen.
- Einbettungscode: Zeigt den automatisch erzeugten HTML-Code auf Basis deiner gewählten Einstellungen an.
Wenn der Button so aussieht, wie du ihn haben möchtest, klicke auf das "Kopieren-Symbol" oben rechts im Codefeld, um den Code in die Zwischenablage zu kopieren.
Übersicht über den Ablauf
Um den Einbettungscode im Button-Stil für das TuCalendi-Widget zu erhalten, öffne "Widget-Einbettungscodes", wähle den Typ "Button" und entscheide dich für "Kalender" oder "Umfrage". Wähle im Feld Event das gewünschte Event aus. Im Bereich "Einstellungen" kannst du Text, Aussehen und Farben des Buttons anpassen. Wenn du fertig bist, klicke im Codefeld auf das "Kopieren-Symbol", um den Code in die Zwischenablage zu kopieren, und füge ihn auf deiner Website ein.