All Collections
Website Widget
How to install Junglebee's widget on your website
How to install Junglebee's widget on your website

Learn how to add the Junglebee widget (Reservation system) to your website so your visitors can book your tours directly via your website.

Michael Rouveure avatar
Written by Michael Rouveure
Updated over a week ago

Junglebee can easily be added to any type of website (Wordpress, Squarespace, Weebly or any other kind of website). The only two types of websites that require special assistance are WIX and GoDaddy Website Builder (So if you have either, reach out to us please).

#1. Start by adding our script to the HEADER of your website between the <header></header> tags! 

This is the script: 

<script src="https://app.junglebee.com/widget/bundle.js"></script>


Now that you have done that, move on to the next step!

#2. You can now add buttons throughout your website and there are two kinds of buttons that you can add.

GENERAL BOOK BUTTON
When a user clicks on this button, it will load all your tours and private trip options. It gives the visitor a view of everything you have to offer.

And you can see the code for this button here in your widget settings by going to the following area: Main Menu (Top right of the page) > click on MY ACCOUNT > click on WEBSITE WIDGET tab

And search for GENERAL BOOK BUTTON settings.

You don't have to use our button, but what is really important is the CLASS & DATA ATTRIBUTE fields that you MUST add to any button on your website. 

They look like this:

class="junglebee-widget-book-now-button" data-junglebee-widget-id="XXXXXX"

So add the above code to any button on your website and when somebody clicks on them, it will activate the General Book Button and show all your tours!


SINGLE TOUR BOOK BUTTON

If you want to add a BOOK NOW button for a specific tour that shows the reservation form for a specific tour ONLY, then scroll further down the page until you see a drop down like this:

And simply select the specific TOUR or PRIVATE CHARTER that you want to see the necessary code to load the tour.

And it will look like this when somebody clicks on the BOOK NOW button for that specific tour:

Remember, all you need to really get is the CLASS & DATA ATTRIBUTE fields and apply them to your buttons already on your website which look like this: 

class="btn btn-primary btn-outline junglebee-widget-book-now-button" data-junglebee-widget-id="mASnC9Ug0"

and then you are all set to go! 

Here is a full button code to get you started, you just need to change the XXXXX with your tour ID and feel free to change the style attributes:

<div style = "text-align: center;"> <a><button class="junglebee-widget-book-now-button" href="#" data-junglebee-widget-id="XXXXXXX" style="padding:10px;border-radius:4px;background-color:#24c358;color:white; font-size: 45px;">BOOK NOW</button></a> </div>

If you want, we can install Junglebee on your website for free, it takes us just a few minutes and we are always happy to help. Just reach out.

Here is a video explanation of all the above:


Did this answer your question?