Please note that the option to integrate your schedule into an iframe is no longer supported by Facebook. You can however still add a “Book now” button to your Facebook page. You can add the button by following the tutorial Add a book now button to your Facebook Page.

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

  1. Log in to your Facebook business page

  2. Open another window in your browser and go to:

  3. Select Add Static HTML to a Page

    Add Static HTML
  4. 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.

    Select page
  5. The Static HTML tab will now appear on your Facebook business page.

  6. To edit the HTML tab click on the settings tab and choose apps from the column on the left.

    Edit settings
  7. Select the iframe tab you wish to edit and click on edit settings.

    Edit settings
  1. You can now change the default text Welcome to a text of your choice, for example Book Now. Click Save and then click OK.

Change text
  1. 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”.

Click change
Click edit
  1. 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.

Select an image
Button 1 Button 2 Button 3
  1. 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.

Preview and navigate back to your page
  1. 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.

    Click on the new book now button
  2. 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).

    Choose website
    Copy and paste the schedule URL
  3. 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 Save & publish. Click on the Preview tab to see a preview of your website.

For the iframe to display correctly on a Facebook page you will need to enable “SSL” in your SuperSaaS account. You can switch on SSL inside your SuperSaaS account on the Access Control page. (This means the link to your schedule will change to start with https instead of http)
If you don’t want to show the schedule in an iframe, where it is constrained to the 800 pixel width of the Facebook page, you could use a button or a link to the schedule instead, so the schedule will appear in its own browser window. (In that case SSL in not required either.)

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.

  1. When you view the static HTML app in admin mode, click on the Edit tab. Now click on Leadgate.

    Go to fangate
  2. Select Enable leadgate, enter a message for your visitors and click Save & publish.

    Enter a message for visitors