When using a mobile device, customers get immediately redirected to our Bookeo booking system. How can I change this?

To optimize the display on smaller screens, when the widget detects a mobile device it redirects the device to a full screen mobile interface. Leaving the widget inside a page would make the interface look too small, especially because mobile browsers zoom out the page to avoid horizontal scrollbars.

You can however prevent the redirection from occurring automatically, and have Bookeo display a Start mobile button instead. When customers click on that button, they are redirected to the mobile interface. In this way, customers can read the rest of the page before proceeding with the booking.

In this article:

 

Add a Start mobile button in your booking page
To enable this mode, simply add the following parameter to your widget code, in the src attribute: &waitMobile=true

For example you can add the following script for the booking widget: <script type="text/javascript" src="https://bookeo.com/widget.js?a=ABCD1234&waitMobile=true"></script>

The code for the customer area widget would be: <script type="text/javascript" src="https://bookeo.com/widget.js?a=ABCD1234&waitMobile=true&startmode=customer"></script>

If you are using a Wordpress website, you can add the following script {bookeo:waitMobile=true}. 


Display a link to your web site

If you have set the address of your web site in the page Settings>Business details and logo, then a "Home" icon will be shown in the mobile interface, so customers can easily go back to your web site at any time. If you do not specify the address of your web site, the Home icon will simply go back to the start of the booking process
 


Customize the Start Mobile button
The style and text of the Start mobile button can be fully customized.

It's easy if you have some familiarity with web page technologies like CSS and Javascript.
Note that, by default, the button title is Start mobile because it can be clicked to make a booking, to sign in to customer area, etc.

 


Customise size and color of the button

Size and color can be customized with a simple CSS rule in your web page, for example for the booking page:

 <style type="text/css">

        #bookeoStartMobile {
            width: 350px !important;
            background-color: blue !important;
        }
    </style>


Change the language of the button

To change the language of the button, you will have to replace the text Book now shown below:

<script type="text/javascript">
var bookeo_startMobileLabel="Book now";
</script>

For example, if you want the button to read "Réserver ", you should use this code

<script type="text/javascript">
var bookeo_startMobileLabel="
Réserver ";
</script>


Start mobile button for the Customer area

The Start button for the customer area log in would be:

<script type="text/javascript">
var bookeo_startMobileLabel="Log in";
</script>

<style type="text/css">
#bookeoStartMobile {
width: 250px !important;
background-color: grey !important;
}
</style>

 

  • These CSS rules and Javascript code must be inserted in the web page where the widget is located.

  • If you are not familiar with HTML, CSS or Javascript, you may want to contact a web designer to help you customize the style of the button to match the look and feel of your website.
     

  • Due to restrictions enforced by Google Sites, it is not possible to embed the Bookeo widget code with the waitMobile parameter in Google Sites. Google will display the button, but it will prevent it from working.