Personnalisez votre intégration Calendly pour qu'elle corresponde à votre site : masquez les informations d'événement, supprimez la bannière de cookie, changez les couleurs et ajustez le placement des widgets.
Masquer les détails de l'événement
Vous pouvez masquer des informations personnelles ou d'événements afin qu'elles ne s'affichent pas deux fois sur votre site.
Ce qui est caché :
- Votre photo
- Votre nom
- Durée de l'événement
- Emplacement de l'événement
- Description de l'événement
Pour masquer les détails de l'événement lors de la création de votre intégration :
- Avant de copier votre code d'intégration, sélectionnez Masquer les détails de l'événement
- Fonctionne à la fois pour les intégrations en ligne et les pop-ups
- Sélectionnez Copier le code.
- Collez le code dans le HTML de votre site Web.
Si vous avez déjà intégré Calendly : ajoutez ces paramètres de requête à votre lien Calendly :
| Type de lien | Quoi ajouter |
| Type d'événement | ?hide_event_type_details=1 |
| Page de destination ou d'équipe | ?hide_landing_page_details=1 |
Remarque : si vous utilisez les deux, la description du type d'événement peut toujours s'afficher.
Exemple :
https://calendly.com/<YOUR_LINK> ? hide_event_type_details=1
Masquer la bannière de cookies
Calendly affiche une bannière de cookies par défaut. Si vous le masquez, assurez-vous que votre site gère les lois sur les cookies telles que le RGPD ou le CCPA.
Pour masquer la bannière de cookies :
- Sélectionnez Masquer la bannière de cookies avant de copier votre code d'intégration
Si vous avez déjà intégré Calendly :
- Ajoutez
? hide_gdpr_banner=1à votre lien Calendly
Exemple de code intégré :
<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_EVENT?hide_event_type_details=1&hide_gdpr_banner=1"
style="min-width:320px;height:630px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>Changer les couleurs et le libellé des boutons
Si vous avez un abonnement payant, vous pouvez mettre à jour l'apparence de votre intégration en modifiant la couleur d'arrière-plan, la couleur du texte, la couleur du bouton ou l'étiquette du bouton (disponible uniquement pour l'intégration Pop-Up). Vous pouvez le faire en copiant votre code ou en modifiant votre code d'intégration existant.
Options disponibles :
-
background_color— Définit l'arrière-plan derrière le module intégré -
text_color— Modifie la couleur du texte -
primary_color— Met à jour la couleur du bouton et du lien -
button_text— Remplace l'étiquette par défaut du bouton « Planifier »
Conseil d'accessibilité
Le texte du bouton « Planifier » passera automatiquement au noir ou au blanc en fonction de la couleur de votre choix, ce qui assurera un meilleur contraste et une meilleure lisibilité.
Exemple :
<!-- Calendly badge widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"
async>
</script>
<script type="text/javascript">
window.onload = function() {
Calendly.initBadgeWidget({
url: 'https://calendly.com/<YOUR LINK>',
text: 'Your Button Text Here',
color: '#0069ff',
textColor: '#ffffff'
});
}
</script>
<!-- Calendly badge widget end -->Besoin d'aide pour choisir des couleurs ? Essayez un vérificateur de contraste pour vous assurer que vos choix sont accessibles.
Modifier la position du widget
Lorsque vous utilisez notre code d'intégration de widget contextuel, l'emplacement par défaut du widget sera en bas de la page web aligné sur le coin droit. Pour modifier l'alignement à gauche ou au centre de votre page, ajoutez l'un des codes CSS suivants. Ensuite, ajustez les entrées gauche et droite jusqu'à ce que vous arriviez à l'espacement souhaité.
Gauche :
<!-- left align the badge widget -->
<style type="text/css">
.calendly-badge-widget {
right: auto ! important;
left: 20px ! important;
}
</style>
<!-- end left align the badge widget -->Centre :
<!-- center align the badge widget-->
<style type="text/css">
.calendly-badge-widget {
left: 50% ! important ;
margin-left : -100px ! important;
}
</style>
<!--end center align the badge widget-->Prévisualisez et ajustez votre intégration
- Testez les mises en page mobiles et de bureau
- Utilisez l'outil Inspect de votre navigateur (sélectionnez avec le bouton droit de la souris > Inspecter) pour essayer les modifications
- Ajustez la largeur et la hauteur jusqu'à ce que l'intégration corresponde à votre site