Sie haben in Crqlar die Möglichkeit die Webwidgets bis ins kleinste Details mittels CSS Coding zu personalisieren, damit diese sich auch optisch perfekt in Ihre Website einfügen und einen makellosen Onlineauftritt komplementieren.
1. Wählen Sie im Bereich Integrationen das Crqlar Web App Widget aus
2. Wählen Sie aus der Liste das jeweilige Widget, welches Sie anpassen möchten
3. Wählen Sie in der Kopfleiste CSS Styling aus
Im Bereich Basic Styling können Sie schnell und einfach die Schriftfarbe und Schriftart für das Widget verändern;
Das Bild, welches im Widget in der Standardansicht von Crqlar Widgets ersichtlich ist, ist das Servicebild, welches bei der Konfiguration von Services als Bild hinzugefügt wird.
Selbiges gilt für die Kategorien im Buchungswidget. Auch hier werden die Bilder in den Kategorien im Servicebereich eingepflegt.
Also wenn im Widget zum Beispiel als Überkategorie zuerst "Massagen" angezeigt werden soll, auf Welche die Gäste klicken müssen, um zur Auswahl von allen einzelnen Massagen-Services zu gelangen,
Wird im Bereich Services > Kategorien eine Kategorie Namens "Massagen" erstellt und dort das Bild hinzugefügt, welches auf der Website angezeigt werden soll.
Um das Widget optisch drastischer verändern zu können, können Sie den CSS-Code des Widgets verändern:
Vorgehensweise:
1. Um das Styling anzupassen, müssen Sie das HTML-Element identifizieren, das das Widget enthält. In unserem Beispiel verwenden wir die ID #crqlar-widget
2. Fügen Sie dort die gewünschten CSS-Regeln ein, die dem Widget sagen, wie es in Zukunft aussehen soll
3. Einige Beispiele für CSS-Styling:
Hintergrundfarbe ändern
#crqlar-widget {
background-color: #f0f0f0; /* Helle Hintergrundfarbe */
}Textfarbe und Schriftgröße anpassen
#crqlar-widget {
color: #333; /* Dunkle Textfarbe */
font-size: 16px; /* Schriftgröße */
}Padding und Margin hinzufügen
#crqlar-widget {
padding: 20px; /* Innenabstand */
margin: 10px; /* Außenabstand */
}Rahmen und Ecken abrunden
#crqlar-widget {
border: 1px solid #ccc; /* Rahmenfarbe und -breite */
border-radius: 10px; /* Abgerundete Ecken */
}Schattierungen hinzufügen
#crqlar-widget {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
}
6. Überprüfen und Anpassen
Laden Sie Ihre Webseite neu, um die Änderungen zu sehen. Passen Sie die CSS-Regeln bei Bedarf weiter an, bis das Widget perfekt in Ihre Webseite integriert ist.
Einbinden des Widgets in auf Ihrer Website:Wie Sie den Code des Widgets auf Ihrer Website einbinden können, um das Widget sichtbar zu machen, finden Sie unter Integrationsanweisungen in der Kopfleiste:
