Add your widget to your website
Learn how to add your eola booking widget to your website using one line of code, with options for multiple widgets, categories, direct links and deep links.
Your eola widget is the easiest way for customers to discover your products and make bookings directly from your website.
We've made the setup simple: one line of custom code is all you need, and it works with virtually any website builder. You can use a single widget across your website or create multiple widgets for different pages, products or categories.
Whether you're adding it yourself or passing the code to your web designer, getting your widget live is quick and straightforward.
To get your widget code, go to Toolset -> Widget -> My Widgets. Select the widget you'd like to add to your website. Primary is the default widget, so if you've only created one, this is the one you'll want to select.
From here, you'll have a number of options for how your widget works and looks.
Website integration
Under Website Integration, you'll have two options:
Script code: this is the recommended option. Click Copy to copy the script, then add it to the <head> section of your website's code.
Direct link: alternatively, you can use a direct link if your web designer wants to create their own button or link on your website. Copy the direct link and use it wherever you want customers to access your booking system.
You can customise how your widget looks on your website, including:
- Where the Book Now button appears
- The button colour
- Your own custom brand colour
If you use a custom colour, think about how it will look against your website. A button that contrasts with your branding can often stand out more and make it easier for customers to spot where they can book.
The direct link is a more basic integration, so the widget settings below won't apply when customers access your booking widget this way.
Languages
If you've enabled the Languages app, you can set a default language for your widget depending on the page where it's being used.
Categories
If you've enabled Custom Categories, you can choose to display your categories on the widget and select which categories should appear.
This can be particularly useful if you want to create different widgets for different parts of your website. For example, you could have one widget showing watersports on your watersports page and another showing accommodation on your accommodation page.
You can learn more about setting up custom categories in our helpful guide here.
Once you've selected your settings, click Save.
Add the code to your website
Copy the appropriate code from the widget page. Then open your website builder and paste the script into the <head> section of your website's code.
That's it! Once the code is added, your eola 'Book Now' widget will appear on your website.
If you use a web designer or developer, you can simply send them the code and ask them to add it to your website for you.
Helpful tips:
- Start with one widget. If you're only planning to use one widget across your website, there's no need to change its name from Primary
- Using multiple widgets? Give each one a clear name so you know which part of your website it's being used on
- Make your Book Now button stand out. A contrasting colour to your website can make it easier for customers to find and use
- Use categories strategically. They can help customers get to the right product faster, without having to search through everything you offer
- Not confident editing your website? Your web designer can add the code for you. Just send them the copied script