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 button that website visitors have to click to see the Bookeo booking page - as shown below.

 

When customers click on that button, they are redirected to the mobile interface. In this way, customers can read the rest of your website page before proceeding with the booking.

In this article:


Start mobile button for the booking widget

The Start mobile button code for the booking widget in is:  

<script type="text/javascript" src="https://bookeo.com/widget.js?a=ABCD1234&waitMobile=true"></script>
<script type="text/javascript">
var bookeo_startMobileLabel="Book now";
</script>
<style type="text/css">
#bookeoStartMobile {
width: 250px !important;
background-color: green !important;
font-size: 12px !important;
color: black !important;
}
</style>


You would have to replace ABCD1234 with your account GUID. The account GUID (alphanumeric ID) can be found in Settings>Website integration, In the Widget section #1 between ?a and '></script> [1] 



Simply replace the widget code you pasted in your website source code/HTML element to set up the website integration with the Start mobile code for your Bookeo account.

Add a Start mobile button on your Wordpress website

If you are using a Wordpress website, you can add the following script 

{bookeo:waitMobile=true}. 
<script type="text/javascript">
var bookeo_startMobileLabel="Book now";
</script>
<style type="text/css">
#bookeoStartMobile {
width: 250px !important;
background-color: green !important;
font-size: 12px !important;
color: black !important;
}

</style>


Customize the button

Label, size, font, and color of the button can be customized by changing the following values in the above code:
  • Label: Book now is the default button label. You can change it to any other word, even in another language. For example, you can replace it with "Register", "Reserva ahora", etc
  • Width: 250 is the default width of the button in pixels. You can change this number to make the button wider or narrower
  • Background Color: green is the default background color for the button. Click here to see a list of possible color names
  • Font size: 12px is the default label font size. You can change this number to make the font label smaller or bigger
  • Font Color: black is the default label color. Click here to see a list of possible color names
 

Display a link to your website

If you have set the address of your website (URL) in your Bookeo account, in Settings>Business details and logo, a "Home" icon will be shown in the Bookeo mobile interface, so customers can easily go back to your web site at any time.

If you have not set the address of your website (URL) in your Bookeo account, in Settings>Business details and logothe Home icon will simply go back to the start of the booking process.


Start mobile button for the Customer area widget

The Start mobile button code for the customer area log in is:

<script type="text/javascript" src="https://bookeo.com/widget.js?a=ABCD1234&startmode=customer&waitMobile=true"></script>
<script type="text/javascript">
var bookeo_startMobileLabel="Log in";
</script><style type="text/css">
#bookeoStartMobile {
width: 250px !important;
background-color: green !important;
font-size: 12px !important;
color: black !important;
}
</style>

You would have to replace ABCD1234 with your account GUID. The account GUID (alphanumeric ID) can be found in Settings>Website integration, In the Widget section #1 between ?a and '></script> [1] 


 

Customize the button

Label, size, font, and color can be customized by changing the following values in the above code, as follows:
  • Label: Log in is the default button label. You can change it to any other word, even in another language. For example, you can replace it with "Sign in", etc
  • Width: 250 is the default width of the button in pixels. You can change this number to make the button wider or narrower
  • Color: green is the default background color for the button. Click here to see a list of possible color names
  • Font size: 12px is the default label font size. You can change this number to make the font label smaller or bigger
  • Font Color: black is the default label color. Click here to see a list of possible color names
 
  • 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.