Embed formitable widget

Widget API

Vul de 8 cijferige ID van je restaurant in en genereer de embed code voor je website.

Nog geen account maar wel alvast kijken?
Gebruik 9e40ea96.

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

Plaats deze code direct binnen de <body> tag van je 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>

Opties

Met deze opties stel je het gedrag en uiterlijk van de widget in.

data-open

bool / number

Open de widget wanneer de pagina laadt.
Of stel een vertraging in milliseconden in.

data-open-mobile

bool / number

Opent de widget wanneer de pagina laadt op mobiele apparaten.
Of stel een vertraging in milliseconden in.

data-color

string

Widget accentkleur (HEX / RGB)

data-language

string

Widget taal
Mogelijke waardes: "nl", "en"

data-tag

string

Identificeer waar je reserveringen vandaan komen.

data-toolbar

boolean

Genereer knoppen rechtsonder in de website om de widget te openen.

data-toolbar-mobile

boolean

Genereer knoppen rechtsonder in de website op mobiele apparaten om de widget te openen.

Modules

Je kunt modules activeren om extra functionaliteiten toe te voegen aan de widgets en SDK. Vergeet niet om de embed code op je website aan te passen als je hier iets verandert.

Analytics

Anchors

Gebruik anchors als href in <a>-tags om de widget aan te sturen.

#ft-open

Toon de widget

#ft-close

Verberg de widget

#ft-toggle

Toon of verberg de widget

#ft-openShop-[productType]

Opent cadeauwinkel voor producttype.
Mogelijke waardes: "vouchers"

#ft-openTicket-[ticketUid]

Toon specifiek ticket

#ft-openProduct-[productUid]

Toon specifiek product

Methods

Gebruik methods in bijv. click-events van buttons om de widget aan te sturen.

FT.parse(callback?: function)

Genereert alle widgets en anchor events. Generatie gebeurt automatisch wanneer de website geopend wordt. Callback is optioneel en wordt aangeroepen wanneer de widgets geladen zijn.

FT.widgets.all()

Retourneert array met alle gegenereerde widgets op website.

FT.widgets.get(id?: string)

Retourneert het widget-object. Id is optioneel en alleen noodzakelijk wanneer er meerdere widgets op een website bestaan. Je kunt onderstaande methodes aanroepen op het widget-object. Bijvoorbeeld: FT.widgets.get().open();

open()

Toon widget

close()

Verberg widget

toggle()

Toon of verberg widget

openShop(productType: string)

Opent cadeauwinkel voor producttype.
Mogelijke waardes: "vouchers"

openTicket(ticketUid: string)

Toon specifiek ticket

openProduct(productUid: string)

Toon specifiek product

Events

Gebruik events in je website om te reageren op gebeurtenissen in de widget. Je kunt bijvoorbeeld een bepaalde pagina in je website tonen wanneer een reservering gemaakt is. Of je eigen statistieken registreren.

ft-widget-ready

Vindt plaats wanneer de widget is gegenereerd en klaar om aangeroepen te worden

event.detail:
object

Specifieke data in event object

widgetUid:
string
Identificator voor gebruik met meerdere widgets

ft-widget-open

Vindt plaats wanneer widget wordt geopend

event.detail:
object

Specifieke data in event object

sender:
string
Initiator van het event. Mogelijke waardes: init, widget, toolbar, script, anchor
widgetUid:
string
Identificator voor gebruik met meerdere widgets

ft-widget-close

Vindt plaats wanneer widget wordt gesloten

event.detail:
object

Specifieke data in event object

sender:
string
Initiator van het event. Mogelijke waardes: init, widget, toolbar, script, anchor
widgetUid:
string
Identificator voor gebruik met meerdere widgets

ft-widget-navigated

Vindt plaats wanneer naar een pagina wordt genavigeerd

event.detail:
object

Specifieke data in event object

page:
string
Pagina waarnaar genavigeerd is
products:
product[]

Alleen beschikbaar indien naar ticket, checkout of finish wordt genavigeerd

uid:
string
unieke identificator van het product
type:
string
producttype (voucher / ticket)
title:
string
naam van het product
amount:
number
prijs van enkel product
quantity:
number
hoeveelheid van het product
widgetUid:
string
Identificator voor gebruik met meerdere widgets

ft-widget-ordered

Vindt plaats wanneer een succesvolle order of reservering heeft plaatsgevonden

event.detail:
object

Specifieke data in event object

order:
Order

Products kan leeg zijn voor reserveringen zonder ticket

uid:
string
unieke identificator van de order
totalAmount:
number
totaalbedrag van de order in EUR
products:
product[]
array van producten in order
widgetUid:
string
Identificator voor gebruik met meerdere widgets

Analytics Module

Als je de Analytics module activeert, zal Formitable automatisch reageren op events van de widget om statistieken te registreren in Google Analytics en Facebook Business Manager. Je kunt gemakkelijk conversie meten van campagnes door doelen in te stellen op deze pageviews en events.
Statistieken worden automatisch bijgehouden als je gebruik maakt van Facebook Pixel (fbq) voor Facebook en gtag (gtag) of analytics.js (ga) voor Google Analytics. Als je oudere versies gebruikt van Google Analytics dien je je tag te updaten.

Wanneer je enhanced eCommerce activeert in je Google Analytics account, zal eveneens omzet en specifieke productconversies gemeten worden. Let erop dat de valuta staat ingesteld op EUR.

Widget open

Event

Specifieke gebeurtenis in Google Analytics

action: open
category: widget
label: [sender]

Widget close

Event

Specifieke gebeurtenis in Google Analytics

action: close
category: widget
label: [sender]

Widget navigated

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

Wanneer naar Ticket of Checkout wordt genavigeerd zullen onderstaande gebeurtenissen worden geregistreerd

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

Widget ordered

Events
(enhanced eCommerce)
addProduct, purchase

Om deze events te meten dien je de Facebook Pixel (fbq) op je website te installeren.

Widget navigated

Pixel Events

Wanneer naar Ticket of Checkout wordt genavigeerd zullen onderstaande gebeurtenissen worden geregistreerd

Ticket: ViewContent
Checkout: AddToCart, InitiateCheckout

Widget ordered

Pixel Events Purchase

Join the club

14 dagen gratis

Overstappen

Er zijn geen opstartkosten en de eerste 14 dagen krijg je van ons cadeau! Vraag een proefaccount aan en je kunt meteen starten.

Gratis proberen

Hoe werkt overstappen?

Makkelijk shifts & tafels instellen
Reserveringen worden geïmporteerd
Widget eenvoudig installeren