---
title: "Thiết kế paywall với Remote Config"
description: "Tùy chỉnh paywall của bạn với Remote Config trong Adapty để nhắm mục tiêu tốt hơn."
---

:::important
Hướng dẫn này đề cập đến Remote Config cho các paywall thông thường. Đối với Flow Builder, xem [Tùy chỉnh flow với remote config](customize-flow-with-remote-config).
:::

Paywall Remote Config là một công cụ mạnh mẽ cung cấp các tùy chọn cấu hình linh hoạt. Nó cho phép sử dụng các JSON payload tùy chỉnh để điều chỉnh paywall của bạn một cách chính xác. Với nó, bạn có thể định nghĩa các tham số khác nhau như tiêu đề, hình ảnh, phông chữ, màu sắc và nhiều hơn nữa.

<details>
   <summary>Trước khi bắt đầu tùy chỉnh paywall (Nhấn để mở rộng)</summary>

   1. [Tạo sản phẩm](create-product).
2. [Tạo paywall và thêm sản phẩm vào đó](create-paywall).
</details>

Để bắt đầu tùy chỉnh paywall bằng Remote Config:

1. Mở mục [**Paywalls**](https://app.adapty.io/paywalls) trong menu chính của Adapty.

2. Nhấn vào paywall để mở nó.

  <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. Chuyển sang tab **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 có 2 chế độ xem:

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

Cả chế độ xem **Bảng** và **JSON** đều bao gồm các thành phần cấu hình giống nhau. Sự khác biệt duy nhất là theo sở thích cá nhân, với điểm khác biệt duy nhất là chế độ xem bảng cung cấp menu ngữ cảnh, có thể hữu ích khi sửa lỗi bản địa hóa.  
Bạn có thể chuyển đổi giữa các chế độ xem bằng cách nhấn vào tab **Bảng** hoặc **JSON** bất cứ khi nào cần.

Dù bạn chọn chế độ xem nào để tùy chỉnh paywall, bạn vẫn có thể truy cập dữ liệu này từ SDK sau đó thông qua thuộc tính `remoteConfig` hoặc `remoteConfigString` của `AdaptyPaywall`, và thực hiện một số điều chỉnh cho paywall của bạn. Bạn cũng có thể cập nhật các giá trị Remote Config theo lập trình thông qua [server-side API](api-adapty/operations/updatePaywall) để thay đổi cấu hình paywall một cách linh động mà không cần cập nhật thủ công trên dashboard. Dưới đây là một số ví dụ về cách bạn có thể sử dụng Remote Config.

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

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

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

# Test fonts
```
</TabItem>
<TabItem value="Color" label="Màu sắc" 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="Bản dịch" default>
```json showLineNumbers
{
    "title": {
        "en": "Try for free!",
        "es": "¡Prueba gratis!",
        "ru": "Попробуй бесплатно!"
    }
}
```
</TabItem>
</Tabs>

Bạn có thể kết hợp các tùy chọn khác nhau và tự tạo ra của riêng mình. Bằng cách này, bạn có thể thử nghiệm các tiêu đề, văn bản, hình ảnh, phông chữ, màu sắc khác nhau và nhiều hơn nữa.

### Chế độ xem JSON của Remote Config \{#json-view-of-the-remote-config\}

Trong chế độ xem **JSON** của Remote Config, bạn có thể nhập bất kỳ dữ liệu nào theo định dạng 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 */
  }}
/>

### Chế độ xem Bảng của Remote Config \{#table-view-of-the-remote-config\}

Nếu bạn không quen làm việc với code và cần sửa một số giá trị trong JSON, Adapty có chế độ xem **Bảng** dành cho bạn.

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

Đây là bản sao JSON của bạn ở định dạng bảng dễ đọc và hiểu. Mã màu giúp nhận biết các kiểu dữ liệu khác nhau.

Để thêm một key, nhấn nút **Add row**. Chúng tôi tự động kiểm tra việc ánh xạ giá trị và kiểu dữ liệu, đồng thời hiển thị cảnh báo nếu các chỉnh sửa của bạn có thể dẫn đến JSON không hợp lệ.

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

Các tùy chọn hàng bổ sung chủ yếu hữu ích cho [bản địa hóa 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 */
  }}
/>

Bây giờ đã đến lúc [tạo một placement](create-placement) và thêm paywall vào đó. Sau đó, bạn có thể <InlineTooltip tooltip="hiển thị các paywall Remote Config của bạn">[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), và [Unity](present-remote-config-paywalls-unity)</InlineTooltip> trong ứng dụng di động của bạn.