So passt du das Aussehen des neuen TuCalendi-Widgets an

In diesem Tutorial erfährst du, was das neue TuCalendi-Widget-Theme ist, wie es auf der Domain meetfy.me verwendet wird und wie du eine Vorlage erstellst, um das Design des Widgets in der neuen Version der Plattform anzupassen. Mit den Darstellungseinstellungen kannst du die optischen und funktionalen Optionen des Widgets festlegen, um das Buchungserlebnis an die Identität jedes Kontos, jeder Marke, jedes Hubs oder jedes Buchungsablaufs anzupassen.

In diesem Artikel konzentrieren wir uns auf den allgemeinen Ablauf: den Zugriff auf den Bereich „Darstellung“, das Erstellen einer Vorlage, das Vergeben eines Alias, das Bearbeiten der wichtigsten Optionen und das Zuweisen an die entsprechenden Elemente. In anderen Tutorials werden wir jede im Editor verfügbare Anpassungsoption genauer erklären.

Wie sieht das neue TuCalendi-Widget aus?

Das Erscheinungsbild des Widgets ist eine Konfigurationsvorlage, mit der du anpassen kannst, wie das TuCalendi-Widget den Endnutzern angezeigt wird. Diese Vorlage kann Optionen wie Textfarben, Zeitformat, Datumsformat, Sprache, visuelles Thema, Rahmen, Schatten, Währungsposition, Bildanzeige und andere Einstellungen im Zusammenhang mit der Widget-Erfahrung enthalten.

Der wichtigste Punkt ist, dass das Erstellen oder Bearbeiten einer Vorlage die Änderungen nicht automatisch auf alle Elemente anwendet. Damit sich das Erscheinungsbild im Widget widerspiegelt, musst du die Vorlage den entsprechenden Elementen zuweisen, wie zum Beispiel einem Hub oder einer Umfrage mit Weiterleitung.

Schritt 1. Rufe den Bereich „Darstellung“ des Widgets auf

Um loszulegen, geh im TuCalendi-Seitenmenü zum Abschnitt „Widgets“. Wähle dort die Option „Darstellung“ aus. Du kannst den Bereich auch direkt aus der Hauptansicht „Widgets“ aufrufen, indem du auf den Block „Darstellung“ klickst.

New TuCalendi widget appearance

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 dich im Bereich „Darstellung“ befindest, wird eine Liste der verfügbaren Vorlagen angezeigt. Wenn noch keine Vorlagen erstellt wurden, wird auf dem Bildschirm angezeigt, dass keine Elemente vorhanden sind.

Um eine neue Vorlage zu erstellen, klicke auf die Schaltfläche „Neu“ in der oberen rechten Ecke des Bildschirms.

Create a new widget appearance template

Schritt 3. Gib der Vorlage einen Alias

Wenn du eine neue Vorlage erstellst, zeigt TuCalendi ein Fenster an, in dem du einen Alias eingeben musst. Der Alias ist der interne Name, der dir hilft, die Vorlage in deinem Konto zu identifizieren.

Widget apperance template alias

Es empfiehlt sich, klare und aussagekräftige Namen zu verwenden, insbesondere 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

Sobald die Vorlage erstellt ist, erscheint sie in der Liste. Um sie zu konfigurieren, klicke auf die Option „Bearbeiten “.

Edit widget appearance template

Dadurch gelangst du zum Design-Editor, wo du die aktuellen Anpassungsoptionen für das neue TuCalendi-Widget siehst.

Schritt 5. Passe die Optionen des Widgets v3 an

Der Editor zeigt die verfügbaren Optionen zur Anpassung des Erscheinungsbilds und bestimmter Verhaltensweisen des Widgets an. Zu den aktuellen Optionen gehören Farbeinstellungen, Formate, Sprache, visuelles Design, Rahmen, Schatten und andere Darstellungselemente.

Widget appearance options

Sobald du die notwendigen Änderungen vorgenommen hast, klicke auf „Speichern“, um die Vorlageneinstellungen zu speichern.  

In diesem Tutorial zeigen wir dir nur, wo sich diese Optionen befinden und wie du deine Änderungen speicherst. In anderen Tutorials erklären wir jede Einstellung einzeln, damit du das Erscheinungsbild noch detaillierter konfigurieren kannst. 

Schritt 6. Elemente der Vorlage zuweisen

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 werden sich jedoch in keinem aktiven Widget widerspiegeln.

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

Assing elements to a widget appearance template

Schritt 7. Hubs oder Umfragen verknüpfen und die Änderungen anwenden

Wenn du auf „Elemente zuweisen“ klickst, öffnet sich ein Verknüpfungsfenster. In diesem Fenster kannst du die Elemente auswählen, auf die du die Darstellungsvorlage anwenden möchtest.

Linking elements to widget appearance template

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

Bei den Elementen kann es sich um Hubs oder Umfragen mit Weiterleitung handeln. Wenn du das Design einem Hub zuweist, wird die Vorlage auf die mit diesem Hub verbundenen Meeting-Typen angewendet. Wenn du es einer Umfrage mit Weiterleitung zuweist, wird das Design auf den dieser Umfrage entsprechenden Buchungsablauf angewendet.

Schritt 8. Überprüfe, ob der Vorlage Elemente zugewiesen sind

Nach dem Anwenden der Verknüpfung zeigt die Vorlage das zugewiesene Element in der Liste an. So kannst du überprüfen, ob das Design bereits einem bestimmten Hub oder einer bestimmten Umfrage zugeordnet ist.

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

Widget appearance template with element

Zusammenfassung

Mit der neuen „Darstellung“-Funktion des TuCalendi-Widgets kannst du Designvorlagen erstellen, um die Darstellung des Widgets für Endnutzer anzupassen

Der Abschnitt „Darstellung“ist besonders nützlich, wenn du über verschiedene Widgets, Hubs oder Umfragen hinweg mit Weiterleitung ein einheitliches Erscheinungsbild gewährleisten möchtest. Anstatt jedes Widget einzeln zu konfigurieren, kannst du eine Vorlage erstellen, diese anpassen und den entsprechenden Elementen zuweisen.