---
title: "Diseña tu paywall con Remote Config"
description: "Personaliza tu paywall con Remote Config en Adapty para una mejor segmentación."
---

El Remote Config de un paywall es una herramienta muy potente que ofrece opciones de configuración flexibles. Permite usar payloads JSON personalizados para adaptar tus paywalls con precisión. Con él puedes definir parámetros como títulos, imágenes, fuentes, colores y mucho más.

<details>
   <summary>Antes de empezar a personalizar un paywall (haz clic para expandir)</summary>

   1. [Crea un producto](create-product).
2. [Crea un paywall y añade el producto](create-paywall).
</details>

Para empezar a personalizar un paywall con Remote Config:

1. Abre la sección [**Paywalls**](https://app.adapty.io/paywalls) en el menú principal de Adapty.

2. Haz clic en el paywall para abrirlo.

  <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. Cambia a la pestaña **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 */
  }}
/>

El Remote Config tiene 2 vistas:

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

Tanto la vista **Table** como la vista **JSON** incluyen los mismos elementos de configuración. La única diferencia es una cuestión de preferencia: la vista de tabla ofrece un menú contextual que puede ser útil para corregir errores de localización.  
Puedes alternar entre vistas haciendo clic en la pestaña **Table** o **JSON** cuando lo necesites.

Sea cual sea la vista que elijas para personalizar tu paywall, podrás acceder a estos datos desde el SDK usando las propiedades `remoteConfig` o `remoteConfigString` de `AdaptyPaywall` y hacer ajustes en tu paywall. También puedes actualizar los valores del Remote Config de forma programática mediante la [API del servidor](api-adapty/operations/updatePaywall) para modificar dinámicamente las configuraciones del paywall sin tener que actualizar el dashboard manualmente. Aquí tienes algunos ejemplos de cómo puedes usar un Remote Config.

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

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

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

# Test fonts
```
</TabItem>
<TabItem value="Color" label="Color" 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="Paywall Soft/Hard" 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="Traducciones" default>
```json showLineNumbers
{
    "title": {
        "en": "Try for free!",
        "es": "¡Prueba gratis!",
        "ru": "Попробуй бесплатно!"
    }
}
```
</TabItem>
</Tabs>

Puedes combinar distintas opciones y crear las tuyas propias. Así podrás probar diferentes títulos, textos, imágenes, fuentes, colores, etc.

### Vista JSON del Remote Config \{#json-view-of-the-remote-config\}

En la vista **JSON** del Remote Config puedes introducir cualquier dato con formato 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 */
  }}
/>

### Vista de tabla del Remote Config \{#table-view-of-the-remote-config\}

Si no estás acostumbrado a trabajar con código y necesitas corregir algunos valores del JSON, Adapty tiene la vista **Table** para ti.

  <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 */
  }}
/>

Es una copia de tu JSON en formato de tabla, fácil de leer y entender. El código de colores ayuda a identificar los distintos tipos de datos.

Para añadir una clave, haz clic en el botón **Add row**. Verificamos automáticamente la correspondencia entre valores y tipos, y mostramos una alerta si tus cambios pueden generar un JSON inválido.

  <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 */
  }}
/>

Las opciones adicionales de fila son especialmente útiles para las [localizaciones del 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 */
  }}
/>

Ahora es el momento de [crear un placement](create-placement) y añadir el paywall. Después podrás <InlineTooltip tooltip="mostrar tus paywalls de 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), y [Unity](present-remote-config-paywalls-unity)</InlineTooltip> en tu app.