What are the new schemes and why should I upgrade

The new "schemes" are a collection of CSS stylesheets, templates and settings which determine the look&feel of the booking process on mobile devices, tablets and desktops. Here are the advantages of using the schemes:

• 1. Use custom templates and styles on mobile devices
  While the previous advanced integration settings had no support for mobile devices (except for a special "pre-designed" page the user was redirected to), you now have a possibility of defining two sets of templates and CSS stylesheets, one for mobile and one for desktop devices. Planyo will automatically determine which one to use when sending content to the planyo extension on your website. If your website has no support for mobile devices, you can still use the other possibilities: send the standard (desktop) content to your website or redirect the visitor to a special pre-edsigned mobile page where they can finish the reservation. Please note that if your website is responsive (uses a mobile-first framework such as Bootstrap), this is also supported by the new schemes, see point #4 below.
• 2. Update the CSS styles (mobile/desktop) for both the advanced integration and calendar previews, all in a single place, instead of using multiple external files
  The old method od customizing the look and feel was based on specifying an external CSS stylesheet which would be loaded by planyo and which allowed you to customize the existing styles. With the new schemes, this is much easier: you don't need to use any external CSS stylesheets, using the CSS style editor page you can conveniently customize the default styles using our CSS editor. Previewing the changes is now very convenient with the preview window next to the editor and allowing you to choose the context being previewed.
• 3. Use our modern and attractive look for the booking form and other views
  All our new schemes have a considerably nicer design than the old one so unless you customized the default look&feel, you may want to see what our different schemes look like. One particular improvement concerns the reservation form. Here we've introduced a number of new features: New option where the form item labels are kept inside the fields BUT we also take care of the typical problem where predefined items don't show the label so the customer doesn't know what the field represents -- we fix this by moving the label to the top of the field (using a small font) whenever a value is entered into this field. This makes the experience of working with forms much nicer. Another big change to the forms is the possibility of splitting the form items into 2 columns. Last but not least, the price quoted to the user can be always visible, either in a box which floats and is always scrolled into view, or as a panel stuck at the bottom of the browser screen.
• 4. Use planyo on responsive, mobile-first, websites (with frameworks such as bootstrap)
  Planyo now supports the responsive designs. We have a scheme for bootstrap (pure and foundation coming up soon). Using this scheme will not only update the templates to use bootstrap-specific structure and classes but will also result in generation of a bootstrap-compatible booking form. A big advantage of using bootstrap is that if your website already uses it, perhaps together with a bootstrap-compatible theme or your own customizations, then the planyo content will have the exact same design as the rest of your website. See Q279 for more info about support for bootstrap or other responsive frameworks.

What do the new schemes look like?

Demos using the planyo scheme: Demo 1 Demo 2 Demo 3
Demos using the bootstrap scheme: Demo 1 Demo 2 [work in progress]

Here are some screenshots from the new Planyo scheme:


Resource listing - Planyo scheme


Resource details - Planyo scheme


Booking form - Planyo scheme

Here are screenshots from the responsive Bootstrap scheme:


Resource listing - Bootstrap scheme


Booking form - Bootstrap scheme

What are the potential problems when upgrading?

Upgrading to a new scheme can be only potentially problematic when you have already customized the templates or the styles by using an external stylesheet. If this is the case, you will need to do the following:

• Backup your existing settings by clicking the Backup existing scheme button. The backup is very important because you can use it at any time to go back to the previous settings. You do this by clicking the Restore from backup button.
• Switch to one of the new schemes. At the time of the switch planyo will automatically send to your browser the backup of your existing setting. This is always done because the backup is very important, especially if working with a production site
• Check out the new templates and whenever you'd like to use a previously designed template, on the page with this template click the Import from scheme backup button. This will import back your old template (just the one you're working with). If you decide not to use the old template (e.g. after you copied the important parts to clipboard), click Reset to reset to the scheme default and then customize the template as needed.
• Back in the CSS style editor, use the convenient CSS editors to customize the stylesheets or paste your custom styles (from an existing external css file) to this window.

How to upgrade to the new schemes?

You'll need to go to Settings / CSS style editor. Then choose one of the schemes from the Advanced integration scheme dropdown and click Set. Note that this will automatically back up your existing settings and download them to your disk. At any time in the future, if you wish to go back to these settings, you will be able to click on Restore from backup and choose this file. Another thing that's possible to do with this backup is to restore a single template in case you'd like to use it instead of the template used by the scheme.

Important: If you used one of our modules/plugins for advanced integration, you will also need download the latest version (2.6 or later) from our website (go to Settings / Integrate with my website / Advanced) and replace the old version on your website with this one.

How to customize the selected scheme?

If you want your reservation form to use 2 columns, you'll need to go to Settings / Reservation form layout and set the width of each form item. Setting the scheme will not do this for you because the reservation form layout is not part of the scheme.

See this tutorial for all other customizations which can be done.