What can I use this for?
If you wish to integrate a calendar into your Hub, you can use iFrame. In this article, we will show how to embed a Tockify calendar in Membership.io as an example.
Step 1 - Prepare your calendar iFrame
To begin, get the URL for your calendar or event from the Tockify calendar editor. Once you're there, click View Calendar.
A new browser tab will open. This is the URL that we need to copy.
Next, go to any iFrame generator website. Enter the URL you just copied and then click Generate.
Step 2 - Embed your iFrame code
Now that you have the code, go to the Hubs tab in your Membership.io account and open the Hub Editor for the Hub where you want to embed code.
Open or create the Hub page where you want to embed your code.
Then, create a new Layout Section and add an Embed Code element.
From here, click the Import Code button to paste your iFrame embed code into the element. Click Confirm to complete the process.
Finally, customize the look of your embedded calendar from the Styling tab.
Once you're satisfied with the styling, save your changes.
NOTE: Be careful when adjusting the height and width in your embed code, as the calendar may appear cut off. This is usually caused by height/width being manually set on the Styling option, which doesn't adjust to the content inside the calendar.
Here's a quick demo of how to fix it:
This is what the embedded calendar looks like on the Hub:
And that's it! You can apply the same steps if you need to embed other calendars.