Skip to main content

Build your custom booking widget

You can create a custom booking URL for your website.

F
Written by Fabio Fois
Updated over 2 weeks ago

Easily boost conversions by creating a custom booking link or widget tailored for your venue. With ResDiaryโ€™s widget configurator, you can design, preview, and generate an embed ready booking tool stylised to match your brand and simple to add to your website.

Create your custom booking widget by watching the video below or follow the steps provided:
โ€‹

Create your custom booking widget

You can create a booking widget using a standard version or a group one. This will vary depending on the amount of diaries you have and your personal preferences.

Create a standard booking widget

This option will be valid only for your single diary in use, during the process you'll be able to see how your widget will look on the preview window on the right. Follow the steps below to create your standard booking widget:

  1. Click Promote, then Widget Configurator.

  2. Click Create New Theme, then choose Standard.

  3. Insert your widget name under theme name.

  4. Customise your colour branding from the following tabs:

    • Overall look.

    • Promotion choice window.

    • Calendar.

    • Dropdown and input boxes.

  5. Click Booking summary panel if you want to divide your time slots by service, add children and infants options or add an area selection option.

  6. Click Custom Logo, then Choose File.

  7. Find your logo and click Upload.

  8. Click Continue, then select your preferred widget size.

  9. Copy the widget code and embed it on your website.

๐Ÿค“ Tip: We recommend using a standard widget size for better compatibility.

Create a group booking widget

This option will be valid for two or more diaries within the same group. To create a group booking widget, follow the steps below:

  1. Click Promote, then Widget Configurator.

  2. Click Create New Theme, then choose Group.

  3. Enable the options you prefer from the following:

    • Show address: This will appear on the first page under the name.

    • Show grouping by city: This will group venues based on their city.

    • Show order by closest to me: This will ensure the top venue is always the closest to your customers.

  4. Select the venues valid for this widget by enabling the toggle .

  5. Insert your widget name under theme name.

  6. Customise your colour branding from the following tabs:

    • Overall look.

    • Venue selection.

    • Promotion choice window.

    • Calendar.

    • Dropdown and input boxes.

  7. Click Booking summary panel if you want to divide your time slots by service, add children and infants options or add an area selection option.

  8. Click Custom Logo, then Choose File.

  9. Find your logo and click Upload.

  10. Click Continue, then select your preferred widget size.

  11. Copy the widget code and embed it on your website.


Widget compatibility

The widget code is not compatible with Squarespace, and some Wordpress and Wix websites therefore the widget will not successfully upload using this code, however, the widget will upload when an iframe is used. To use the iframe code, insert the widget URL to this code:
โ€‹

<iframe src="INSERT WIDGET URL HERE" allowtransparency="true" frameborder="0" style="width:100%; border:none; max-width: 540px; height: 640px; "></iframe>

You will find the widget URL as part of the widget embed code. All you need to do is copy part of the code and replace INSERT WIDGET URL HERE with the URL. See below which part of the code to copy.

Did this answer your question?