Reservation widget | Formitable
Formitable, Zenchef and Resengo unite to shape the future of dining as Zenchef in 2024
Find out more ›
MENU expand_more
×
{{ctrl.getBookATableTranslated()}}

Widget API

Enter the 8 digit ID of your restaurant or multi-venue group.

No account yet but want to have a look?
Use 67e30298.

menu
Widget API
Change restaurant

{{ctrl.restaurant.name}}

{{ctrl.group.name}}

{{ctrl.widget.uid}}

Embed code

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>
                             



                            
  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-group="{{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: "auto", "ca", "da", "de", "en", "es", "fr", "nb", "nl" or "sv"

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
Because you are configuring a multi-venue widget all anchors should be preceded by a restaurantUid if you want to open the restaurant's widget like explained in the Multi-Venue paragraph below.

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-parse-<restaurantUid>

Reload the widget for another restaurant
Example: #ft-parse-a1b2c3d4

#ft-openShop-<productType>

Open the shop for a specific product type
Possible values: "vouchers", "takeaway"
Example: #ft-openShop-takeaway

#ft-openTicket-<ticketUid>

Open a specific ticket
Example: #ft-openTicket-a1b2c3d4

#ft-openTakeaway-<takeawayProductUid>

Open a specific takeaway product
Example: #ft-openTakeaway-d4c3b2a1

#ft-openProduct-<productUid>

Open a specific gift-voucher
Example: #ft-openProduct-a1b2c3d4

Multi-venue

All anchors can be preceded by a restaurantUid to select a location to execute the anchor call. A few examples below:

#ft-a1b2c3d4-open

Open the reservation widget for another location

#ft-a1b2c3d4-openTicket-a1b2c3d4

Open a ticket for another location

#ft-a1b2c3d4-openShop-takeaway

Open the takeaway shop for another location

Methods

Use methods to control the widget.

FT.parse(callback?: function)

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

FT.widgets.get()

Returns widget object. You can call the methods below on the widget object.
Example: FT.widgets.get().open();

open()

Shows widget

close()

Hides widget

toggle()

Shows or hides widget

parse(restaurantUid: string, callback?: function)

Reload the widget for another restaurant. Callback is optional and will be called when widget is ready. Widget object w is available.
Example: FT.widgets.get().parse('a1b2c3d4', (w) => {
   w.open();
});

openShop(productType: string)

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

openTicket(ticketUid: string)

Opens a specific ticket

openTakeaway(takeawayProductUid: string)

Opens a specific takeaway product

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
reservation:
Reservation

Object with reservation data

uid:
string
 unique identifier of the reservation
bookingDateTime:
date
 date and time of the start of reservation
culture:
string
 language of reservation: 'nl' / 'en'
numberOfPeople:
number
 partysize of reservation
source:
string
 tag of widget that generated the reservation
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 pageviews and e-commerce events in Google Analytics and Facebook Business Manager. Measure campaign conversion easily by setting up targets on these events and pageviews or by connecting Google Ads to your e-commerce transactions in Google Analytics. For more info, check our Analytics Guide

All activity will automatically be tracked if you use Facebook Pixel (fbq) and gtag (gtag.js) or analytics.js (ga) for Google Analytics. Please check our Analytics Guide to see more settings and examples, and instructions to set up Google Tag Manager.

If you activate enhanced e-commerce 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