Introduction
Mozrest Widget allows you to display Mozrest Booking Engine to get real-time availability and get bookings from your diners.
The Widget allow multiple configurations to fit with your needs
Type of widgets
Mozrest provides two type of widgets:
1. Channel standardised widgets
These widgets doesn't allow UI customisations since their style is matching the Channel the user is coming from.
- Facebook widget
- Instagram widget
- Michelin Guide widget
- TripAdvisor widget
2. Customised widgets
These widgets allow UI customisations to make them match your brand.
On the Mozrest Hub analytics you can filter the booking by these custom widgets allowing you to analyse them as a separate channel.
Get Started
Mozrest provides a widget that can be used in two ways:
- Embed on iframe
- Used as a whole page - see example here
To use Mozrest Widget you will need a key and an identificator for the business location.
The Mozrest team will provide the key so you can start to use it right away.
The identificator can be provided in three different ways
- mzId: Business location Id on Mozrest system
- rpId: If you are a Reservation Portal, you can use your own id
- rmsId: If you are a Reservation Management System, you can use your own id
How to build the Widget URL
Base URL
https://widget.mozrest.com
Query parameters
| Parameter | Type | Default value | Description |
|---|---|---|---|
| mzId / rmsId / rpId | Mandatory | This value is the unique id of your business location. | |
| key | Mandatory | This value is the unique key allowing Mozrest to identify the custom widget. | |
| locale | Optional | Browser's locale | Language for the widget (ISO2 format) |
| showHeader | Optional | true | Indicates if the header with the business name and address is shown. |
| bgColor | Optional | #f4f4f4 | Page background color. Do not include the '#' on the value (ie. #999999 -> bgColor=999999) |
| bgBoxColor | Optional | #ffffff | Container box color. Do not include the '#' on the value (ie. #f4f4f4 -> bgBoxColor=f4f4f4) |
Customisation
Mozrest allows to customise other aspects of the widget that will affect globally independently of the channel (website, Facebook, Instagram, Michelin Guide, ...).
Three type of customisations are supported:
- Features
- Text customisation
- UI customisation
Features
| Feature | Description |
|---|---|
| Seating area | A venue can have multiple seating areas. To enable this feature, the venue must have the property "bookable_areas" enabled and have areas defined. The availability will be requested per area. |
| Payments |
Currently Mozrest support Stripe and Braintree. Supported features are:
The payment gateway configuration is defined at the venue level. The payment requirement can be defined at the slot level. |
| Additional requests | This feature will display a textarea for the diner to type a message. |
| Show geolocation |
If the widget has been install for a company, brand or a custom group, by default the widget displays a list of venues to search by name, and give you the possibility to type a location and shows you the 5 nearest venues to that location. The geolocation feature can be disabled and show just a list of venues. |
Texts customisation
The following texts can be customised:
| Text | Default value |
|---|---|
| Book CTA |
Default value: "Complete reservation" |
| Opt-in text |
Default value: "Sign me up to receive dining offers and news from this restaurant by email." |
| Pre-booking message |
A customised message per venue can be defined to be displayed before placing the reservation, above the Book CTA. Normally this message is used to notify some venue policies such a cancellation, etc... |
| Payment policies message |
If the payment feature is enabled, a personalized message with the payment policies can be defined per venue. |
| Confirmation title |
Once a booking has been placed, the title on the confirmation page can be customised Default value: "Booking confirmed" |
| Confirmation message |
Once a booking has been placed, the text on the confirmation page can be customised Default value: "Your booking has been confirmed. Shortly you will receive a confirmation email with the booking details." This value can be customised at two levels:
If a venue doesn't have a confirmation message defined, then the one at the RMS level applies. If none, the default message will be displayed. |
All customisable texts can be localised.
UI customisation
| Group | Properties | Notes |
|---|---|---|
| Fonts |
fonts_additional_url font_header font_body font_button |
fonts_additional_url allows to set a full google fonts url |
| Global texts |
body_font_size body_font_weight |
|
| Background and style |
bg_color bg_box_color box_border_width box_border_color |
|
| Header |
show_header title_color title_font_weight title_font_size subtitle_font_weight subtitle_font_size subtitle_color |
|
| Steps |
icons_bg_color icons_text_color bg_icon_disable_color bg_icon_disable_text_color steps_line steps_line_active steps_border_width steps_border_color steps_border_color_active |
|
| Filters |
filters_font_size filters_font_weight filters_font_color |
|
| Selector |
select_bg select_text_color select_border_width select_border_color |
|
| Buttons |
buttons_bg_color buttons_text_color buttons_text_color_hover button_bg_hover_color |
|
| Slots |
slots_bg_color slots_border_color slots_border_width slots_bg_disabled slots_bg_hover slots_text_color slots_text_color_hover slots_bg_selected slots_border_color_selected slots_border_color_hover slots_text_color_selected |
Localisation
The widget is, unless explicitly set on the query parameters, displayed on the user's browser locale if supported, else the fallback locale is English.
The supported locales are currently the following:
- Arabic
- Chinese
- English
- Estonian
- Finnish
- French
- German
- Greek
- Hindi
- Japanese
- Korean
- Spanish
- Thai
- Turkish
- Vietnamese
Upcoming locales
- Ukrainian
- Russian
Examples
Find below different examples of widget customisations:
Default widget
Customised colors and fonts
Features: Seating area selection, additional requests.
Text customisation: Pre-booking message, payment policies message, confirmation message.
Multiple venues
Features: Geolocation