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.

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>

 

The text can be customized via Javascript, for example adding the following inside the <head></head> tag, or somewhere at the bottom of the HTML source code of the page:

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



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.