Adding your Collins booking widget to your website
How to add the widget to Wordpress
Here’s a guide to help you Add the booking widget to your Wordpress site
Please note: you will need to upgrade to the Business Plan to be able to add the widget code to your site.
Examples of partners using a Wordpress site:
How to add the widget to Squarespace
Here’s a guide to help you Add the booking widget to your Squarespace site
Please note: you need to add a Code Block, not an Embed Block.
Examples of partners using a Squarespace site:
How to add the widget to Wix
Here’s a guide to help you Add the booking widget to your Wix site
Example of partners using a Wix site:
How to add the widget to Facebook
Here’s a guide to help you Add the booking widget to your Facebook page
Examples of partners using the Facebook Widget:
Customising your Collins booking widget
Since the booking form is inserted into your own website, it will automatically pick up any applicable CSS, so it can completely match the look and feel of your website.
You can customise the look of your widget. To help you with customising your widget, here’s a useful guide to help you override the CSS. You can also have a look through these examples of what other venues have done (to get an idea of what can be done).
How to customise your widget on Squarespace
In the Code Block that you added to create your widget, you can add in specific rules to the CSS that applies to the booking form.
To add CSS code, you will have to surround your CSS code with <style></style> tags.
How to customise the wording of the “Make an Enquiry” header and “Enquire Now” button
As standard, the widget comes with “Make an Enquiry” as the header and “Enquire Now” on the button. Your web developer will be able to amend the wording of these should you wish (for example, if all your booking types are set to auto-confirm only, you may wish to have the button say “Book Now”).
Your web developer will need to create images that you would like to replace the Header/Button with. Your web developer will then need to override the CSS of the specific form element.
If you are replacing the image of the header:
.dmn-form h1 {
background-image: url('https://example.com/path/to/image.png');
}
If you are replacing the image of the button:
.dmn-form button.submit {
background-image: url('https://example.com/path/to/image.png');
}
Here are some great examples of customised headers/buttons that our partners have created:
Setting up Multilingual Widgets
Collins gives you the option to display your booking widget in the following additional languages:
- Dutch
- French
- German
- Spanish
If you would like your booking widget to display in multiple languages , you will have to first set up the translations in your Collins settings
Once your Translation has been set up in Collins, your web developer will have to add an extra piece of code to your widget script.
After your Venue ID, please add &locales= followed by the code for the language that you wish to add to your widget. Add multiple languages separated by a comma.
English en-GB
Dutch nl-NL
French fr-FR
German de-DE
Example: this widget will display both English and German options:
<script
src="//partners.designmynight.com/pf/js?venue_id=59d759f1cf53f24ceb4fbff0&locales=en-GB,de-DE" id="dmn-js">
</script>
Example of a partner with a French booking widget: Waikiki
Please note: Your web developer may need to edit the size of the widget to accommodate the change in the language. Guide to help them customise the size of the widget.
Multiple Booking Widgets
If you have added multiple Collins booking widgets to your website but are looking to target each specific form (for example so that you can use Google Analytics for both widgets).
Forms are accessed by their ID, but there’s currently no way to set the ID for a particular form. Instead, you’d need to retrieve the numerical ID from the form’s ID attribute once it’s been written to the page, using something like this, changing the getElementById part to something that identifies a container of the form you want to target:
var formId = document.getElementById('form-container').getElementsByClassName('dmn-form')[0].getAttribute('id').substr('dmn-form-'.length);
Once you have the ID you can then set values on that particular form by passing an object to DMN.val() like this:
DMN.val({field: 'time', value: '22:00', formId: formId})
Troubleshooting
If your booking widget is not appearing as expected, we recommend that you test your widget codes on Plunker (this is a website to test codes). To test your widget code:
- Copy your widget code (this can be found in your Collins admin settings)
- Go to Plunker
- Paste your widget code
- Click Run
You should then see the widget on the right side of the screen which you can make a test booking for/play around with.
If the widget is appearing and working correctly on Plunker, this means that the issue is isolated to your own website. This means that the issue will be caused by conflicting styles on your website and your web developer will need to take a closer look at your CSS or Javascript.
Booking Widget FAQs
1. Is it possible to add Placeholder Text in the fields?
You wouldn’t be able to add placeholder text through our JS API. However, you could change it using a library like jquery or vanilla JS to add a placeholder to the element.
Alternatively, you could set the background image of an input with CSS - guide here to help you style the booking widget.
2. The dates on my calendar are not showing correctly!
If you have tested the widget code on Plunker and the issue is isolated to your website, your web developer will have to look at the CSS styling or Javascript on your page which is interfering with the code.
3. The drop down options on my widget fields are only visible when you hover over them. How do I get all available drop down options to be visible for the customer to select?
If the colour of the Form Components is too similar a colour to the Input Labels, it can make it difficult for customers to view and select options.
Your web developer should amend the CSS to tweak the colours used in your Form Components and Input Labels.
4. By default, the second iFrame is a pop up. Is it possible to direct to a booking page (which is not a pop up)?
The modal styling can be customised with CSS. It will either open an iframe within a modal, or redirect to the booking page depending on available screen size. Your web developer will be able to customise the size to dictate what happens.
Here’s an example of what the second iFrame could look like: Alexander’s
5. I’ve added the widget code to my site but when I click the ‘Enquire Now’ button, the second iFrame is hidden behind elements of my website. This is affecting customers’ ability to complete their booking/enquiry. What could be causing this?
If this is isolated to your own website, your web developer will have to look at the CSS styling or Javascript on your page which is interfering with the code.
For example, specific elements of your website may have been set a very high z-index which is causing the elements to appear on top over everything else on the page (including the Collins second iFrame).