With the new ResDiary Widget Configurator, you will be able to build a custom looking widget to suit your website needs and ensure your customers have an excellent experience booking through your website.
To enable this feature, please contact our support team who will activate your account for you.
If this has been enabled already, please follow the guide below for any assistance.
1: Access the Widget Configurator
To access the configurator, go to Promote > Widget Configurator
2: Begin your setup
Next you will see there are 3 steps to complete. Click ‘Continue to Configurator’ to get started
3: Customise the theme of your widget
There are multiple parts to the new widget configurator that allows you to choose the look and feel of the widget as well as how the calendar works for the customer and information to be displayed. All you need to do is click the different headings to edit each section.
Note: Use the Widget preview on the right hand side to see your changes as you make them. To see each section, click next through the widget and pretend you’re making a booking as a customer would. You can go backward and forward as much as you like for each of the sections to get it perfect!
Here you will choose the colour scheme and overall visual look to suit your website. Click the different colour fields to choose a different colour from the colour palette or if you know the colour codes that you wish to use, you can type them in.
Booking Summary Panel
Same as above, here you can choose how the colouring looks for the summary at the top of the first page and for the booking summary page prior to the customer confirming their details. It will also allow you to change how the search function works on the first page. Remember to click through to see your changes
Change the colours of the calendar grid to make sure it matches your theme and stands out when your customer selects dates that are available. Same as above, click to edit the colour via the colour palette or enter the codes directly.
Promotion Choice Window
If you have any promotions available, this will allow you to choose the colour theme that can make these promotions stand out during the booking process
Dropdown and Input Boxes
Make it clear for your guests entering their information and choosing from the drop down selections
Contact Details Settings
Edit what information you wish to include on your widget from required contact information to marketing opt in choices.
Term & Conditions
This section is important to fill in correctly to make sure that your guests can read any terms you may have for how to behave in venue or any booking restrictions. Be clear with this description as it could save you some trouble later on.
Add in your own restaurant logo so that your widget can be branded with your venue branding. Make sure to read the max file size of 2.5mb and size restrictions of 200x50 pixels to make sure that your image does not get distorted. If the image has different size dimensions, we will automatically adjust the height and width to meet the required dimensions.
Theme Settings (Advanced)
With the widget configurator, it allows you to create multiple widget themes to suit your needs. You may want different theme styles for different pages you would like to load the widget, while you may also want widgets specific for certain promotional events.
Use this section to setup your theme name, choose the channel code to reflect the source of where your widget has been loaded, fix a promotion to the widget for special events and even customise the final page the customer is reverted to once they have made a reservation.
- Theme Name: name your theme
- Channel Code: Depending on which channels load your widget, you can set their channel code to register bookings coming from that channel. To learn more about managing bookings for your channels, click here.
- Fixed promotion: Select a promotion and the widget theme will only allow this promotion to be booked via the widget. To learn more about setting up a promotion, click here.
4: Size & Layout
You will need to choose the size and layout of your widget. This will allow you to choose a size that fits nicely into your website. Whether that be a small section on the page or a full widget displaying a 3 month calendar view at any one time. The choice is yours!
5: Load code to your website
The final section will show you the final preview of your widget along with the code to be copied and loaded into your website. If you’re not sure what to do with this code, just copy it and send to your web designer to have them load it for you.
Note: Make sure to copy the whole code script otherwise it will not work once loaded onto your website.
6: Editing your theme or creating new themes
As mentioned earlier, you can setup multiple themes and even edit existing themes whenever you like. To do this, just follow the steps in point 1 and you will see your listed themes. Click ‘Get Embed Code’ to get the code for your website should you need it again or ‘Delete’ a theme you no longer need or like.
To see some examples of customers who have designed their own widget, click the link below;
Widget Configurator Examples
To set the default parameters of your widget to e.g. Date/Time, Party Size etc see the article below.
How to add widget defaults
NB: Before the Widget will work you need to have your online bookings activated. To do this see the article below.
Accepting Online Bookings
To set up your Google Analytics tracking refer to the article below.
Your Website must be secure to support this widget.
Please see this blog article for information on ensuring your website is secure. https://sales.resdiary.com/stripe-payments-https/