Skip to main content

How to embed Calendly in your guide

Drop Calendly into any section of your Touch Stay guidebook so guests can book a time with you, for example for a check-in call, a tour or another service.

Table of contents:

Step by step: How to add Calendly to your Touch Stay guidebook

Open Custom Elements and click New Custom Element:

  • New Hub: Account library → Custom Elements in the left sidebar (multi-account owners: Content Hub → Custom Elements)

  • Legacy Hub: Settings → Custom Elements

Select Calendly as the Third Party Service. An Element code name will be generated. This is the code that you will insert in your guide where you want Calendly to show. You can change the name to whatever you wish to make it easier to identify each custom element you add. Only letters, numbers, underscores or hyphens can be used - no special characters or spaces.

Next, copy the share link for your Calendly page or event (it starts with https://calendly.com/). You'll find it under the sharing options in your Calendly account. Paste the link into the Calendly link box in Touch Stay (it's labelled Calendy Link) and click Save. Only the link is accepted, not Calendly's embed code.

To insert Calendly into your guide, open the topic you want to add it to (new Hub: open the guidebook and go to the Guidebook Content tab; legacy Hub: Content Hub). Put your cursor where you want Calendly to appear. Click Custom Element in the editor toolbar, select the relevant element code name from the dropdown and click Insert. Then save the topic (new Hub: Save Changes; legacy Hub: Save).

Insert custom element
Custom element in topic

This will place your custom element code into your topic content, and when you preview the guide it will be replaced by your Calendly booking page.

Trouble Shooting FAQs

My link isn't being accepted when creating my custom element, what should I do?

If your link isn't being accepted then the most likely reason is that it's the wrong link. Calendly offers a few different sharing options and we just need the basic share link, starting with https://calendly.com/. Embed code isn't accepted. If this still doesn't work, or you can't find it in your Calendly account, then please contact support and send us a screenshot of the Calendly share options that are available to you.

My calendar doesn't display fully or has lots of empty space beneath it, what should I do?

Calendly will be added to your guide using what's known in web development as an iframe. This technique creates a window in your guide to Calendly. However, the window isn't able to detect the size of the source page and you may wish to adjust the height of the window to better match your calendar. Open Custom Elements (see the path above), use the 3 dots menu next to the element and select View/Edit, then adjust the Standard element height. You may find it useful to have your guide preview open in a separate tab so you can refresh the page after changing the height in case it needs further adjustment.

Edit height

Can I have a different variation of the calendar for each of my guides?

On the legacy Hub, yes. Go to Guides and click the name of the guide. Scroll down to the Guide Custom Elements card at the bottom of the Guide details page and click Edit. In the Edit Custom Elements (this guide only) window, paste the Calendly link for this guide and adjust the element height as needed. This card only appears if you have more than one guide and at least one Custom Element.

The new Hub doesn't have a per-guide screen yet, so you can't see or edit per-guide values there. Values you already set per guide in the legacy Hub still apply to that guide. To change them, switch back to the legacy Hub (see How to switch between the new and legacy Hub). Note that if you're an owner, admin or team admin, switching to the legacy Hub also turns Guidebook 2.0 off.


🤝 Need help?

Our Fin AI assistant is available 24/7 and typically responds in under 10 seconds. If Fin isn't able to solve your issue, our support team will take ownership of your case from there.

You can also reach out to our team at [email protected], and we'll be happy to help.

Did this answer your question?