Embed formitable widget

Widget API

Enter the 8 digit ID of your restaurant and generate the embed code for your website.

No account yet but want to have a look?
Use 9e40ea96.

Embed code for {{ctrl.restaurant.name}}

Paste this code inside the <body> tag of your website.

                    copy
                    
  1. <script> (function (d, s, id, h) { var ftjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; var js = d.createElement(s); js.id = id; js.src = "https://cdn.formitable.com/sdk/v1/ft.sdk.min.js"; h && (js.onload = h); ftjs.parentNode.insertBefore(js, ftjs); }(document, 'script', 'formitable-sdk', function () { FT.load({{ctrl.getModules()}}); })); </script>
  2. <div class="ft-widget-b2" data-restaurant="{{ctrl.widget.uid}}" data-open="{{ctrl.widget.open}}" data-open-mobile="{{ctrl.widget.openMobile}}" data-color="{{ctrl.widget.color}}" data-language="{{ctrl.widget.language}}" data-tag="{{ctrl.widget.tag}}" data-toolbar="{{ctrl.widget.toolbar}}" data-toolbar-mobile="{{ctrl.widget.toolbarMobile}}"></div>

Options

With these options you can configure the behavior and appearance of your widget.

data-open

bool / number

Open the widget on page load.
Or set a delay in milliseconds

data-open-mobile

bool / number

Open the widget on page load on mobile devices.
Or set a delay in milliseconds

data-color

string

Widget accent color (HEX / RGB)

data-language

string

Widget language
Possible values: "nl", "en"

data-tag

string

Track the source of your reservations.

data-toolbar

boolean

Generate toolbar in your website to control widget

data-toolbar-mobile

boolean

Generate toolbar in your website on mobile devices to control widget

Modules

You can enable modules to add extra functionality to the Formitable book widget and SDK. When you change this setting, be sure to grab the new embed script above.

Analytics

Anchors

Use anchors as href in <a>-tags to control the widget.

#ft-open

Show the widget

#ft-close

Hide the widget

#ft-toggle

Show or hide the widget

#ft-openShop-[productType]

Open the shop for a specific product type
Possible values: "vouchers"

#ft-openTicket-[ticketUid]

Open a specific ticket

#ft-openProduct-[productUid]

Open a specific product

Methods

Use methods to control the widget.

FT.parse(callback?: function)

Renders all widgets and anchors. Parsing occurs automatically on pageload. Callback is optional and will be called when widgets are ready.

FT.widgets.all()

Returns all widgets rendered on website.

FT.widgets.get(id?: string)

Returns widget object. Id is optional and only necessary when using multiple widgets on your website. You can call the methods below on the widget object. For example: FT.widgets.get().open();

open()

Shows widget

close()

Hides widget

toggle()

Shows or hides widget

openShop(productType: string)

Opens shop for a specific product type
Possible values: "vouchers"

openTicket(ticketUid: string)

Opens a specific ticket

openProduct(productUid: string)

Opens a specific product

Events

Use events in your website to respond to actions in your widgets. You could for example redirect to a specific page in your website when a guest has finished a booking.

ft-widget-ready

Occurs when widget is rendered and ready to call

event.detail:
object

Custom data in event object

widgetUid:
string
Identifier when using multiple widgets

ft-widget-open

Occurs when widget is opened

event.detail:
object

Custom data in event object

sender:
string
Initiator of the event. Possible values: init, widget, toolbar, script, anchor
widgetUid:
string
Identifier when using multiple widgets

ft-widget-close

Occurs when widget is closed

event.detail:
object

Custom data in event object

sender:
string
Initiator of the event. Possible values: init, widget, toolbar, script, anchor
widgetUid:
string
Identifier when using multiple widgets

ft-widget-navigated

Occurs when a user has navigated to another page

event.detail:
object

Custom data in event object

page:
string
Page that was navigated to
products:
product[]

Only available when page is ticket, checkout or finish

uid:
string
unique identifier of the product
type:
string
producttype (voucher / ticket)
title:
string
title of the product
amount:
number
amount of single item
quantity:
number
quantity of the item
widgetUid:
string
Identifier when using multiple widgets

ft-widget-ordered

Occurs when user has finished a reservation / order succesfully

event.detail:
object

Custom data in event object

order:
Order

Products can be empty for reservations without ticket

uid:
string
unique identifier of the order
totalAmount:
number
total amount of the order in EUR
products:
product[]
array of products in order
widgetUid:
string
Identifier when using multiple widgets

Analytics Module

If you enable the Analytics module, Formitable will automatically hook into the widget's events to register user statistics in Google Analytics and Facebook Business Manager. Measure campaign conversion easily by setting up targets on these events and pageviews.
All activity will automatically be tracked if you use Facebook Pixel (fbq) and gtag (gtag) or analytics.js (ga) for Google Analytics. Please update your Analytics tag if you are using older versions.

If you activate enhanced eCommerce in your Google Analytics account, revenues and advanced product performance will also be tracked. Please make sure you set currency to EUR.

Widget open

Event

Custom event in Google Analytics

action: open
category: widget
label: [sender]

Widget close

Event

Custom event in Google Analytics

action: close
category: widget
label: [sender]

Widget navigated

Pageview /ft/widget/[page]
Events
(enhanced eCommerce)

When navigated to pages Ticket and Checkout the events below will be registered

Ticket: detail, view_item
Checkout: add, checkout, add_to_cart, begin_checkout

Widget ordered

Events
(enhanced eCommerce)
addProduct, purchase

For these events to be registered you need to implement the Facebook Pixel in your website (fbq)

Widget navigated

Pixel Events

When navigated to pages Ticket and Checkout the events below will be registered

Ticket: ViewContent
Checkout: AddToCart, InitiateCheckout

Widget ordered

Pixel Events Purchase

Join the club

14 days free

Switch

There are no initial costs and the first 14 days are a gift from us! Request a trial account and you can start immediately.

Try for free

How does switching work?

Easy to set shifts & tables
Reservations are imported
Easy to install widget