> For the complete documentation index, see [llms.txt](https://docs.yoplanning.support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.yoplanning.support/en/yoplanning-academy/yoplanning-parametrage/module-de-reservation/integration-du-module-de-reservation/doc-technique-agence-web/introduction-doc-technique.md).

# 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:

<figure><img src="/files/fvsdeuUGLozBDS8FTIpx" alt="" width="563"><figcaption><p>Comportement par défaut</p></figcaption></figure>

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:

<figure><img src="/files/dgIUhjP8wEn6lMWzfoe7" alt="" width="563"><figcaption><p>Avec le paramètre "bescroll=inside"</p></figcaption></figure>

### 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.

```html
<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:

1. Go to **Settings > Booking Module > Integration Menu**.
2. 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.yoplanning.support/en/yoplanning-academy/yoplanning-parametrage/module-de-reservation/integration-du-module-de-reservation/doc-technique-agence-web/introduction-doc-technique.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.