The FRANK widget allows guests to make reservations or purchase gift vouchers directly from your website.
Before adding it to your website, you first need to configure the widget inside FRANK and then place the embed code on your website.
01 Setting up your widget in FRANK
Before you embed the code onto your website, make sure the widget is set to your liking. First, make sure the widget buttons are set to the color of your brand:
Set the color of your widget buttons
In FRANK, go to Settings → Restaurant
At color, select the color you'd like for the widget's buttons. You can give your widget any color you want to match your website. Use the color picker for data-color or enter a HEX color code yourself.
Once set, you can always view what it looks like via Settings → Widget
Next, make sure the widget is configured to your preference (e.g. do you want it to stay closed when someone enters your website or open right away?)
Set when the widget opens
Go to Settings → Widget
On this page, you can configure the widget and generate the widget code that you need to add to your Wix website.
Underneath widget options, you can customize the following:
Set whether the widget opens automatically when the page loads
Set whether the widget opens automatically on mobile devices
Hide or show the widget toolbar on desktop
Hide or show the widget toolbar on mobile
Set the widget language and unavailable time slots message
Go to Settings → Widget
Select the widget language
Set the message shown for unavailable time slots
You can choose one of the supported languages. Do you have a multilingual website? It is then best to set the language to Automatic. This way, the widget is displayed in the language in which the guest's browser is set.
02 Embed the FRANK widget code onto your website
Once you have set the widget to your liking, your adjustments are automatically copied into the code on the widget page. Therefore it's important to first customize your widget and only once you've done that copy the code.
Go to Settings → Widget → Copy code
Paste the code preferably for the closing body tag of every page where you want the FRANK widget to appear. It depends on the type of website you use whether the code automatically applies to all pages or not.
Don’t have access to your website’s source code? You can also add the widget using an HTML embed element if your website builder supports it.
03 Optionally: opening the FRANK widget via a button with anchor links
It is also possible to open the widget when a button is clicked on your website.
Besides embedding the FRANK widget on your website, you can also open the widget using buttons or links on your website. This is done using anchor links.
Anchor links allow you to trigger specific actions in the widget, such as opening the reservation screen or the gift voucher module.
Below you will find the available anchors and how to use them. You can also find this in FRANK → Widget → Widget anchors
Open the widget via a button
Use the following anchor to open the FRANK widget:
http://www.YOURWEBSITE.com/#frank-app-open
Close the widget via a button
Use the following anchor to close the FRANK widget:
http://www.YOURWEBSITE.com/#frank-app-open
Open the gift voucher shop via a button
Use the following code the open the FRANK gift voucher shop:
http://www.YOURWEBSITE.com/#frank-app-open-vouchers
Open the widget for a specific restaurant by using the restaurant uuid.
This is especially handy if you have multiple locations. Your restaurant's widget anchor is unique and needs to be copied directly from the FRANK widget paste, look for the code that looks like this:
