Integrate your schedule into an iframe on your Facebook page
The tutorial below explains how to integrate your SuperSaaS schedule into a frame on your Facebook page. The iframe allows users to access your schedule without leaving your Facebook page. If you would rather integrate the schedule by adding a “Book Now” button then you can follow the tutorial to add a Book Now button to your Facebook Page.
What do you need for the integration?
- A Facebook business page
- A SuperSaaS subscription and SSL secure account with at least one schedule
Add your SuperSaaS schedule into an iframe on your Facebook page
Log in to your Facebook business page
Open another window in your browser and go to: apps.facebook.com/static_html_plus/
-
Select Add Static HTML to a Page
-
If you have multiple Facebook business pages, first select the page that you want to use to integrate the schedule, then click Add Static HTML: iframe tabs.
-
The Static HTML tab will now appear on your Facebook business page.
-
To edit the HTML tab click on the settings tab and choose apps from the column on the left.
-
Select the iframe tab you wish to edit and click on edit settings.
-
You can now change the default text Welcome to a text of your choice, for example Book Now. Click
and then click .
-
Repeat step 7 again to change the default star image. This time, click on “Change”, next to Custom tab image:. This will take you to a new page where you can upload an image. Hover over the star image and click “Edit”.
-
A pop-up will open where you can select an image from your computer, it must be 111 × 74 pixels.
You can download and use one of the examples below (right-click and choose ‘Save as…’) or create you own button.
-
A preview of the picture will appear without any option to save it. However, when you navigate back to your Facebook page using the search function, you will find the picture on your Facebook page.
-
Now that all styling has been done, we can integrate an iframe into the page. Click on your newly created “Book now!” button (the Static HTML tab). Then click on edit tab. Alternatively you can find the button among your apps on the left-hand side of your page.
-
Go to the section Free apps and choose the Website app for a quick integration (it’s also possible to work with the HTML app instead).
-
Paste the schedule URL into the URL of external page field; remove the scrollbars to scale the schedule to fit into the page and click . Click on the to see a preview of your website.
https
instead of http
)
Using a leadgate to stimulate visitors to like your Facebook page
Once you’ve integrated your schedule into your Facebook page, the Static HTML app offers you the opportunity to create a leadgate. If you enable a leadgate then people will be presented with a popup that captures their information before they get to see the frame with your schedule.
-
When you view the static HTML app in admin mode, click on the Edit tab. Now click on Leadgate.
-
Select
, enter a message for your visitors and click .