---
language: de
title: TuCalendi Widget als Button einbetten
category: Online booking
summary: So holst du dir den HTML-Code, um das Kalender- oder Umfrage-Widget von TuCalendi als Inline- oder schwebenden Button auf deiner Website einzubinden.
---

# TuCalendi Widget als Button einbetten

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](https://account.tucalendi.com/login) mit deinem Benutzernamen und Passwort und gehe im vertikalen Menü zur Option **"Einbettungscodes"**:

![Einbettungscodes](https://www.tucalendi.com/images/content/online-booking/v2-embed-codes.png)

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

- Als [Online-Kalender](https://www.tucalendi.com/de/s/online-reservierungen/wie-man-tucalendi-in-eine-website-integriert).
- Als Button.

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

> [!TIP]
> 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](https://www.tucalendi.com/images/content/online-booking/en/v2-widget-type-button.png)

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](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-button-calendar-code.png)

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](https://www.tucalendi.com/images/content/online-booking/en/v2-calendars-events-list.png)

> [!TIP]
> 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](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-code-button-event.png)

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](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-button-code-designer.png)

Klicke dann auf die Option [**"Button-Designer"**, damit du deinen eigenen Button erstellen und gestalten kannst](https://www.tucalendi.com/de/s/online-reservierungen/schaltflachendesigner).

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](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-survey-code.png)

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](https://www.tucalendi.com/images/content/online-booking/en/v2-survey-with-routing-list.png)

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](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-code-button-survey.png)

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.

> [!TIP]
> In einem anderen Tutorial erklären wir dir den **Button-Designer** im Detail.