Alex Ruben
Comment intégrer Calendly de manière transparente à votre site Web Hostinger
Ajouter Calendly à votre site web Hostinger n’est pas compliqué, mais cela peut être un peu déroutant si vous ne l’avez jamais fait. L’objectif est d’intégrer un lien de planification pour que les visiteurs puissent réserver des réunions sans avoir à passer par Calendly. C’est très utile pour une intégration et une présentation soignées. De plus, si vous avez déjà rencontré des problèmes de configuration fastidieux ou si le code n’était pas affiché correctement, ce guide pourrait vous éviter des moments difficiles.
Comment intégrer Calendly sur votre site Hostinger
Obtenez le code d’intégration de Calendly
Tout d’abord, connectez-vous à votre compte Calendly ( https://calendly.com ) et choisissez le type d’événement que vous souhaitez réserver. Cliquez sur le bouton Partager (généralement une petite flèche), puis choisissez Ajouter au site web. C’est là que ça devient pratique : vous verrez plusieurs options comme l’intégration en ligne, le widget contextuel ou le texte contextuel. Pour les besoins les plus basiques, choisissez le style en ligne ou une fenêtre contextuelle. Calendly générera un morceau de code HTML/JavaScript pour vous. Copiez-le simplement. Même si le résultat est un peu confus, ne le modifiez pas si vous ne savez pas ce que vous faites.
Sur certaines configurations, ce code d’intégration peut être capricieux. Il peut parfois ne pas fonctionner du premier coup, surtout si vous n’en copiez qu’une partie par erreur. Vérifiez donc que l’extrait complet a bien été enregistré dans votre presse-papiers.
Connectez-vous à Hostinger et ouvrez votre éditeur de site
Connectez-vous maintenant à votre compte Hostinger ( Hostinger > Gérer votre site > Modifier le site web ) ou accédez directement aux fichiers de votre site web si vous préférez le FTP. Si vous utilisez l’outil de création de site web natif de Hostinger, vous devrez trouver la section permettant d’ajouter du code HTML ou des blocs personnalisés. Pour les utilisateurs de WordPress, accédez à Tableau de bord > Pages et sélectionnez la page où vous souhaitez ajouter le calendrier. Ouvrez ensuite l’éditeur Gutenberg ou l’extension de création de pages que vous utilisez.
Voici l’astuce : vous souhaitez insérer votre code Calendly dans un bloc ou un widget HTML personnalisé. Si vous utilisez l’éditeur de blocs, sélectionnez simplement Ajouter un bloc > HTML personnalisé. Sur WordPress, vous le trouverez généralement sous Apparence > Widgets si vous le souhaitez dans une barre latérale ou directement dans le contenu de la page.
Collez le code d’intégration et ajustez-le selon vos besoins
Collez le code dans le bloc HTML que vous venez de créer. C’est là que certains utilisateurs se retrouvent bloqués. Assurez-vous d’avoir copié l’intégralité du code : s’il manque des éléments ou des fautes de frappe, l’intégration risque de ne pas s’afficher. Dans certaines configurations, vous devrez peut-être ajuster les paramètres de largeur ou de hauteur pour un meilleur ajustement ou un rendu plus net, mais en général, le code par défaut fonctionne correctement. Si le code semble étrange, comme un chevauchement ou une coupure, vous pouvez ajuster le CSS du conteneur ou encapsuler le code d’intégration dans un <div>style de largeur maximale.
Publiez ou mettez à jour votre page
C’est évident, mais parfois négligé : pensez à enregistrer, mettre à jour ou publier votre page après avoir ajouté le code. Tant qu’elle n’est pas en ligne, vous ne verrez pas la fenêtre de planification Calendly. Lorsque vous cliquez sur Publier, elle devrait apparaître ; cependant, sur certaines machines, l’actualisation ou le vidage du cache peuvent prendre quelques secondes. Et non, les URL ou le code d’intégration à moitié copiés peuvent entraîner l’échec de la procédure ; vérifiez donc bien.
Testez le planificateur sur votre site
Une fois en ligne, ouvrez votre site dans un nouvel onglet incognito ou sur un autre appareil. Assurez-vous qu’il s’affiche correctement, surtout sur mobile. Sur certaines configurations, vous devrez peut-être vider le cache de votre navigateur si la mise à jour ne se fait pas immédiatement. Vérifiez également le bon fonctionnement du processus de réservation : bien sûr, vous ne souhaitez surtout pas que vos visiteurs soient bloqués et frustrés.
Conseils supplémentaires et dépannage
Quelques points importants à noter : si le problème semble persistant ou si l’intégration ne se charge pas, vérifiez que votre site n’est pas en mode maintenance ou bloqué par des scripts bloquant le JavaScript intégré. Assurez-vous également que l’intégralité du code d’intégration se trouve dans le bloc HTML personnalisé ; il arrive que de petites erreurs se produisent et que des parties soient perdues lors du copier-coller. Si le problème persiste, essayez de désactiver temporairement les plugins de mise en cache ou de changer de navigateur pour voir si cela pose problème.
Et une chose étrange est survenue : sur certaines configurations d’hébergement, vous devrez peut-être activer JavaScript pour que les scripts en ligne s’exécutent correctement, ce que vous pouvez vérifier via Paramètres du site > Avancé > Scripts personnalisés.
Conclure
Intégrer Calendly n’est pas simple, surtout si vous débutez dans l’édition de sites web. Mais une fois configuré, cela vous évitera bien des tracas. Assurez-vous simplement de copier l’intégralité du code d’intégration et de le tester sur plusieurs appareils. Espérons que cela résoudra un problème de planification supplémentaire.
Résumé
- Obtenez le code d’intégration depuis le menu Ajouter au site Web de Calendly
- Collez-le dans un bloc HTML personnalisé sur Hostinger ou WordPress
- Mise à jour et test sur site en direct
- Vérifiez la réactivité mobile et les autorisations de script
Derniers mots
Cela peut demander un peu de travail, surtout si votre site est doté d’une sécurité renforcée ou d’une mise en cache efficace. Mais une fois le système opérationnel, vos visiteurs pourront réserver directement sans avoir à changer de navigateur. Espérons que cela fonctionne ; si c’est un peu compliqué, pensez à vider votre cache ou à essayer d’autres navigateurs.Ça a fonctionné pour moi ; j’espère que ça fonctionnera aussi pour vous.