---
language: de
title: Button-Designer
category: Online booking
summary: So gestaltest du mit dem Button-Designer einen individuellen Buchungsbutton und erhältst den Einbettungscode für deine Website.
---

# Button-Designer

Wir haben den **Button-Designer** entwickelt, damit du auf deiner Website einen Button mit vielen Anpassungsoptionen einfügen kannst, über den deine Besucher auf deinen Online-Kalender zugreifen.

Jeder Button, den du gestaltest, hat seinen [eigenen Integrationscode, mit dem du den Button auf deiner Website einbettest](https://www.tucalendi.com/de/s/online-reservierungen/tucalendi-widget-als-schaltflache-einbetten).

[Melde dich bei TuCalendi an](https://account.tucalendi.com/login) mit deinem Benutzernamen und Passwort. Gehe im vertikalen Menü auf die Option **"Einbettungscodes"**:

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

Klicke im Bereich **"Button"** auf **"Auswählen"**.

![Widget button type](https://www.tucalendi.com/images/content/online-booking/en/v2-widget-type-button.png)

Wähle den **Widget-Typ** aus, den du auf deiner Website einbetten möchtest.

- Kalender.
- Smart Survey.

> [!TIP]
> Der Ablauf ist für **beide Widget-Typen genau gleich**.

Wähle **"Kalender"**:

![Embed code](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-button-calendar-code.png)

Klicke auf das Dropdown-Menü und wähle den **Kalender** oder das **Ereignis**, das angezeigt werden soll, wenn jemand auf den Buchungsbutton klickt.

In diesem Beispiel haben wir das Ereignis **"First Event (30 Min)"** gewählt.

Aktiviere die Option **"Button-Designer verwenden"**.

![embed button code designer](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-button-code-designer.png)

Wenn du auf **"Button-Designer"** klickst, gelangst du zum Designer, der dir zahlreiche Optionen bietet, um den Button ganz nach deinen Wünschen zu gestalten.

![Button designer](https://www.tucalendi.com/images/content/online-booking/en/v2-button-designer.png)

Du hast viele Möglichkeiten, deine Buttons zu gestalten und anzupassen:

- **Button-Text**. Die Nachricht, die auf dem Button angezeigt wird. Du kannst einen ansprechenden **Call to Action** formulieren, der deine Kunden dazu bringt, zu klicken und einen Termin zu buchen.
- **Button-Farbe**.
- **Textfarbe**.
- **Schriftart**. Du kannst zwischen verschiedenen Schriftarten für den Button-Text wählen.
- **Textausrichtung**. Richte den Text auf dem Button aus.
- **Schriftstil**.
- **Schriftstärke**. Hier wählst du die Stärke der Schrift.
- **Schriftgröße**. Ändere die Schriftgröße, indem du einfach den Regler verschiebst, um die Größe zu erhöhen oder zu verringern.
- **Mindestbreite**. Die minimale Breite des Buttons.

Dazu kommen weitere Optionen, die neben dem Regler zum Ändern des Werts noch mehr bieten: Wenn du auf das **"Vorhängeschloss"** klickst, werden sie entsperrt und du kannst noch mehr mit diesen Funktionen experimentieren.

- **Innenabstand**.

![Diseñador de botones padding](https://www.tucalendi.com/images/content/online-booking/v2-disenador-boton-padding.png)

- **Eckenradius**.

![Diseñador de botones radio del borde](https://www.tucalendi.com/images/content/online-booking/v2-disenador-boton-radio-borde.png)

- **Schatten**.

![Diseñador de botones sombras](https://www.tucalendi.com/images/content/online-booking/v2-disenador-boton-sombras.png)

Wenn du den Button fertig gestaltet hast:

![Button designed](https://www.tucalendi.com/images/content/online-booking/en/v2-button-designed.png)

Klicke auf **"Speichern"**, dann wird der **Einbettungscode** für deinen gestalteten Button erstellt:

![Embed code for a button](https://www.tucalendi.com/images/content/online-booking/en/v2-embed-code-for-button.png)

Du musst nur noch **den Code kopieren und in deine Website einfügen**, damit der Button genau so angezeigt wird, wie du ihn gestaltet hast.