1. Help Center
  2. Integrations & Apps
  3. Embed Options

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:

  1. Before copying your embed code, select Hide Event Details
    • Works for both inline and pop-up embeds
  2. Select Copy Code.
  3. Paste the code into your website’s HTML.

If you already embedded Calendly: Add these query parameters to your Calendly link:

Link type What to add
Event type ?hide_event_type_details=1
Landing or team page ?hide_landing_page_details=1

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

Example:

https://calendly.com/<YOUR_LINK>?hide_event_type_details=1

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 (only available for Pop-Up embed). 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

Accessibility tip

The “Schedule” button text will automatically change to black or white based on your chosen button color, ensuring better contrast and readability.

Example:

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

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
Was this article helpful?