---
language: de
title: So erhältst du den Einbettungscode im Button-Stil für das TuCalendi-Widget
category: Widget
summary: Erfahre, wie du einen Button für das TuCalendi-Widget erstellst, anpasst und den Einbettungscode für deine Website kopierst.
---

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

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](https://www.tucalendi.com/en/s/widget/how-to-get-the-embed-code-for-the-tucalendi-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"**.

![Widget-Einbettungscodes](https://www.tucalendi.com/images/content/widget/en/widgets-embed-codes.png)

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

Klicke im Auswahlbildschirm für den Einbettungstyp auf der Karte **Button** auf den Button **"Auswählen"**.

![Button-Einbettungscode](https://www.tucalendi.com/images/content/widget/en/widget-embed-code-button.png)

## 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".

![Einbettungscodes für das Kalender-Widget](https://www.tucalendi.com/images/content/widget/en/widget-embed-codes-inline-calendar.png)

## 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.

![Event auswählen](https://www.tucalendi.com/images/content/widget/en/widget-embed-codes-inline-calendar-select.png)

Das Menü zeigt dir die in deinem Konto verfügbaren Kalender und Events, sortiert nach **Kategorie**.

![Kalender oder Event auswählen](https://www.tucalendi.com/images/content/widget/en/widget-embed-codes-inline-calendar-select-event.png)

## 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.

![Button-Einbettungscode kopieren](https://www.tucalendi.com/images/content/widget/en/widget-embed-button-code-copy.png)

## Ü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.