There is an updated version available of this page

Tutorial: Integrate a schedule into your Facebook page

This tutorial explains how to integrate a SuperSaaS schedule into you Facebook page, allowing your customers to book without leaving Facebook. This method does not use the Facebook log in, so if you want users to register they will be asked to do so as part of the process.

What do you need for the integration?

Add a SuperSaaS schedule in an iframe on your Facebook page

  1. Log in to your Facebook business page

  2. Open another window in your browser and go to: apps.facebook.com/static_html_plus/

  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). and click on edit tab. Alternatively you can find the button amongst your apps on the left hand side of your page.

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

    Preview Preview
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 Preview