Widget

So passt du das Aussehen des neuen TuCalendi-Widgets an

Markdown-Version | Lesezeit: etwa 5 Min.; Zuletzt aktualisiert: 2026-09-26 12:13:31

In diesem Tutorial erfährst du, was das neue Widget-Theme von TuCalendi ist, wie es auf der 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

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

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

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

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

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

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

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

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

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

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.