Watch our short video above, or follow the written instructions below, for how to embed a bookable event on your website.
You'll soon be able to use a Share option in the Actions dropdown next to your Bookable Event to get the embed code. For now, if you want to embed your Bookable Event we recommend using our legacy iframe code, replacing the src URL with the inline version of your Bookable Event. Don't worry if that sounds complicated - just follow the 4 steps below 🙂
Step 1 - Copy the Legacy Code Below
<iframe id="bookable-event" src="https://tave.com/my-studio-inline/schedule/call" width="100%" height="1100px" frameborder="0" scrolling="no"></iframe>
Step 2 - Get the Embeddable Link (the Inline URL) for Your Bookable Event
To get this inline URL, head to Scheduling › Bookable Events and use the Actions dropdown here next to your Bookable Event to get the Embeddable Link:
Clicking the Embeddable Link will open your Bookable Event in a new tab showing the inline URL you need (the URL will contain -inline). Copy the whole URL from that new tab:
Step 3 - Replace the src URL in the Legacy Code With Your Embeddable Link
You'll then be able to replace the src URL in the legacy code you copied in step 1, with the embeddable link for your Bookable Event you copied in step 2.
Replace this URL here in the legacy code:
With the URL you copied from that new tab (your Bookable Event's Embeddable Link):
Step 4 - Embed Your Bookable Event on Your Website
You'll now have the correct iframe code to add to your website, to embed your Bookable Event. This legacy code uses a fixed height of 1100px but feel free to adjust that in the iframe code if you need more or less height on your embedded bookable event.
IMPORTANT: You’ll need to have access to the html source code of the page you’re embedding this on. So you’ll need to look for something along the lines of “Edit HTML” or “Insert HTML”.
You can repeat this process to get the code to embed any of your Bookable Events or Mini Sessions!