---
title: "Ajoutez l'expérience de commande en superposition à votre site web"
slug: "add-the-overlay-checkout-experience-to-your-website"
updated: 2026-09-07T08:56:34Z
published: 2026-09-07T08:56:34Z
canonical: "mysupport.roller.software/add-the-overlay-checkout-experience-to-your-website"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://mysupport.roller.software/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajoutez l'expérience de commande en superposition à votre site web

Optimisez l'engagement des invités et la génération de revenus grâce à la commande en superposition sur votre site web. À partir d'un bouton ou d'un autre élément de votre page web, vous pouvez déclencher l'ouverture de la commande en superposition sous forme de panneau latéral droit par-dessus votre page de site web.

Ce guide présente les différentes options de commande en superposition et explique comment ajouter cette expérience de commande à vos pages web.

[Configurer et partager votre Commander en superposition](https://fast.wistia.net/embed/iframe/27nh40ez33?videoFoam=true)

## Comment ça fonctionne

Vous pouvez présenter votre commande en superposition de quatre façons différentes :

1. **Ouvrir l'intégralité de la commande :** La commande s'ouvrira sous forme de panneau latéral et les invités pourront parcourir vos produits à leur guise. C'est idéal pour un bouton comme **Réserver maintenant**, que les invités utilisent pour parcourir vos options de billetterie.
2. **Ouvrir la commande à une section spécifique :** Les invités peuvent parcourir cette section pertinente (tout en ayant toujours accès à votre liste complète de produits).
3. **Ouvrir la commande sur un produit spécifique :** Les invités peuvent rapidement ajouter ce produit à leur panier.
4. **Ouvrir la commande à une date spécifique :** Les invités peuvent acheter facilement des produits et des pass saisonniers.

L'avantage de l'expérience en superposition est qu'avec une seule commande, vous pouvez utiliser une combinaison des options ci-dessus sur l'ensemble de votre site web. Ces options réduisent toutes l'effort requis par les invités pour trouver ce qu'ils cherchent et effectuer un achat, ce qui augmente vos taux de conversion.

> [!NOTE]
> Plus vous simplifiez l'expérience d'achat pour les invités, plus ils sont susceptibles de réaliser un achat.

Pour en savoir plus sur la mise en œuvre de ces options de superposition sur votre site web, suivez les instructions correspondantes ci-dessous.

> [!WARNING]
> Vous devrez faire appel à votre développeur web pour mettre en place l'expérience en superposition, car cela implique d'ajouter du code à vos pages de site web.

## Ouvrir la commande en superposition à la page des produits

Si vous avez un lien de commande général sur votre site web (par ex. un bouton **Acheter des billets**), vous pouvez afficher votre commande complète en superposition, laissant les invités parcourir vos produits à leur guise.

![overlay.gif](https://cdn.us.document360.io/23700755-951c-4b69-8afe-ec8b33c6c689/Images/Documentation/9658125982735.gif)Pour configurer ceci sur la page web de votre choix, fournissez les deux extraits de code suivants à votre développeur web.

> [!WARNING]
> Vous pouvez configurer plusieurs superpositions sur votre site web.

### 1. Script à ajouter à l'élément <head> de votre site web

Pour trouver le script destiné à votre développeur, suivez les étapes ci-dessous :

1. Dans Venue Manager, accédez à **Applications** > **Caisses progressives** > **Toutes les caisses**.
2. Sélectionnez votre caisse.
3. Sélectionnez **Partager** en haut à droite de la page de configuration.
4. Sous **Étape 1 : Ajouter votre script**, copiez le premier extrait de code à fournir à votre développeur web.
5. Demandez à votre développeur web de l'ajouter à l'élément <head> de la page du site web.

Remarque pour l'étape 4 :

- Si votre établissement utilise des **domaines personnalisés**, lorsque vous copiez le script pour votre développeur web, **vous devez remplacer le lien de commande ROLLER par le lien de commande de votre domaine personnalisé**. Cette modification vous permettra d'éviter tout problème avec le suivi inter-domaines GTM.
- Par exemple : `&lt;script id="roller-checkout" src="https://cdn.rollerdigital.com/scripts/widget/checkout_iframe.js" data-checkout="https://ecom.roller.app/rollerverse/rollerversecheckout/en/home"&gt;&lt;/script&gt;` Devient : `&lt;script id="roller-checkout" src="https://cdn.rollerdigital.com/scripts/widget/checkout_iframe.js" data-checkout="https://tickets.rollerverse.com/rollerverse/rollerversecheckout/en/home"&gt;&lt;/script&gt;`

Remarques pour l'étape 5 :

- Si vous ajoutez plusieurs commandes en superposition à votre site web, ajoutez le code de commande approprié à l'élément <head> de la page individuelle sur laquelle vous souhaitez ajouter la commande.
- Que vous ayez créé votre site web avec un outil de création comme WordPress, Squarespace ou Webflow, ou que vous disposiez d'un site web personnalisé, votre développeur web devrait pouvoir ajouter le script à l'élément <head> au niveau de la page.

### 2. Élément Java script pour ajouter le déclencheur

Fournissez l'élément Java script suivant à votre développeur web :

`onclick="RollerCheckout.show()"`

Demandez-lui de l'ajouter au bouton ou à un autre élément de votre page web à partir duquel vous souhaitez lancer la commande en superposition.

La bonne pratique consiste à ajouter ce script à un élément bouton spécifique sur votre page web et à inclure un **aria-label** pour décrire ce que le bouton doit faire. Un ID unique facilite également le suivi avec Google Analytics (si vous l'utilisez).

Voici un exemple :

`&lt;button type="button" aria-label="Show checkout to buy now" class="buy-now__button" id="unique-buy-now-button"&gt;` `&lt;span class="buy-now__button--wrapper"&gt;Buy now&lt;span&gt;` `&lt;/button&gt;`

Vous pouvez remplacer l'**aria-label**, la **class** et les **ID**, ainsi que le contenu du bouton, par vos propres instructions.

## Ouvrir votre commande en superposition à une section spécifique

Si vous souhaitez diriger les invités vers une section spécifique de votre commande (par exemple **Adhésions**), vous pouvez ajouter du code à un bouton pour les rediriger vers cette section précise. Les invités n'ont qu'à cliquer sur le bouton, parcourir la section concernée et ajouter des produits à leur panier.

Trouvez le nom de la section, puis demandez à votre développeur web d'ajouter du code au bouton. Suivez les étapes ci-dessous.

> [!WARNING]
> N'oubliez pas d'ajouter le script approprié à l'élément de votre site web. Consultez l'étape une de la section Ouvrir la commande en superposition à la page des produits ci-dessus.

1. Dans Venue Manager, accédez à **Applications** > **Caisses progressives** > **Toutes les caisses**.
2. Sélectionnez la caisse pour ouvrir la zone de configuration, puis accédez à l'onglet **Produits**.
3. Trouvez la section de la caisse à laquelle vous souhaitez créer un lien et notez le nom de la section (celui-ci doit être exact). ![2024-05-02_16-04-07.png](https://cdn.us.document360.io/23700755-951c-4b69-8afe-ec8b33c6c689/Images/Documentation/9658496160527.png)
4. Fournissez l'élément Java script suivant à votre développeur web avec le nom de la section que vous avez identifié : `onClick="RollerCheckout.show({section: '&lt;Section name&gt;'})"`
5. Demandez-lui de : Remplacer **<Section name>** par le nom de la section trouvé à l'étape 3. Par exemple : `onClick="RollerCheckout.show({section: 'Trampoline Park'})"` Ajoutez ensuite le code au bouton ou à un autre élément de votre page web à partir duquel vous souhaitez ouvrir la section de caisse spécifique.

Remarque :

- **Le nom de la section que vous saisissez dans le script doit correspondre à celui figurant dans votre caisse**, mais la casse (majuscules et minuscules) n'a pas d'importance (ex. : « Adhésions » et « adhésions » fonctionneront tous les deux).
- Si deux sections portent le même nom, la caisse s'ouvrira sur la section qui apparaît en premier dans l'ordre de votre caisse.
- Si aucune section correspondante n'est trouvée, la caisse en superposition s'ouvrira mais ne s'affichera pas correctement.
- Évitez d'utiliser des caractères non alphanumériques dans vos noms de section (par exemple, « Adhésions ! » avec le point d'exclamation ne correspondra à aucune section).

## Ouvrir votre caisse en superposition sur un produit spécifique

Si vous souhaitez diriger vos invités vers un produit spécifique de votre caisse (par exemple **Acheter une adhésion élite**), vous pouvez ajouter du code à un bouton pour rediriger les invités directement vers ce produit. Les invités n'ont qu'à cliquer sur le bouton, ajouter ce produit à leur panier et payer !

Vous devrez d'abord trouver l'ID du produit, puis demander à votre développeur web d'ajouter du code au bouton.

> [!WARNING]
> N'oubliez pas d'ajouter le **script à l'élément <head> de votre site web**. Consultez la première étape de la section **Ouvrir la caisse en superposition sur la page des produits** ci-dessus.

1. Dans Venue Manager, accédez à **Applications** > **Caisses progressives** > **Toutes les caisses**.
2. Sélectionnez la caisse pour ouvrir la zone de configuration.
3. Sélectionnez **Afficher la caisse** en haut à droite de la page pour ouvrir la caisse dans un nouvel onglet du navigateur.
4. Accédez au produit souhaité et sélectionnez-le pour ouvrir ses détails. ![2024-05-02_16-16-32.png](https://cdn.us.document360.io/23700755-951c-4b69-8afe-ec8b33c6c689/Images/Documentation/9658551030415.png)
5. Dans la barre d'adresse du navigateur, copiez l'ID du produit depuis l'URL. L'ID du produit est le numéro figurant à la fin de l'URL. ![2024-05-02_16-17-22.png](https://cdn.us.document360.io/23700755-951c-4b69-8afe-ec8b33c6c689/Images/Documentation/9658551031695.png)
6. Fournissez l'élément Java script suivant à votre développeur web avec l'ID du produit que vous avez identifié : `onClick="RollerCheckout.show({productId: '&lt;PRODUCTID&gt;'})"`
7. Demandez-lui de : Remplacer **<PRODUCTID>** par l'ID du produit que vous avez trouvé à l'étape 5. Par exemple : `onClick="RollerCheckout.show({productId: '65290'})"` Ajoutez ensuite le code au bouton ou à un autre élément de votre page web à partir duquel vous souhaitez ouvrir le produit spécifique.

## Ouvrir votre commande en superposition sur un produit, une date et une heure spécifiques

Vous pouvez également diriger vos invités vers un produit, une date et une heure de séance spécifiques dans votre commande (par ex. **Pass saut d'1 heure le lundi 16 déc. à 2 h**). Cette option est idéale si vous souhaitez réduire le nombre de clics nécessaires à un invité pour finaliser sa commande et acheter des billets, ce qui améliore vos taux de conversion.

Pour configurer cette option, vous devez identifier :

1. La **date** à laquelle vous souhaitez que votre commande en superposition s'ouvre. Le format doit être année-mois-jour (par ex. 2024-04-20).
2. L'**ID du produit** sur lequel vous souhaitez que votre commande en superposition s'ouvre.
3. La **date de séance** à laquelle vous souhaitez que votre commande en superposition s'ouvre. Cela permet d'identifier la séance lorsqu'il existe des séances à la même heure mais à des dates différentes (par ex. une séance à cheval sur minuit). C'est la même date que celle indiquée au point 1. Le format doit être année-mois-jour (par ex. 2024-04-20).
4. L'**heure de début de séance** que vous souhaitez sélectionner pour le produit. Le format doit être heure:minute en format militaire (par ex. 14:30).

> [!WARNING]
> N'oubliez pas d'ajouter le **script adéquat à l'élément <head> de votre site web**. Consultez l'étape un de la section **Ouvrir la commande en superposition sur la page du produit** ci-dessus.

Une fois ces quatre éléments réunis, demandez à votre développeur web d'ajouter du code au bouton de votre page web. Suivez les étapes ci-dessous.

1. Pour trouver l'**ID du produit**, suivez les étapes de la section ci-dessus et notez l'ID du produit.
2. Ensuite, fournissez l'élément Java script suivant à votre développeur web avec la **date**, l'**ID du produit**, la **date de séance** et l'**heure de début de séance** corrects : `onClick="RollerCheckout.show({productId: '&lt;PRODUCTID&gt;', date: '&lt;DATE&gt;', sessionDate: '&lt;DATE&gt;', sessionStart: '&lt;TIME&gt;'})"`
3. Demandez-lui de remplacer **<PRODUCTID>** par l'ID du produit que vous avez identifié à l'étape 1. Remplacez **<DATE>** par la date à laquelle vous souhaitez que la page de détails du produit de votre commande s'ouvre. Et remplacez **<TIME>** par l'heure de séance spécifique que vous souhaitez sélectionner. Par exemple : `onClick="RollerCheckout.show({productId: '65290', date: '2025-04-20', sessionDate: '2025-04-20', sessionStart: '14:00'})"`

Ajoutez le code au bouton ou à un autre élément de votre page web à partir duquel vous souhaitez ouvrir la date, le produit ou l'heure spécifique.

## Ouvrir votre interface de commande en superposition basée sur les dates à une date précise

Si vous avez configuré une [interface de commande basée sur les dates](/v1/docs/fr/create-your-online-checkout), vous disposez de deux options supplémentaires pour votre expérience en superposition.

1. Configurez votre interface de commande en superposition pour qu'elle s'ouvre à une date précise et affiche tous les produits disponibles pour cette date.
2. Configurez votre interface de commande en superposition pour qu'elle s'ouvre à une date précise et affiche uniquement un produit spécifique pour cette date (cette option est idéale pour les produits saisonniers et les pass).

### 1. Configurer votre interface de commande en superposition pour qu'elle s'ouvre à une date précise et affiche tous les produits disponibles pour cette date

Si vous souhaitez ouvrir l'interface de commande en superposition à une date précise depuis un bouton de votre site web, confirmez la date au format **année-mois-jour** (ex. 2024-04-20), puis fournissez l'élément de script Java suivant à votre développeur web avec la date que vous avez définie :

`onClick="RollerCheckout.show({date: '&lt;DATE&gt;'})"`

Demandez-leur de :

- Remplacer **<DATE>** par la date à laquelle vous souhaitez que votre interface de commande s'ouvre (ex. 2024-04-20). Par exemple : `onClick="RollerCheckout.show({date: '2024-04-20'})"`
- Ajoutez le code au bouton ou à un autre élément de votre page web à partir duquel vous souhaitez ouvrir l'interface de commande en superposition.

> [!WARNING]
> N'oubliez pas d'ajouter le **script à l'élément <head> de votre site web**. Consultez la première étape de la section **Ouvrir l'interface de commande en superposition sur la page des produits** ci-dessus.

### 2. Configurer votre interface de commande en superposition pour qu'elle s'ouvre à une date précise et affiche uniquement un produit spécifique pour cette date

Vous pouvez également configurer votre interface de commande en superposition basée sur les dates pour qu'elle s'ouvre à une date précise et n'affiche qu'un produit spécifique, depuis un bouton de votre site web.

Cette option est idéale si vous proposez des produits tels que des pass saisonniers. Par exemple, des pass séance hivernaux pouvant être achetés à tout moment dans l'année, mais dont les séances ne débutent qu'en novembre.

Pour configurer cette option, vous devez identifier :

1. La **date** à laquelle vous souhaitez que votre interface de commande en superposition s'ouvre. Le format doit être **année-mois-jour** (ex. 2024-04-20).
2. L'**identifiant du produit** pour le produit sur lequel vous souhaitez que votre interface de commande en superposition s'ouvre.

Une fois ces deux éléments en main, demandez à votre développeur web d'ajouter du code au bouton de votre page web.

Pour trouver l'identifiant du produit, suivez les étapes ci-dessous.

1. Dans Venue Manager, accédez à **Applications** > **Caisses progressives** > **Toutes les caisses**.
2. Sélectionnez la caisse pour ouvrir la zone de configuration.
3. Sélectionnez **Afficher la caisse** en haut à droite pour ouvrir la caisse dans un nouvel onglet du navigateur.
4. Accédez au produit souhaité et sélectionnez-le pour ouvrir ses détails. ![2024-05-02_16-16-32.png](https://cdn.us.document360.io/23700755-951c-4b69-8afe-ec8b33c6c689/Images/Documentation/9658551030415.png)
5. Dans la barre d'adresse du navigateur, copiez l'identifiant du produit depuis l'URL. L'identifiant du produit est le numéro à la fin de l'URL. ![2024-05-02_16-17-22.png](https://cdn.us.document360.io/23700755-951c-4b69-8afe-ec8b33c6c689/Images/Documentation/9658551031695.png)
6. Transmettez l'élément Java script suivant à votre développeur web avec la **date** et l'**identifiant du produit** que vous avez identifiés : `onClick="RollerCheckout.show({productId: '&lt;PRODUCTID&gt;', date: '&lt;DATE&gt;'})"`
7. Demandez-lui de : Remplacer **<PRODUCTID>** par l'identifiant du produit trouvé à l'étape 5. Remplacer **<DATE>** par la date à laquelle vous souhaitez que la page de détails du produit de votre caisse s'ouvre. `onClick="RollerCheckout.show({productId: '65290', date: '2024-04-20'})"` Ajoutez le code au bouton ou à l'élément de votre page web à partir duquel vous souhaitez ouvrir la date/le produit spécifique.

## Activer Apple Pay sur la caisse superposée

Si votre établissement souhaite proposer Apple Pay comme option de paiement pour vos invités sur votre caisse superposée, vous devrez collaborer avec notre équipe d'assistance pour obtenir votre **fichier d'association de domaine**.

Un fichier d'association de domaine est un fichier de configuration qui associe votre domaine web à Apple Pay afin qu'il puisse apparaître comme option de paiement pour vos invités. Pour obtenir le fichier dont vous avez besoin et l'associer à votre domaine web, suivez les étapes ci-dessous.

1. Contactez l'équipe d'assistance ROLLER pour demander votre fichier d'association de domaine. Ce fichier est fourni par notre partenaire de paiement, Adyen. Notre équipe d'assistance vous enverra le fichier dès qu'Adyen nous l'aura transmis. **Vous pouvez également accéder à la version la plus récente de ce fichier sur** [**le site web d'Adyen**](https://docs.adyen.com/payment-methods/apple-pay/web-drop-in/#test-and-go-live)**.**
2. Téléchargez le fichier d'association de domaine sur vos domaines web. Vous devrez peut-être demander l'aide d'un développeur web.
3. Une fois votre fichier d'association de domaine téléchargé, informez notre équipe d'assistance afin que nous contactions Adyen en votre nom pour faire approuver le domaine pour Apple Pay.
4. Une fois cette étape effectuée, nous vous en informerons et Apple Pay sera disponible sur vos caisses superposées.

## Configurer différentes caisses pour s'ouvrir depuis la même page

Pour les établissements avec des commandes intégrées, vous pouvez configurer plusieurs commandes en ligne à lancer depuis une seule page de votre site.

Par exemple, vous pouvez créer une page de réservation centrale avec différents boutons pour chacun de vos établissements ou expériences. Lorsqu'un invité clique sur le lien ou le bouton d'une commande particulière, la bonne commande s'ouvre immédiatement dans la superposition. Cela permet aux invités de trouver plus facilement la bonne expérience, tout en réduisant le besoin de gérer plusieurs pages de destination.

Pour configurer cela, suivez les étapes ci-dessous :

1. Ajoutez le script de commande en superposition dans le `&lt;head&gt;` de votre page (comme décrit dans Étape 1 : Script à ajouter à l'élément `&lt;head&gt;`…).
2. Avant d'appeler `headRollerCheckout.show()`, définissez l'URL de commande souhaitée avec : `RollerCheckout.setCheckoutUrl(checkoutUrl);`
3. Appelez ensuite : `headRollerCheckout.show();`Cela ouvrira la superposition pour l'URL de commande que vous venez de définir.

Notes:

- Après avoir appelé `RollerCheckout.setCheckoutUrl(...)`, vous pouvez utiliser `headRollerCheckout.show(...)` avec l'un des arguments pris en charge.
- Assurez-vous que l'URL de commande que vous définissez correspond à une commande que vous avez déjà configurée (accessible dans **Venue Manager** > **Caisses progressives** > **Toutes les caisses**).
- Un seul script de superposition peut être ajouté à une page donnée. Changer l'URL vous permet de réutiliser cette superposition pour différentes commandes depuis cette même page.

> [!NOTE]
> Si vous utilisez plusieurs interfaces de commande en superposition pour diriger les invités vers différents établissements, ceux-ci sauront dans quel établissement ils effectuent leur réservation, car le nom de l'établissement s'affiche en haut de la superposition.