Introduction: Technical Doc

Introduction

This documentation is intended for developers and webmasters wishing to integrate the Yoplanning.pro booking module into their website. The goal is to improve the user experience by providing an accessible and responsive booking interface, while allowing for module customization.

Operating Principle

The Yoplanning.pro booking module is designed to seamlessly integrate with your website, providing a seamless user experience without the need for redirects. The module is presented as a pop-up window that activates from a button or link, allowing users to make bookings directly on your website.

Benefits

  • Optimal display: Adapts to all types of screens, including mobile.

  • Easy Integration: Can be added to your site with a simple piece of JavaScript code.

  • Personalization: Generation of specific links for different actions or categories.

Integration via Iframe

While possible, embedding via iframe is not recommended due to mobile compatibility constraints. If necessary, the module can open in a new tab for a full-screen experience.

Integration via Iframe: scroll behavior

In iframe mode, by default the reservation module takes up all possible height and the scroll is carried out on your site, see screenshot below:

Comportement par défaut

It is possible to change this behavior by adding the parameter bescroll=inside in the integration URL of the booking module. The module will take the height of the screen and the scroll will be done in the module rather than on your site, see screenshot below:

Avec le paramètre "bescroll=inside"

Integration Code

To embed the module, insert the following JavaScript code into the <header> of your site. This will allow the module to be accessible on all pages without requiring multiple insertions.

<script type="text/javascript" src="https://booking.yoplanning.pro/integration/script.js" async></script>

Links specific to the booking module can be generated via the Yoplanning back office:

  1. Go to Settings > Booking Module > Integration Menu.

  2. Use URL mode to create a URL that suits your needs.

  • General link: https://booking.yoplanning.pro/<ID_UNIQUE>/

  • Specific Category: https://booking.yoplanning.pro/<UNIQUE_ID>/?tag=<CATEGORY_ID>

  • Product sheet: https://booking.yoplanning.pro/<ID_UNIQUE>/product/<ID_PRODUIT>

  • Direct access to the cart: https://booking.yoplanning.pro/<ID_UNIQUE>/cart/

  • Direct Shop: https://booking.yoplanning.pro/<ID_UNIQUE>/shop/

Integration Options

Yoplanning offers various integration modes:

  • Button: For direct access via a clickable button.

  • Floating Icon: An icon accessible at any time on the page.

  • Hyperlink: To embed in text or images.

  • Iframe: Used as a last resort, if JavaScript is restricted.

  • Simple URL: For direct integration as a link.

Multilingual Management

The module automatically detects the user's browser language using the external service https://gtranslate.io/detect-browser-language, providing a localized and intuitive experience. (Recommended method in most cases.)

Forced language by default.

If you have a multilingual website or you have language detection issues or you want to force the module to display in a defined language, you can create a specific booking module by forcing the language in its configuration.

Conclusion

Integrating the Yoplanning.pro booking module significantly improves the booking experience on your website, thanks to its optimized user interface, advanced customization options, and multilingual support. Follow the provided instructions for a successful integration and to offer your users a seamless booking experience.

Last updated