How to customize your embed

Customize your Calendly embed to match your site—hide event info, remove the cookie banner, change colors, and adjust widget placement.

Hide event details

You can hide personal or event information so it doesn’t show twice on your site.

What's hidden:

• Your photo
• Your name
• Event duration
• Event location
• Event description

To hide event details when creating your embed:

• Select Hide Event Details
• Works for both inline and pop-up embeds

If you already embedded Calendly: Add this to your Calendly link:

Note: If you use both, the event type description may still show.

Hide the cookie banner

Calendly shows a cookie banner by default. If you hide it, make sure your site manages cookie laws like GDPR or CCPA.

To hide the cookie banner:

• Select Hide Cookie Banner before copying your embed code

If you already embedded Calendly:

• Add ?hide_gdpr_banner=1 to your Calendly link

Example embed code:

<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>

Change colors and button text

If you’re on a paid plan, you can update your embed’s look and feel by changing the background color, text color, button color, or button label. You can do this when copying your code or by editing your existing embed code.

Available options:

• background_color — Sets the background behind the embed

• text_color — Changes the color of the text

• primary_color — Updates the button and link color

• button_text — Replaces the default “Schedule” button label

Example:

<div 
class="calendly-inline-widget" 
data-url="https://calendly.com/your-link" 
style="min-width:320px;height:630px;" 
data-background-color="#1A1A1A" 
data-text-color="#FFFFFF" 
data-primary-color="#FF0020" 
data-button-text="Book now">
</div>

Need help picking colors? Try a contrast checker to make sure your choices are accessible.

Change the position of the widget

When using our pop-up widget embed code, the default placement of the widget will be the bottom of the webpage aligned to the right corner. To change the alignment to either the left or center of your page, add one of the CSS codes below. Then, adjust the left and right inputs until you arrive at your desired spacing.

Left:

<!-- 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 -->

Center:

<!-- 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-->

Preview and adjust your embed

• Test both mobile and desktop layouts
• Use your browser’s Inspect tool (right select > Inspect) to try changes
• Adjust width and height until the embed fits your site