---
title: "Concevoir un paywall avec Remote Config"
description: "Personnalisez votre paywall avec Remote Config dans Adapty pour un meilleur ciblage."
---

:::important
Ce guide porte sur Remote Config pour les paywalls classiques. Pour le Flow Builder, consultez [Personnaliser un flow avec Remote Config](customize-flow-with-remote-config).
:::

Le Remote Config de paywall est un outil puissant qui offre des options de configuration flexibles. Il permet d'utiliser des charges JSON personnalisées pour adapter vos paywalls avec précision. Vous pouvez y définir divers paramètres tels que les titres, les images, les polices, les couleurs, et bien plus encore.

<details>
   <summary>Avant de commencer à personnaliser un paywall (Cliquez pour développer)</summary>

   1. [Créer un produit](create-product).
2. [Créer un paywall et y ajouter le produit](create-paywall).
</details>

Pour commencer à personnaliser un paywall avec Remote Config :

1. Ouvrez la section [**Paywalls**](https://app.adapty.io/paywalls) dans le menu principal d'Adapty.

2. Cliquez sur le paywall pour l'ouvrir.

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

3. Passez à l'onglet **Remote config**.

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

Remote Config propose 2 vues :

- [Table](customize-paywall-with-remote-config#table-view-of-the-remote-config)
- [JSON](customize-paywall-with-remote-config#json-view-of-the-remote-config)

Les vues **Table** et **JSON** contiennent les mêmes éléments de configuration. La seule différence est une question de préférence, à ceci près que la vue Table propose un menu contextuel, ce qui peut s'avérer utile pour corriger des erreurs de localisation.  
Vous pouvez basculer entre les vues en cliquant sur l'onglet **Table** ou **JSON** à tout moment.

Quelle que soit la vue choisie pour personnaliser votre paywall, vous pouvez ensuite accéder à ces données depuis le SDK via les propriétés `remoteConfig` ou `remoteConfigString` de `AdaptyPaywall`, et apporter des ajustements à votre paywall. Vous pouvez également mettre à jour les valeurs du Remote Config par programmation via l'[API côté serveur](api-adapty/operations/updatePaywall) afin de modifier dynamiquement les configurations de paywall sans intervention manuelle dans le tableau de bord. Voici quelques exemples d'utilisation d'un Remote Config.

<Tabs groupId="current-os" queryString>
  <TabItem value="Titles" label="Titres" default>
```json showLineNumbers
{
    "screen_title": "Today only: Subscribe, and get 7 days for free!"
}

# Test titles or others texts
```
</TabItem>
<TabItem value="Images" label="Images" default>
```json showLineNumbers
{
    "background_image": "https://adapty.io/media/paywalls/bg1.webp"
}

# Test images on your paywall
```
</TabItem>
<TabItem value="Fonts" label="Polices" default>
```json showLineNumbers
{
    "font_family": "San Francisco",
    "font_size": 16
}

# Test fonts
```
</TabItem>
<TabItem value="Color" label="Couleur" default>
```json showLineNumbers
{
    "subscribe_button_color": "purple"
}

# Test colors of buttons, texts etc.
```
</TabItem>
<TabItem value="HTML" label="HTML" default>
```json showLineNumbers
{
    "photo_gallery": "https://adapty.io/media/paywalls/link-to-html-snippet.html"
}

# Any HTML code that can be displayed on the paywall
```
</TabItem>
<TabItem value="Soft/Hard Paywall" label="Soft/Hard Paywall" default>
```json showLineNumbers
{
    "hard_paywall": true
}

# By setting it to true, you disalow skipping paywall without subscribing
# You have to handle this logic in your app
```
</TabItem>
<TabItem value="Translations" label="Traductions" default>
```json showLineNumbers
{
    "title": {
        "en": "Try for free!",
        "es": "¡Prueba gratis!",
        "ru": "Попробуй бесплатно!"
    }
}
```
</TabItem>
</Tabs>

Vous pouvez combiner différentes options et créer les vôtres. Vous pouvez ainsi tester différents titres, textes, images, polices, couleurs, etc.

### Vue JSON du Remote Config \{#json-view-of-the-remote-config\}

Dans la vue **JSON** du Remote Config, vous pouvez saisir n'importe quelle donnée au format JSON :

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

### Vue Table du Remote Config \{#table-view-of-the-remote-config\}

Si vous n'avez pas l'habitude de travailler avec du code et que vous devez corriger certaines valeurs du JSON, Adapty propose la vue **Table**.

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

Il s'agit d'une copie de votre JSON sous forme de tableau, facile à lire et à comprendre. Un code couleur permet de distinguer les différents types de données.

Pour ajouter une clé, cliquez sur le bouton **Add row**. Nous vérifions automatiquement la correspondance des valeurs et des types, et affichons une alerte si vos corrections risquent de produire un JSON invalide.

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

Les options supplémentaires de ligne sont surtout utiles pour les [localisations de paywall](add-remote-config-locale) :

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

Il est maintenant temps de [créer un placement](create-placement) et d'y ajouter le paywall. Ensuite, vous pourrez <InlineTooltip tooltip="afficher vos paywalls Remote Config">[iOS](present-remote-config-paywalls), [Android](present-remote-config-paywalls-android), [React Native](present-remote-config-paywalls-react-native), [Flutter](present-remote-config-paywalls-flutter), et [Unity](present-remote-config-paywalls-unity)</InlineTooltip> dans votre application mobile.