How to add Calendly to an Unbounce site

Before you begin...

  • During setup, you’ll switch between Calendly and Azure. It’s best to keep each platform open in a separate browser window.

Add Calendly to an Unbounce site

  1. Sign in to Unbounce.
  2. To open the page you want to edit, select the gear icon next to the page name and select Edit Champion Variant.
  3. Hover over the menu options to the left of the window to locate Custom HTML, then, click and drag the button onto the page.
  4. To copy the embed code for your booking page, from your Home page select the gear icon on the right side of the page to expand the menu, then select Add to Website.


  • Alternatively, to copy the embed code for a specific event type, locate your preferred event type and select Share then select Add to Website.
  1. Choose how you want to add Calendly to your site


  1. Once you have adjusted your embed settings, select Copy Code.
  2. Return to Unbounce and paste your code into the blank field and select Save Code.
  3. Click and drag or resize the placeholder into position.
  4. Select Preview to ensure the Calendly works as expected.

NOTE: If you've applied an Unbounce theme to your website, it may affect the way Calendly appears on your site.