---
title: "Créer un paywall avec un bouton de période d'essai"
description: "Faites basculer un paywall entre des produits avec et sans essai gratuit, et gardez le produit sélectionné en phase avec le bouton."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skill. Claude Code (self-updating via plugin): `claude plugin marketplace add adaptyteam/adapty-skills && claude plugin install adapty-skills@adapty` — other tools: `npx skills add adaptyteam/adapty-skills --all`

Un bouton de période d'essai vous permet de faire basculer un paywall entre des produits avec un essai gratuit et des produits sans essai. Mais le bouton en lui-même n'est qu'un interrupteur : activé ou désactivé. C'est vous qui écrivez les règles qui affichent les bonnes cartes, et celles qui déterminent quel produit est sélectionné.

Cette recette vous montre comment configurer ces règles et créer un paywall entièrement fonctionnel avec un bouton bascule.

<DocVideo id="paywall-trial-toggle-demo.mp4" width="300px" alt="Le paywall terminé : activer le bouton bascule d'essai permute les deux cartes produit vers leurs versions d'essai et change le libellé du bouton de « Purchase » à « Start your free trial »" />

## Avant de commencer \{#before-you-start\}

- Créez un écran de paywall — par exemple, suivez la recette [Créer un écran de paywall de base](basic-paywall-screen).
- [Créez vos produits](create-product) et [ajoutez-leur l'offre d'essai](create-offer).

:::important
Si vous souhaitez rendre l'essai facultatif (ce qui est nécessaire pour utiliser le bouton bascule d'essai), ne créez pas d'offre de lancement. Sur iOS, les offres de lancement s'appliquent **automatiquement** à chaque utilisateur éligible. Vous ne pouvez pas les désactiver. Utilisez plutôt une offre promotionnelle. Consultez [Comment Adapty fonctionne avec les offres](create-offer#how-adapty-works-with-offers).
:::

## 1. Ajouter les cartes produit \{#1-add-the-product-cards\}

1. Cliquez sur le menu **+** > **Paywall & Commerce** > **Products** et choisissez un preset.
2. Sélectionnez une carte — sur le canvas ou dans le panneau **Layers**. Assignez un produit à la carte et laissez **Select offer (optional)** vide.
3. Répétez l'opération pour chaque formule que vous proposez — une carte par formule, sans l'essai.
4. Dupliquez chaque carte. Sur chaque copie, sélectionnez l'offre d'essai dans **Select offer (optional)**.

Chaque formule dispose maintenant de deux cartes pointant vers le même produit — l'une avec l'offre, l'autre sans.

## 2. Ajouter le bouton bascule d'essai \{#2-add-the-trial-toggle\}

1. Cliquez sur **+** > **Paywall & Commerce** > **Trial Toggle**.

2. Vérifiez que le bouton bascule appartient à un groupe sélectionnable du bon type. Cliquez sur une zone vide du canvas pour ouvrir **Screen settings**. Sous **Selectable groups**, ouvrez `trial_toggle`, définissez **Group Type** sur **Toggle**, puis cliquez sur **Save**. La boîte de dialogue affiche la variable que nous utiliserons pour détecter si le bouton bascule est activé : `trial_toggle.isActive`.

3. Modifiez le libellé du bouton bascule.

Laissez le bouton bascule désactivé par défaut. Un bouton bascule d'essai pré-sélectionné risque d'entraîner un rejet de l'App Store en tant que dark pattern — voir [Boutons bascule](builder-toggles).

## 3. Afficher les bonnes cartes selon l'état du toggle \{#3-show-the-right-cards-for-each-toggle-state\}

Dans l'onglet **Design** de chaque carte, sous **Visibility**, sélectionnez **Conditional** et définissez sa condition :

| Carte | Condition |
|---|---|
| Avec l'essai | `trial_toggle.isActive` **Equals** **True** |
| Sans l'essai | `trial_toggle.isActive` **Equals** **False** |

## 4. Sélectionner une carte visible quand le toggle change \{#select-a-visible-card-when-the-toggle-changes\}

Les cartes changent maintenant avec le toggle, mais le produit sélectionné, lui, ne change pas. Une carte qui devient invisible reste sélectionnée, et l'action **Purchase** la cible toujours — ainsi, un utilisateur qui active l'essai peut quand même être débité.

Ajoutez une **Conditional Action** au toggle pour que la sélection soit réinitialisée sur une carte visible à chaque appui.

1. Dans le panneau **Layers**, sélectionnez le conteneur **Trial toggle**.
2. Ouvrez l'onglet **Interactions**, ajoutez le déclencheur **On tap** et une **Conditional Action** :

| Bloc | Que configurer |
    |---|---|
    | **if** | `trial_toggle.isActive` **Equals** **True** |
    | **then** | **Select Product**, pointant vers une carte avec l'essai |
    | **else** | **Select Product**, pointant vers le même produit sans l'essai |

## 5. Mettre à jour le libellé du bouton \{#update-the-button-label\}

L'appel à l'action doit changer une fois l'essai activé.

1. Sélectionnez l'élément texte du bouton.
2. Dans l'onglet **Design**, sous **Content**, sélectionnez **Conditional** et cliquez sur **Edit conditions**.
3. Remplissez les blocs :

    | Bloc | Ce qu'il faut configurer |
    |---|---|
    | **if** | `trial_toggle.isActive` **Equals** **True** |
    | **then** | Le libellé pour l'essai, par exemple `Start your free trial` |
    | **else** | Le libellé standard, par exemple `Purchase` |

Pour en savoir plus sur le texte conditionnel, consultez [Ajouter du texte conditionnel](onboarding-text#add-conditional-text).