---
title: "Boutons dans le Flow Builder"
description: "Ajoutez et configurez des boutons d'action dans le Flow Builder."
---

:::info
Cette section décrit le nouveau Flow Builder, qui fonctionne avec les SDK Adapty version 4.0 ou supérieure.
:::

Les boutons sont les éléments interactifs du Flow Builder qui réagissent aux appuis des utilisateurs. Utilisez-les pour :
- Les CTA d'achat qui se connectent aux produits et traitent les transactions automatiquement
- La navigation — déplacer les utilisateurs entre les écrans (Suivant, Retour, Fermer, Ignorer)
- Les liens utilitaires — Restaurer les achats, Conditions d'utilisation et Politique de confidentialité

:::tip
Placez les CTA d'achat, les liens de restauration et les liens légaux dans un [Pied de page](builder-containers#footer) — il est épinglé en bas de l'écran et masque les éléments défilants en dessous.
:::

## Ajouter des boutons \{#add-buttons\}

Pour ajouter un bouton :

1. Cliquez sur **+** et sélectionnez **Button**.
2. Sélectionnez un type de bouton.

    <img src="/assets/shared/img/button-type.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

3. Les boutons d'achat, les liens et les boutons de fermeture sont fournis avec des actions préconfigurées. Pour les liens, [configurez les URL de navigation des utilisateurs](#links). Pour les autres types de boutons, accédez au panneau **Interactions**. Là, dans la section **Button triggers**, configurez les [actions](onboarding-actions) que le bouton doit effectuer.

    <img src="/assets/shared/img/button-action.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

4. Configurez le [design du bouton](builder-styling) dans le panneau **Design**.

## Types de boutons \{#button-types\}

### Boutons d'achat \{#purchase-buttons\}

:::link
Pour que les boutons d'achat fonctionnent, associez des produits aux écrans et ajoutez l'élément **Products**. Consultez le [guide](paywall-product-block).
:::

Un bouton d'achat lance l'achat intégré pour le produit que l'utilisateur a sélectionné sur l'écran. Le SDK traite la transaction automatiquement, vous n'avez donc pas besoin de gérer les achats dans le code de l'application.

Pour ajouter un bouton d'achat :

1. Cliquez sur **+** et sélectionnez **Button**, puis choisissez un preset de bouton.
2. Avec le bouton sélectionné, ouvrez l'onglet **Interactions** dans le panneau de droite.
3. Cliquez sur **Add trigger** > **On tap**, puis cliquez sur **Add action**.
4. Définissez **Action** sur **Purchase** et **Product** sur `products.selectedProduct`. La variable `products.selectedProduct` correspond toujours au produit actuellement sélectionné sur l'écran.

:::tip
Vous pouvez attirer davantage l'attention sur les boutons d'achat en les animant. Le Paywall Builder prend actuellement en charge le type d'animation **Pulse**.

Configurez le style d'animation dans le panneau **Design**.
:::

  <img src="/assets/shared/img/purchase-button.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Liens \{#links\}

:::important
Les boutons **Terms of Use** et **Privacy Policy** disposent d'une action **Open URL** intégrée. Définissez l'URL de destination à cet endroit. Les URL vides dans Open URL et les [liens en ligne](onboarding-text#inline-link) bloquent la prévisualisation et la publication.
:::

Pour respecter certaines exigences des stores, vous pouvez ajouter des liens vers :
- Les conditions d'utilisation
- La politique de confidentialité
- La restauration des achats

Pour ajouter des liens :
1. Cliquez sur **+** et sélectionnez **Button > Links**. Cela ajoutera une rangée de boutons en ligne avec des actions prédéfinies : restaurer les achats ou ouvrir une URL. Si vous n'avez pas besoin de tous les boutons inclus, supprimez ceux dont vous n'avez pas besoin dans le panneau des calques.

    <img src="/assets/shared/img/add-links.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

2. Configurez maintenant les actions des boutons :

   - Le bouton **Restore purchases** gère déjà la restauration des achats.
   - Pour chaque lien restant :
        1. Cliquez sur le bouton pour le sélectionner et passez à l'onglet **Interactions** à droite.
        2. Collez l'URL dans le champ.
        3. Par défaut, l'URL s'ouvre dans un navigateur intégré à l'application pour une expérience utilisateur fluide. Si vous souhaitez rediriger les utilisateurs vers un navigateur externe, cochez la case **Open in external browser**.

  <img src="/assets/shared/img/pb-links.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Fermer le flow \{#close-flow\}

Le bouton **Close** ferme le flow automatiquement.

Pour ajouter un bouton de fermeture, cliquez sur **+** et sélectionnez **Button > Close flow**.

    <img src="/assets/shared/img/close-flow.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

:::tip
Utilisez la position **Absolute** pour placer votre bouton de fermeture dans le coin de l'écran.
:::

Vous pouvez également configurer n'importe quel autre bouton pour fermer le flow à l'aide des [actions](onboarding-actions).

### Boutons personnalisés \{#custom-buttons\}

Tout bouton que vous ajoutez peut être configuré pour effectuer n'importe quelle action lors d'un appui :
- Naviguer vers l'écran suivant
- Afficher une alerte
- Définir une [variable](onboarding-variables)
- [Afficher ou masquer des éléments de l'écran](onboarding-element-visibility)
- Ouvrir des URL
- Restaurer les achats
- Effectuer des actions conditionnelles