If you have embedded the Bookeo widget on your website, and set up the website integration in Settings>Theme and Layout>Website integration, you can select from three options for mobile devices:
- fully integrate the booking widget on your mobile website
- show the main booking page embedded into your website (first page of the booking process), then enlarge the booking widget to full screen on a new browser tab to let customers complete the booking process
- enlarge the booking widget to full screen on a new browser tab
Note
Options 2 and 3 are recommended if your website builder does not allow resizing the widget on mobile devices, or embeds the widget in an iframe (with a vertical and/or horizontal scrollbar). You can find out more about the 3 options for the website integration on mobile devices below.In this article:
- Option 1: Mobile booking widget fully embedded in your website
- Option 2: Main page of mobile booking widget embedded in your website, then enlarged to full screen
- Option 3: Mobile booking widget enlarged to full screen (not embedded in your website)
Option 1: Mobile booking widget fully embedded in your website
If you set to fully embed the mobile widget on your website, customers will be able to make bookings, purchase gift vouchers, enroll in membership, without ever leaving your website.
In your Bookeo dashboard:
1. Go to Settings>Theme and Layout>Website integration
2. In the Options section:
- from the Second screen dropdown menu, select remain inside the widget [1] (this setting will apply to desktop and mobile devices)
- from the Mobile dropdown menu, select use the widget embedded in the website [2]
3. Save
Floating menu
If your website has a floating menu that 'sticks' to the top of the screen as a user scrolls down, the floating menu may cover part of the widget. You can push the widget down the height of your floating menu to ensure that it won't partially hide the widget. Click here for more information.Resize widget for mobile
Some website builders require you to resize the size of the widget also for mobile. Please make sure to check if your website builder requires this setting.Option 2: Main page of mobile booking widget embedded in your website, then enlarged to full screen
In this mode, the widget will show embedded in your web site when your customers visit your normal booking page. Once customers click on a button (for example the BOOK button) to start the booking process, the browser will open a new window/tab and customers will see the full screen interface. This offers the advantage of having the list of activities displayed in your web site, but giving a full-screen, more easily readable interface once customers decide to proceed and make a booking.
In your Bookeo dashboard:
1. Go to Settings>Theme and Layout>Website integration
2. In the Options section:
- from the Second screen dropdown menu, select open a separate full-screen page [1] (this setting will apply to desktop and mobile devices)
- from the Mobile dropdown menu, select use the widget embedded in the website [2]
3. Save
Floating menu
If your website has a floating menu (i.e. the menu/header of your web page stays fixed at the top of the screen, even if you scroll down the page), you can add some extra code to your booking page to ensure that the widget will correctly show on the page without being hidden by the floating menu. Click here for more information.Resize widget for mobile
Some website builders require you to resize the size of the widget also for mobile. Please make sure to check if your website builder requires this setting.Option 3: Mobile booking widget enlarged to full screen (not embedded in your website)
If you want to enlarge the mobile widget to full screen in a new browser tab (not embedded in your website) on mobile devices.
In your Bookeo dashboard:
1. Go to Settings>Theme and Layout>Website integration
2. In the Options section, from the Mobile dropdown menu, select enlarge the widget to full screen
3. Save
If you select to enlarge the mobile widget to full screen on mobile devices, when the widget detects a mobile device it redirects the device to a full-screen mobile interface. 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.
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.
Start mobile button for the booking widget
If you want to display a button on the page to open the booking screen, instead of opening it automatically, add the following code to your page. This code could go anywhere on the page, but for simplicity you can place it just after the widget code.
<script type="text/javascript">
var axiomct_mobileMode="button";
</script>
Customize the button
Label, size, font, and color of the button can be customized by adding more commands to the button code, like in the example below:
<script type="text/javascript">
var axiomct_mobileMode="button";
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>
- 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: 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 logo, the Home icon will simply go back to the start of the booking process.