Webflow Tutorial

Webflow ist ein leistungsstarkes, webbasiertes Drag-and-Drop-Tool zur Erstellung responsiver Websites. Wir nutzen Webflow für den Aufbau der CozyCal-Website und sind begeistert davon! 

In diesem Tutorial erfahren Sie, wie Sie den schwebenden CozyCal-Button installieren und bearbeiten, Ihren eigenen Button verwenden und ein In-Frame-Embed auf Ihrer Webflow-Website hinzufügen.
‍

1. CozyCal auf Webflow installieren ‍
CozyCal lässt sich ganz einfach auf Ihrer Webflow-Website installieren. Alles, was Sie brauchen, ist ein kurzer Code-Abschnitt. Folgen Sie den nachstehenden Schritten, um loszulegen: 
‍
1. Registrieren Sie sich oder melden Sie sich in Ihrem CozyCal-Konto an.
‍
2. Gehen Sie zu Einstellungen & Team → Website-Einrichtung → CozyCal installieren ‍
‍

‍
‍
3. Klicken Sie auf Ich installiere es selbst → Javascript → Code kopieren
‍

‍
‍
4. Melden Sie sich an in Ihrem Webflow-Dashboard, und klicken Sie in der linken Navigationsleiste auf Einstellungen .
‍

‍
‍
5. Klicken Sie auf Benutzerdefinierter Code
‍

‍
‍
6. Scrollen Sie nach unten und fügen Sie Ihren Code in den Footer-Code ein, dann klicken Sie auf Änderungen speichern .
‍ Hinweis: Der in der Abbildung unten gezeigte Code ist nur ein Beispielcode. Stellen Sie sicher, dass Sie Ihren eigenen einzigartigen Code einfügen.

‍
‍
7. Gehen Sie zurück zur CozyCal-Installationsseite und klicken Sie auf Weiter: Installation prüfen→Installation prüfen , um sicherzustellen, dass die Installation bestätigt wurde.

Voilà, der CozyCal-Button sollte nun auf Ihrer Website angezeigt werden! 🙌
‍

2. Den schwebenden CozyCal-Button bearbeiten
Sie können Farbe, Text und Position des CozyCal-Buttons auf Ihrer Website anpassen.

Gehen Sie einfach zu Einstellungen & Team → Website-Einrichtung → Schwebenden Button bearbeiten und passen Sie die Einstellungen nach Ihren Wünschen an.
‍

Voilà, der CozyCal-Button sollte nun auf Ihrer Website angezeigt werden! 🙌
‍

3. Eigenen Button verwenden
Wenn Sie es vorziehen, einen eigenen Button auf Ihrer Webflow-Website zu verwenden, ist das ganz einfach möglich. CozyCal erkennt Buchungsseiten-Links auf Ihrer Website und öffnet sie automatisch in einem Modal.
Hinweis: Um das Buchungsseiten-Modaldirektauf Ihrer Website zu aktivieren, müssen Sie zunächst das CozyCal-Plugin installieren.

1. Gehen Sie zu Einstellungen → Website-Einrichtung → Schwebenden Button bearbeiten

2. Deaktivieren Sie Schwebenden Button auf meiner Website anzeigen
‍

3. Klicken Sie auf Ihrer Buchungsseite auf die Schaltfläche Teilen und dann auf Link kopieren .
‍

4. Fügen Sie die URL Ihrer Buchungsseite (z. B. https://cozycal.com/kat ) zu beliebigen benutzerdefinierten Buttons, Bildern oder Texten auf Ihrer Website hinzu.
‍

Jetzt erscheint Ihre Buchungsseite als Modal.
‍

Voilà, der CozyCal-Button sollte nun auf Ihrer Website angezeigt werden! 🙌
‍

4. In-Frame-Einbettung hinzufügen
‍
Sie können die In-Frame-Einbettungsoption zu Ihrer Website hinzufügen und Gästen ermöglichen, Termine direkt auf Ihrer Website zu buchen, was den Buchungsablauf noch reibungsloser macht.
‍ ‍
1. Gehen Sie zu Ihrer Buchungsseite.
‍
2. Klicken Sie auf Teilen , dann auf Zur Website hinzufügen.
‍
3. Klicken Sie unter In-Frame-Einbettung auf Code kopieren .

4. Gehen Sie zu Webflow und wählen Sie den Ort aus, an dem Sie benutzerdefiniertes HTML hinzufügen möchten. Klicken Sie auf Elemente hinzufügen und wählen Sie dann Einbetten .

5. Fügen Sie den von CozyCal kopierten HTML-Code ein und veröffentlichen Sie die Änderung.

6. Jetzt sehen Sie, dass Ihre CozyCal-Buchungsseite als In-Frame-Einbettung auf Ihrer Webflow-Website angezeigt wird.
‍

Wenn Sie Hilfe benötigen, lassen Sie es uns wissen. Schicken Sie uns eine Nachricht über die rosa Chat-Blase in der unteren rechten Ecke der Seite. Wir melden uns so schnell wie möglich bei Ihnen. 😃
‍