Webflow est un puissant outil de glisser-déposer en ligne pour créer des sites web réactifs. Nous utilisons Webflow pour construire le site de CozyCal et nous l'adorons !
Dans ce tutoriel, vous apprendrez à installer et modifier le bouton flottant de CozyCal, à utiliser votre propre bouton et à ajouter une intégration en cadre sur votre site Webflow.
1. Installer CozyCal sur Webflow
Il est facile d'installer CozyCal sur votre site Webflow. Tout ce dont vous avez besoin est un court extrait de code. Vous pouvez suivre les étapes ci-dessous pour commencer :
1. Inscrivez-vous ou connectez-vous à votre compte CozyCal.
2. Allez dans Paramètres & Équipe → Configuration du site web → Installer CozyCal

3. Cliquez sur Je l'installerai moi-même → Javascript → Copier le code

4. Connectez-vous à votre tableau de bord Webflow, puis dans la barre de navigation de gauche, cliquez sur Paramètres .

5. Cliquez sur Code personnalisé

6. Faites défiler vers le bas et collez votre code dans le Code de pied de page, puis cliquez sur Enregistrer les modifications .
Remarque : Le code affiché dans l'image ci-dessous n'est qu'un exemple de code. Veuillez vous assurer de coller votre propre code unique.

7. Revenez à la page d'installation de CozyCal et cliquez sur Suivant : Vérifier l'installation→Vérifier l'installation pour vous assurer que l'installation est bien validée.

Voilà, le bouton de CozyCal devrait maintenant apparaître sur votre site ! 🙌
2. Modifier le bouton flottant de CozyCal
Vous pouvez personnaliser la couleur, le texte et la position du bouton CozyCal sur votre site web.
Accédez simplement à Paramètres & Équipe → Configuration du site web → Modifier le bouton flottant , et modifiez les paramètres selon vos préférences.

Voilà, le bouton de CozyCal devrait maintenant apparaître sur votre site ! 🙌
3. Utiliser votre propre bouton
Si vous préférez utiliser un bouton personnalisé sur votre site Webflow, vous pouvez le faire facilement. CozyCal détecte les liens de page de réservation sur votre site web et les ouvre automatiquement dans une fenêtre modale.
Remarque : Pour activer l'ouverture de la page de réservationdirectementen fenêtre modale sur votre site web, vous devez d'abord installer le plugin CozyCal.
1. Allez dans Paramètres → Configuration du site web → Modifier le bouton flottant
2. Décochez Afficher le bouton flottant sur mon site web

3. Sur votre Page de réservation , cliquez sur le bouton Partager , puis sur Copier le lien .

4. Ajoutez l'URL de votre page de réservation (ex. https://cozycal.com/kat ) à n'importe quel bouton personnalisé, image ou texte sur votre site web.

Désormais, votre page de réservation s'affichera sous forme de fenêtre modale.

Voilà, le bouton de CozyCal devrait maintenant apparaître sur votre site ! 🙌
4. Ajouter une intégration en cadre
Vous pouvez ajouter l'option d'intégration en cadre à votre site web et permettre à vos visiteurs de planifier des événements directement sur votre site, rendant ainsi le processus de prise de rendez-vous plus fluide.
1. Accédez à votre page de réservation.
2. Cliquez sur Partager , puis sur Ajouter au site web.
3. Sous Intégration en cadre, cliquez sur Copier le code .
4. Accédez à Webflow et choisissez l'emplacement où vous souhaitez ajouter du HTML personnalisé. Cliquez sur Ajouter des éléments , puis sélectionnez Intégration .
5. Collez le code HTML que vous avez copié depuis CozyCal et publiez la modification.
6. Vous verrez désormais que votre page de réservation CozyCal s'affiche sous forme d'intégration en cadre sur votre site Webflow.
Si vous avez besoin d'aide, faites-le nous savoir. Envoyez-nous un message via la bulle de chat rose dans le coin inférieur droit de la page. Nous vous répondrons dans les plus brefs délais. 😃