Skip to content
Contact sales
  • There are no suggestions because the search field is empty.

How to add a Calendly scheduling page to your flipbook

Let readers book meetings without leaving your publication

Table of contents

 

Overview

Sending a reader to another page to book a meeting is where many prospects drop off. By adding a Calendly scheduling page directly to your flipbook, readers pick a time and book in one click, without ever leaving your publication.

Here is a live flipbook with a Calendly scheduler added to it, set up exactly the way this article describes. It opens on the page holding the booking button, so click through and try booking a slot.

It's ideal for sales decks, digital brochures, and catalogs where the next step is a conversation with your team.

Requirements

  • Plan: Embedding content in a flipbook is available on the Enterprise plan.
  • Access: Edit rights on the flipbook in Design Studio.
  • A Calendly account with at least one event type.

Use cases

  • Sales materials: a "Book a demo" button on the last page of a pitch deck.
  • Product catalogs: let buyers schedule a consultation next to a featured product.
  • Training materials: offer a booking slot for a live onboarding session.

Which embed option should you choose?

You can add Calendly to a flipbook in two ways. We recommend the pop-up for the best reading experience.

  • Pop-up (recommended): a button on the page opens Calendly in a large overlay. The scheduler gets plenty of space, so it stays easy to read and use on any screen.
  • Inline: the scheduler sits directly on the page inside an embed element. It works, but the fixed page dimensions can make the calendar feel cramped.

How to get your Calendly embed code

1. In Calendly, go to Scheduling and open the Event types tab. Click the three dots next to the event type you want to share, then select Add to Website.

2. Calendly asks how you want to add it to your site and offers three options: Inline embed, Popup widget, and Popup text. Choose Inline embed, then click Continue.

Note: Pick Inline embed even if you plan to use the pop-up method in Flipsnack. Calendly's own pop-up options rely on a floating button or text link placed on a web page, which won't render correctly in a flipbook.

Flipsnack provides its own pop-up, and it expects the inline code.

3. Adjust the Booking Page Settings if you like, then click Copy Code. You will get a snippet made of a div and a script tag:

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/your-link" style="min-width:320px;height:700px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->

Tip: Before pasting into Flipsnack, change the size in the code from min-width:320px; height:700px to min-width:100%; height:100% so the scheduler fills its container. See Make the scheduler responsive.

Add Calendly as a pop-up (recommended)

1. In the Design Studio, add or select the element that will open the scheduler (for example a "Book a meeting" button).

2. Open the Interactions tab, and with the element selected, set the Action to Popup frame.

3. Add a Tooltip (such as "Click to view"), then paste your Calendly code into the Popup frame code box.

4. In the pasted code, set the size to min-width:100%;height:100% so Calendly fills the pop-up.

5. Leave Open popup automatically off so it opens on click. Preview the flipbook and run a test booking.

Embed Calendly inline on a page

1. In the Design Studio, open the Interactions tab and, under Embeds, click Embed code.

2. Place the element on the page, then paste your Calendly code into the Embed code box on the left Properties bar. Set the size to min-width:100%;height:100%, then resize the element on the page to give the calendar enough room.

3. (Optional) Add a Cover image as a placeholder for PDF/JPG/PNG downloads, and enable Load content on click so the scheduler loads only when clicked, which keeps the flipbook fast.

Make the scheduler responsive

Calendly's default code uses a fixed height, which can look cramped in a flipbook. To let it adapt to the available space, change the style values to 100%:

Replace style="min-width:320px; height:700px;" with style="min-width:100%; height:100%;"

That value sits in the div at the start of the snippet, not in the script tag.

Combined with the pop-up method, this gives readers a full-size, easy-to-use scheduler on both desktop and mobile.

For tighter control on small screens, you can use height:80vh instead of 100%. On smaller devices the scheduler may still be taller than the available space, so readers might need to scroll inside the pop-up to reach the confirmation button.

That is normal, and testing on a phone before you publish is worth the extra minute.

Advanced: a floating booking button via GTM

If you want a persistent "Schedule time with me" bubble on your published flipbook instead of a per-page button, add Calendly's pop-up widget script through Google Tag Manager.

1. In Calendly, open Add to Website and choose Popup widget. Set the Button Text under Popup Widget Settings, then click Copy Code. The snippet loads Calendly's widget assets and initializes a badge widget:

<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: 'Schedule time with me', color: '#0069ff', textColor: '#ffffff', branding: true }); }</script>

2. In Google Tag Manager, create a New tag and choose Custom HTML as the tag type.

3. Paste the copied Calendly script into the HTML box.

4. Set the trigger to fire on All Pages (or your published flipbook page), save, and Publish the GTM container.

Note: GTM must first be connected to your flipbook player. See the guides below.


Troubleshooting

The scheduler doesn't appear: confirm you pasted the full inline embed code (the div plus the script tag) and that the flipbook is published with public or unlisted visibility. Private flipbooks restrict embedded content.

The calendar looks cut off: set the code size to 100% and, for inline, enlarge the embed element on the page, or switch to the pop-up method.

Your test booking created a real meeting: it will, and it emails the invitee too. Cancel it from Meetings in Calendly, or set up a throwaway event type for testing.

Colour changes are not showing: the colour pickers in Booking Page Settings only apply on Calendly's paid plans.

Frequently asked questions

Which option is best? The pop-up, because it gives Calendly the most space and stays readable on any device.

Can readers book from a phone? Yes. The pop-up scheduler works in the flipbook player on desktop and mobile.

Do I need a paid Calendly plan? No. Embedding works on every Calendly plan, including the free Basic plan. Only the colour customization in Booking Page Settings is limited to paid plans.

What about Calendly's Popup widget and Popup text options? Those are built for regular web pages. Popup widget adds a floating button and Popup text adds a clickable text link, and both need their script running on the page itself. Inside a flipbook, use Flipsnack's own pop-up with the inline code instead. The Popup widget code is the one exception, and it is what the GTM method further down uses.

Does this work with other tools? Any service that provides an iframe embed code can be added the same way.

Next steps

Need help setting up your Calendly embed?

Our team is here to help. Connect with our team experts via the in-app chat for personalized assistance!