---
language: de
title: So passt du das Aussehen des neuen TuCalendi-Widgets an
category: Widget
summary: Erstelle eine Designvorlage für das neue TuCalendi-Widget, passe sie an und weise sie Hubs oder Umfragen mit Routing zu.
---

# So passt du das Aussehen des neuen TuCalendi-Widgets an

In diesem Tutorial erfährst du, was das neue **Widget-Theme** von TuCalendi ist, wie es auf der [meetfy.me-Domain](https://www.tucalendi.com/en/s/migration-to-tucalendi-3/what-is-the-new-meetfy-me-domain) verwendet wird, und wie du in der neuen Version der Plattform eine **Vorlage** erstellst, um das Design des Widgets anzupassen. Mit den **Darstellungseinstellungen** legst du die visuellen Optionen und das Verhalten des Widgets fest, damit das Buchungserlebnis zur Identität jedes Kontos, jeder Marke, jedes Hubs oder jedes Buchungsablaufs passt.

In diesem Artikel konzentrieren wir uns auf den allgemeinen Ablauf: den Bereich **Aussehen** öffnen, eine Vorlage erstellen, ihr einen **Alias** geben, die wichtigsten Optionen bearbeiten und sie den entsprechenden Elementen zuweisen. In weiteren Tutorials erklären wir dir jede Anpassungsoption im Editor ausführlicher.

## Was ist das Aussehen des neuen TuCalendi-Widgets?

Das Aussehen des Widgets ist eine **Konfigurationsvorlage**, mit der du anpasst, wie das TuCalendi-Widget den Endnutzern angezeigt wird. Diese Vorlage kann Optionen wie **Textfarben**, **Zeitformat**, **Datumsformat**, **Sprache**, **visuelles Theme**, **Rahmen**, **Schatten**, **Position der Währung**, **Bildanzeige** und weitere Einstellungen rund um das Widget-Erlebnis enthalten.

Das Wichtigste dabei: Wenn du eine Vorlage erstellst oder bearbeitest, werden die Änderungen **nicht automatisch auf alle Elemente angewendet**. Damit das Aussehen im Widget sichtbar wird, musst du die Vorlage den entsprechenden Elementen zuweisen, zum Beispiel einem **Hub** oder einer **Umfrage mit Routing**.

## Schritt 1. Öffne den Bereich Aussehen des Widgets

Öffne zuerst im Seitenmenü von TuCalendi den Bereich **Widgets**. Wähle dort die Option **Aussehen** aus. Du kannst sie auch über die Hauptansicht der Widgets erreichen, indem du auf den Block **Aussehen** klickst.

![Aussehen des neuen TuCalendi-Widgets](https://www.tucalendi.com/images/content/widget/en/widget-appearance.png)

> [!TIP]
> In diesem Bereich kannst du die **Designvorlagen** erstellen und verwalten, die auf das neue TuCalendi-Widget angewendet werden.

## Schritt 2. Erstelle eine neue Vorlage

Sobald du im Bereich Aussehen bist, wird eine Liste der verfügbaren Vorlagen angezeigt. Wenn noch keine Vorlagen erstellt wurden, zeigt der Bildschirm an, dass keine Einträge vorhanden sind.

Um eine neue Vorlage zu erstellen, klicke oben rechts auf dem Bildschirm auf die Schaltfläche **„Neu“**.

![Neue Vorlage für das Widget-Aussehen erstellen](https://www.tucalendi.com/images/content/widget/en/create-new-widget-appearance-template.png)

## Schritt 3. Gib der Vorlage einen Alias

Wenn du eine neue Vorlage erstellst, öffnet TuCalendi ein Fenster, in dem du einen **Alias** eingeben musst. Der Alias ist der **interne Name**, mit dem du die Vorlage in deinem Konto wiedererkennst.

![Alias der Vorlage für das Widget-Aussehen](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-alias.png)

> [!TIP]
> Verwende am besten **klare und aussagekräftige Namen**, vor allem wenn du mehrere Vorlagen für verschiedene Marken, Hubs, Dienstleistungen oder Buchungsabläufe erstellst.

Nachdem du den Alias eingegeben hast, klicke auf **„Speichern“**, um die Vorlage zu erstellen.

## Schritt 4. Bearbeite die Vorlage, um sie anzupassen

Nach dem Erstellen erscheint die Vorlage in der Liste. Um sie zu konfigurieren, klicke auf die Option **„Bearbeiten“**.

![Vorlage für das Widget-Aussehen bearbeiten](https://www.tucalendi.com/images/content/widget/en/edit-widget-apperance-template.png)

Dadurch gelangst du zum **Darstellungseditor**, in dem du die aktuellen Anpassungsoptionen für das neue TuCalendi-Widget siehst.

## Schritt 5. Passe die Optionen des Widget v3 an

Der Editor zeigt dir die verfügbaren Optionen, mit denen du das Aussehen und bestimmte Verhaltensweisen des Widgets anpassen kannst. Zu den aktuellen Optionen gehören **Farbeinstellungen**, **Formate**, **Sprache**, **visuelles Theme**, **Rahmen**, **Schatten** und weitere Darstellungselemente.

![Optionen für das Widget-Aussehen](https://www.tucalendi.com/images/content/widget/en/widget-apperance-template-option.png)

Wenn du die gewünschten Änderungen vorgenommen hast, klicke auf **„Speichern“**, um die Einstellungen der Vorlage zu sichern.

> [!WARNING]
> In diesem Tutorial zeigen wir dir nur, wo sich diese Optionen befinden und wie du deine Änderungen speicherst. In weiteren Tutorials erklären wir dir jede Einstellung einzeln, damit du das Aussehen noch genauer konfigurieren kannst.

## Schritt 6. Weise der Vorlage Elemente zu

Nachdem du die Vorlage erstellt und angepasst hast, ist es **wichtig, sie den Elementen zuzuweisen, auf die sie angewendet werden soll**. Wenn keine Elemente zugewiesen sind, wird die Vorlage zwar korrekt erstellt, ihre Änderungen erscheinen aber in keinem aktiven Widget.

Klicke in der Vorlagenliste auf **„Elemente zuweisen“**, um auszuwählen, wo dieser Stil angewendet werden soll.

![Elemente einer Vorlage für das Widget-Aussehen zuweisen](https://www.tucalendi.com/images/content/widget/en/assing-elements-to-widget-appearance-template.png)

## Schritt 7. Verknüpfe Hubs oder Umfragen und wende die Änderungen an

Wenn du auf **„Elemente zuweisen“** klickst, öffnet sich ein **Verknüpfungsfenster**. Dort kannst du die Elemente auswählen, auf die die Vorlage angewendet werden soll.

![Elemente mit einer Vorlage für das Widget-Aussehen verknüpfen](https://www.tucalendi.com/images/content/widget/en/linking-elements-to-widget-appearance-template.png)

Sobald du die Elemente ausgewählt hast, klicke auf **„Anwenden“**, um die Verknüpfung zu speichern.

> [!TIP]
> Die Elemente können **Hubs** oder **Umfragen mit Routing** sein. Wenn du das Theme einem Hub zuweist, wird die Vorlage auf die **Meetingtypen** angewendet, die mit diesem Hub verknüpft sind. Wenn du es einer Umfrage mit Routing zuweist, wird das Theme auf den **Buchungsablauf** dieser Umfrage angewendet.

## Schritt 8. Prüfe, ob der Vorlage Elemente zugewiesen sind

Nachdem du die Verknüpfung angewendet hast, zeigt die Vorlage das **zugewiesene Element** in der Liste an. So kannst du bestätigen, dass das Theme bereits mit einem bestimmten Hub oder einer bestimmten Umfrage verknüpft ist.

In derselben Ansicht kannst du prüfen, welche Elemente verknüpft sind, die Vorlage bearbeiten oder eine **Zuweisung entfernen**, falls du die Einstellungen später ändern möchtest.

![Vorlage für das Widget-Aussehen mit Element](https://www.tucalendi.com/images/content/widget/en/widget-appearance-template-with-element.png)

## Zusammenfassung

Mit der Funktion **„Aussehen“** des neuen TuCalendi-Widgets kannst du **Designvorlagen** erstellen, um anzupassen, wie das Widget den Endnutzern angezeigt wird.

Der Bereich **„Aussehen“** ist besonders nützlich, wenn du ein **einheitliches visuelles Erlebnis** über verschiedene Widgets, Hubs oder Umfragen mit Routing hinweg beibehalten möchtest. Statt jedes Widget einzeln zu konfigurieren, erstellst du eine Vorlage, passt sie an und weist sie den passenden Elementen zu.