Integration: Technical doc

Introduction

This documentation is intended for developers and webmasters wishing to integrate the Yoplanning.pro reservation module on their website. The objective is to improve the user experience by offering an accessible and responsive reservation interface, while allowing customization of the module.

Principle of Operation

The Yoplanning.pro booking module is designed to integrate seamlessly with your website, providing a smooth user experience without requiring redirects. The module is presented in the form of a pop-up window which is activated from a button or a link, allowing users to make their reservations directly on your site.

Benefits

  • Optimal display: Adaptation 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

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

Integration Code

To integrate the module, insert the following JavaScript code in 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 reservation module can be generated via the Yoplanning backoffice:

  1. Go to Configuration > Reservation module > Integration menu.

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

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

  • Specific category: https://booking.yoplanning.pro/<ID_UNIQUE>/?tag=<ID_CATEGORIE>

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

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

  • Direct store: https://booking.yoplanning.pro/<UNIQUE_ID>/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 default language.

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

Conclusion

The integration of the Yoplanning.pro reservation module significantly improves the reservation experience on your website, thanks to its optimized user interface, its advanced customization options, and its multilingualism management. Follow the instructions provided for a successful integration and to provide your users with a seamless booking experience.

Last updated