> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 创建自定义偏好或取消订阅页面

> 学习如何用品牌化、多语言和个性化的邮件偏好页面替换OneSignal的默认取消订阅链接，同时保持合规性和跟踪功能。

OneSignal提供了[默认的邮件合规取消订阅体验](./unsubscribe-links-email-subscriptions)，将链接注入到您的邮件模板中，让用户可以轻松取消订阅，其偏好设置也会实时更新。

如果您想完全控制品牌、文案和字段（如类别退订），您可以用自己的自定义页面替换默认链接，并使用OneSignal API来取消订阅或更新用户偏好。

自定义取消订阅页面允许：

* 品牌视觉效果（标志、颜色、字体）
* 多语言支持
* 使用[标签](./add-user-data-tags)进行偏好管理（退订特定邮件类别而不是全部）
* 额外组件如调查以收集反馈

## 先决条件

在构建自定义页面之前，确保您具备：

* \*\*熟悉[Liquid](./message-personalization)\*\*用于个性化。
* **OneSignal API访问权限** – 根据您的需求，您可能使用：
  * [通过Token更新订阅](/reference/update-subscription-by-token) – 通过邮件地址更新或取消订阅。
  * [使用Token取消订阅邮件](/reference/unsubscribe-with-token) – 跟踪特定邮件消息ID的取消订阅。
  * [更新用户](/reference/update-user) – 更新个人资料、标签和偏好。
  * [Web和移动SDK](./web-sdk-setup) – 实时管理偏好。

***

## 移除OneSignal的默认取消订阅链接

OneSignal会自动在您的邮件模板中插入`[unsubscribe_url]`。此URL会取消用户在OneSignal中的所有邮件订阅。

要使用您自己的页面：

<Steps>
  <Step title="移除OneSignal的默认取消订阅链接">
    OneSignal会自动在您的邮件模板中插入`[unsubscribe_url]`。此URL会取消用户的邮件订阅以免收到OneSignal中的进一步邮件。有关详细信息，请参阅[邮件取消订阅链接](./unsubscribe-links-email-subscriptions)。

    要使用您自己的页面，**在模板中找到并移除默认链接**。

    ```html theme={null}
    <a href="[unsubscribe_url]">取消订阅</a>
    ```

    在块编辑器中，默认链接可能显示为嵌套形式：

    <Frame caption="块编辑器取消订阅链接">
      <img src="https://mintcdn.com/onesignal/0qspEXXeJ8zJbkJ-/images/docs/82cc033-Default_Unsubscribe.png?fit=max&auto=format&n=0qspEXXeJ8zJbkJ-&q=85&s=3c507499bbc29854761df1136f8c0ff4" alt="块编辑器取消订阅链接" width="1598" height="1203" data-path="images/docs/82cc033-Default_Unsubscribe.png" />
    </Frame>
  </Step>

  <Step title="添加您的自定义取消订阅链接">
    用您自己的URL替换默认链接。使用[Liquid变量](./message-personalization)将OneSignal数据传递给您的页面。

    常用参数：

    | 参数                               | 描述            |
    | -------------------------------- | ------------- |
    | `app.id`                         | OneSignal应用ID |
    | `message.id`                     | 邮件通知的ID       |
    | `subscription.email`             | 订阅者的邮件地址      |
    | `subscription.external_id`       | 用户的外部ID       |
    | `subscription.language`          | 首选语言（用于本地化）   |
    | `subscription.unsubscribe_token` | 用于API验证的安全令牌  |

    **示例HTML块：**

    ```html HTML theme={null}
      <div style="text-align: center;">
        <a
          href="https://examplesite.com/unsubscribe?app_id={{app.id}}&notification_id={{message.id}}&email={{subscription.email}}&language={{subscription.language}}&token={{subscription.unsubscribe_token}}"
          data-disable-tracking="true"
          style="display: inline; text-decoration: none;"
        >
          取消订阅
        </a>
        <p style="display: inline;">我们的邮件</p>
      </div>
    ```

    <Frame caption="添加自定义取消订阅链接">
      <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0c94ab0-HTML_unsubscribe_custom.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=e931f0e8649ea80d29194e0db2722942" alt="添加自定义取消订阅链接" width="1606" height="1175" data-path="images/docs/0c94ab0-HTML_unsubscribe_custom.png" />
    </Frame>
  </Step>
</Steps>

### 禁用点击跟踪

取消订阅点击不应用于参与度指标。

为您的发送服务添加适当的无跟踪属性：

```html HTML theme={null}
  <a
    href="https://www.examplesite.com/unsubscribe?app_id={{app.id}}&notification_id={{message.id}}&email={{subscription.email}}&language={{subscription.language}}&token={{subscription.unsubscribe_token}}"
    data-disable-tracking="true"
  >
    取消订阅
  </a>
```

**特定提供商属性：**

| 提供商       | 属性                             |
| --------- | ------------------------------ |
| OneSignal | `data-disable-tracking="true"` |
| Mailgun   | `disable-tracking=true`        |
| SendGrid  | `clicktracking=off`            |
| Mandrill  | `mc:disable-tracking`          |

***

## 托管您的自定义取消订阅页面

部署一个网页，它：

* 从取消订阅链接读取查询参数。
* 显示用户友好的退订或偏好选项。
* 通过API向OneSignal发送取消订阅或更新请求。

<Info> 我们提供一个可用的[GitHub示例项目](https://github.com/OneSignalDevelopers/custom-email-unsubscribe-page-sample)，您可以复制并部署。 </Info>

<Frame caption="示例取消订阅页面UI">
  <img src="https://mintcdn.com/onesignal/jBdBk5XvQR5eKOks/images/docs/75a39d1-Github_page.png?fit=max&auto=format&n=jBdBk5XvQR5eKOks&q=85&s=4d1b004b41a3ad4bd3e7c4f76da7e9fc" alt="示例取消订阅页面" width="1448" height="1438" data-path="images/docs/75a39d1-Github_page.png" />
</Frame>

***

## 调用OneSignal API

根据您的用例，您可以使用以下API来取消订阅或更新用户偏好：

* [通过Token更新订阅](/reference/update-subscription-by-token)
* [使用Token取消订阅邮件](/reference/unsubscribe-with-token)
* [更新用户](/reference/update-user)

<Tabs>
  <Tab title="通过Token更新订阅">
    当您有用户的邮件地址并只想让他们订阅或取消订阅所有邮件时，最常用此API。

    **必需的查询参数：**

    * `app_id`
    * `token`

    **需要身份验证**

    * 从您的服务器调用此API。
  </Tab>

  <Tab title="使用Token取消订阅邮件">
    当用户确认取消订阅时，调用[使用Token取消订阅邮件](/reference/unsubscribe-with-token) API。

    **必需的查询参数：**

    * `app_id`
    * `notification_id`
    * `token`

    **可选参数：**

    * `email`
    * `language`

    **JavaScript示例：**

    ```javascript JavaScript theme={null}
    const unsubscribeURL = (href) => {
      const unsubscribeURL = new URL(href)
      const appID = unsubscribeURL.searchParams.get("app_id")
      const notificationID = unsubscribeURL.searchParams.get("notification_id")
      const unsubscribeToken = unsubscribeURL.searchParams.get("token")
      const language = unsubscribeURL.searchParams.get("language")
      const email = unsubscribeURL.searchParams.get("email")
      return {
        unsubscribeURL: `https://api.onesignal.com/apps/${appID}/notifications/${notificationID}/unsubscribe?token=${unsubscribeToken}`,
        meta: { language, email },
      }
    }
    ```
  </Tab>

  <Tab title="更新用户">
    使用[更新用户](/reference/update-user) API更新用户的偏好。

    **必需的查询参数：**

    * `app_id`
    * `alias_id` - 推荐使用用户的外部ID。

    **需要身份验证**

    * 从您的服务器调用此API。
  </Tab>
</Tabs>

***

<Check>
  现在您应该具备了创建自定义取消订阅页面所需了解的一切。
</Check>

***