Tutorial: How to customize the look&feel of the booking process (1 / 4)

Tutorial Table of Contents

part 1: Schemes in advanced integration
part 2: Customizing the content with templates
part 3: Customizing the stylesheets
part 4: Customizing the reservation form design
Part 1 of 4: Schemes in advanced integration
A planyo scheme is a collection of CSS stylesheets, templates (html code of the content planyo sends to your website when you embed planyo into it) and settings which determine the look&feel of the booking process on mobile devices, tablets and desktops. You can choose between a few default schemes. The Planyo scheme is our default scheme with a more-less neutral look which should look good when embedded into any website, no matter which CMS or CSS frameworks are used. Then there's the Bootstrap scheme which is the best choice if your website already uses the Bootstrap framework because this ensures the planyo content will have the same design as the rest of your site, whether you use the default Bootstrap look or you applied a theme to the Bootstrap styling -- either way the planyo content will match your site's design.

The choice of the scheme also partially determines how the planyo content will be presented on mobile devices. In case of a responsive scheme (e.g. Bootstrap), there is just one set of templates, it's the responsive framework which takes care of correct presentation on different device types. The calendar previews, however, are not responsive, so you will still have 2 sets of the calendar previews, one for desktops and one for mobile devices.

In case of non-responsive scheme, such as the planyo default, the entire scheme (settings, templates and CSS) is divided into mobile and desktop versions. By default, if browsing on a mobile phone, planyo will use the mobile version of the templates, styles and settings. This assumes that also your website is either responsive or has a mobile version (which is a vast majority of cases nowadays). This way the planyo content will look good when integrated into your site on a mobile device.

However, if your website has no special support for mobile devices and forces the visitors to zoom in to see the different sections of the site, you have two further choices: you can either tell planyo not to detect mobile devices and always use the desktop version, or you can use our iframe-based solution where the customer (whenever they reach the page with the planyo plugin) is automatically redirected to a special page on your website (included with the plugin) which is basically an iframe and shows predefined content from our servers (identical to simple integration). This way your customers at least get a good experience when reserving on a mobile device, even if your website doesn't have any mobile support.

Continue to part 2 (Customizing the content with templates) >>