Webflow Tutorial

Webflow is een krachtige webgebaseerde drag-and-drop tool voor het bouwen van responsieve websites. We gebruiken Webflow om de website van CozyCal te bouwen en zijn er dol op! 

In deze tutorial leert u hoe u de zwevende knop van CozyCal installeert en bewerkt, uw eigen knop gebruikt en een in-frame insluiting toevoegt op uw Webflow-website.
‍

1. CozyCal installeren op Webflow ‍
Het is eenvoudig om CozyCal op uw Webflow-website te installeren. Het enige wat u nodig heeft is een kort stukje code. U kunt de onderstaande stappen volgen om aan de slag te gaan: 
‍
1. Meld u aan of log in op uw CozyCal-account.
‍
2. Ga naar Instellingen & Team → Website-instelling → CozyCal installeren ‍
‍

‍
‍
3. Klik op Ik installeer het zelf → Javascript → Code kopiëren
‍

‍
‍
4. Log in op uw Webflow-dashboard, klik vervolgens in de navigatiebalk aan de linkerkant op Instellingen .
‍

‍
‍
5. Klik op Aangepaste code
‍

‍
‍
6. Scroll naar beneden en plak uw code in de Voettekstcode, klik vervolgens op Wijzigingen opslaan .
‍ Opmerking: De code in de onderstaande afbeelding is slechts een voorbeeldcode. Zorg ervoor dat u uw eigen unieke code plakt.

‍
‍
7. Ga terug naar de installatiepagina van CozyCal en klik op Volgende: Installatie verifiëren→Installatie verifiëren om te controleren of de installatie is geverifieerd.

Voilà, de knop van CozyCal zou nu op uw site zichtbaar moeten zijn! 🙌
‍

2. De zwevende knop van CozyCal bewerken
U kunt de kleur, tekst en positie van de CozyCal-knop op uw website aanpassen.

Ga eenvoudig naar Instellingen & Team → Website-instelling → Zwevende knop bewerken en pas de instelling aan naar uw voorkeur.
‍

Voilà, de knop van CozyCal zou nu op uw site zichtbaar moeten zijn! 🙌
‍

3. Uw eigen knop gebruiken
Als u liever een aangepaste knop op uw Webflow-website gebruikt, kunt u dat eenvoudig doen. CozyCal detecteert links naar boekingspagina's op uw website en opent deze automatisch in een modaal venster.
Opmerking: Om het modaal venster van de boekingspaginadirectop uw website te laten openen, moet u eerst de CozyCal-plugin installeren.

1. Ga naar Instellingen → Website-instelling → Zwevende knop bewerken

2. Schakel Zwevende knop op mijn website weergeven uit
‍

3. Ga naar uw Boekingspagina , klik op de knop Delen en Link kopiëren .
‍

4. Voeg de URL van uw boekingspagina toe (bijv. https://cozycal.com/kat ) aan aangepaste knoppen, afbeeldingen of tekst op uw website.
‍

Nu zal uw boekingspagina verschijnen als een modaal venster.
‍

Voilà, de knop van CozyCal zou nu op uw site zichtbaar moeten zijn! 🙌
‍

4. In-frame insluiting toevoegen
‍
U kunt een in-frame insluitingsoptie aan uw website toevoegen en gasten direct op uw website afspraken laten inplannen, waardoor de planningsflow naadlozer verloopt.
‍ ‍
1. Ga naar uw boekingspagina.
‍
2. Klik op Delen , vervolgens op Aan website toevoegen.
‍
3. Klik onder In-frame insluiting op Code kopiëren .

4. Ga naar Webflow en kies de locatie waar u aangepaste HTML wilt toevoegen. Klik op Elementen toevoegen en selecteer vervolgens Insluiten .

5. Plak de HTML-code die u van CozyCal heeft gekopieerd en publiceer de wijziging.

6. Nu zult u zien dat uw CozyCal-boekingspagina wordt weergegeven als een in-frame insluiting op uw Webflow-website.
‍

Als u hulp nodig heeft, laat het ons weten. Stuur ons een bericht via de roze chatbel in de rechterbenedenhoek van de pagina. We nemen zo snel mogelijk contact met u op. 😃
‍