Online Reservierungen

TuCalendi Widget als Schaltfläche einbetten

Markdown-Version | Lesezeit: etwa 4 Min.; Zuletzt aktualisiert: 2026-09-23 20:25:10

Wir haben einen einfachen und intuitiven Weg entwickelt, mit dem du die Einbettungscodes für das TuCalendi Widget erhältst, egal ob für das Kalender-Widget oder das Widget der intelligenten Umfrage mit Routing.

Schauen wir uns an, wie du das TuCalendi Widget als Button mit nur wenigen Mausklicks und durch einfaches Kopieren und Einfügen eines HTML-Codes in eine Website einbettest.

Melde dich bei TuCalendi an mit deinem Benutzernamen und Passwort und gehe im vertikalen Menü zur Option "Einbettungscodes":

Einbettungscodes

Wähle aus, wie du das TuCalendi Widget in eine Website einbetten möchtest:

In diesem Tutorial entscheiden wir uns dafür, das TuCalendi Widget als Button einzubetten.

Wenn du den TuCalendi Button, egal ob inline oder schwebend, auf deiner Website einfügst, öffnet sich das Widget als Popup.

Klicke bei der Option "Button" auf "Auswählen".

Widget-Typ Button

Es gibt zwei Arten von Widgets, die du auf deiner Website einfügen kannst:

  • Kalender-Widget.
  • Widget der intelligenten Umfrage mit Routing.

Wähle das Widget aus, das du einbetten möchtest.

Kalender-Widget

Um den Einbettungscode für einen Kalender mit all seinen Terminarten oder nur für eine einzelne Terminart zu erhalten, klicke im Bereich "Kalender" auf den Button "Auswählen":

Einbettungscode für Kalender-Button

Klicke auf das Dropdown-Menü. Dort werden dir die verschiedenen Kalender (Marken) angezeigt, die du erstellt hast, sowie alle Terminarten (Meeting-Typen) in jedem Kalender. So kannst du auswählen, was sich öffnen soll, wenn jemand auf den Button klickt:

Liste der Kalender und Terminarten

Wenn du einen Kalender auswählst, zeigt das Widget mit dem Einbettungscode alle Terminarten dieses Kalenders an. Wählst du dagegen eine bestimmte Terminart aus, zeigt der Einbettungscode im Widget nur diese eine Terminart an.

Für dieses Praxisbeispiel wählen wir eine bestimmte Terminart aus, nämlich "First event (30 Min)", und erhalten so den Einbettungscode für diese Terminart.

Einbettungscode für den Button

Für den Button gibt es mehrere Einstellungen:

  • Button-Text. Das ist die Nachricht, die auf dem Button angezeigt wird.
  • Button-Typ. Du kannst zwischen einem Inline-Button und einem schwebenden Button wählen.
  • Standardoptionen für Aussehen und Farben des Buttons.
  • Button-Designer verwenden.

Wenn du deinen eigenen Button gestalten möchtest, aktiviere die Option "Button-Designer verwenden".

Button-Designer aktiviert

Klicke dann auf die Option "Button-Designer", damit du deinen eigenen Button erstellen und gestalten kannst.

Wenn dein Button so aussieht, wie du möchtest, klicke einfach auf das Symbol oben rechts im Code, um den HTML-Code zu kopieren. Anschließend kannst du ihn in deine Website einfügen, damit deine Kunden direkt bei dir buchen können.

Widget der intelligenten Umfrage mit Routing

Um den Einbettungscode für die intelligente Umfrage mit Routing zu erhalten, klicke im Bereich "Formular/Umfrage" auf den Button "Auswählen":

Einbettungscode für Umfrage

Klicke auf das Dropdown-Menü. Dort werden dir die verschiedenen Umfragen angezeigt, die du erstellt hast, sodass du die Umfrage auswählen kannst, für die du den Einbettungscode erhalten möchtest:

Liste der Umfragen

In diesem Fall wählen wir die Umfrage "Demo survey with routing" aus und erhalten den Einbettungscode für diese intelligente Umfrage:

Einbettungscode der Umfrage für den Button

Wie beim Kalender-Widget gibt es auch hier mehrere Einstellungen für den Button:

  • Button-Text. Das ist die Nachricht, die auf dem Button angezeigt wird.
  • Button-Typ. Du kannst zwischen einem Inline-Button und einem schwebenden Button wählen.
  • Standardoptionen für Aussehen und Farben des Buttons.
  • Button-Designer verwenden.

Wenn du deinen eigenen Button gestalten möchtest, aktiviere die Option "Button-Designer verwenden".

Wenn du den Button für das Widget der intelligenten Umfrage mit Routing gestaltet hast, klicke einfach auf das Symbol oben rechts im Code, um den HTML-Code zu kopieren und in deine Website einzufügen, damit deine Kunden direkt bei dir buchen können.

In einem anderen Tutorial erklären wir dir den Button-Designer im Detail.