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:
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:
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>Generation of Booking Module Links
Links specific to the booking module can be generated via the Yoplanning back office:
Go to Settings > Booking Module > Integration Menu.
Use URL mode to create a URL that suits your needs.
Examples of Generated Links
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