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

# OTP 区块 – 测验漏斗中的短信验证

> 在测验漏斗中添加 OTP 区块，通过短信验证码确认访客的电话号码，设置 Send Code、重发按钮和输入样式，减少虚假线索并提升线索质量。

## OTP 区块

OTP（One-Time Password，一次性密码）区块为你的测验漏斗添加短信电话验证。访客提交电话号码后，会通过短信收到一个验证码，必须输入该验证码才能继续。

这可确保你收集到的是**真实、经过验证的电话号码**，从而减少虚假线索，并提升电话和短信营销活动的效果。

## 工作原理

当访客到达 OTP 区块时，LanderLab 会自动识别在 Phone Number 字段中输入的电话号码，并通过短信向该号码发送验证码。访客输入验证码后即可继续。

<Warning>
  **重要：** OTP 区块必须始终放在 Phone Number 字段之后。如果没有可引用的电话号码，系统就无处发送验证码，验证将无法进行。
</Warning>

## 如何添加 OTP 验证

### 1. 添加 Phone Number 字段

确保你的步骤中包含 **Phone Number** 输入区块。访客会在这个字段中输入号码，OTP 系统会自动读取它。

### 2. 添加 OTP 区块

在步骤编辑器中，点击 **Add Block** 并选择 **OTP**。将其放在 Phone Number 字段之后，或放在后续步骤中。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Jnrh_0qON_PKwbtw/images/add-otp.png?fit=max&auto=format&n=Jnrh_0qON_PKwbtw&q=85&s=0de57d527f787a357beafd50e39593cb" alt="添加 OTP" width="1920" height="991" data-path="images/add-otp.png" />
</Frame>

### 3. 配置 OTP 区块

选择 OTP 区块以打开其设置面板。主要部分的说明如下。

### 4. 保存并测试

点击 **Update**，然后发布或重新发布你的漏斗。测试方法：

* 输入一个有效的电话号码
* 你应该会收到一条包含验证码的短信
* 输入验证码，确认整个流程正常运行

## 常规设置

| 设置 | 作用 |
| :- | :- |
| **Name** | 区块的内部引用名称 |
| **Label** | 显示在输入框上方的可选标签 |
| **Input Style** | 控制验证码输入框的外观（见下文） |

## Input Style

选择验证码输入框向访客呈现的方式：

**Digits** 显示独立的样式化方框，每位数字一个。这是更精致、更现代的外观。每个字符都有自己的方格，视觉上清晰且易于填写，非常适合注重设计质量的漏斗。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Jnrh_0qON_PKwbtw/images/Screenshot-2026-04-22-at-3.33.14-PM.png?fit=max&auto=format&n=Jnrh_0qON_PKwbtw&q=85&s=4e309b0292583e5554c09cbcf249c054" alt="Digits 样式的验证码输入框，每位数字一个方框" width="446" height="108" data-path="images/Screenshot-2026-04-22-at-3.33.14-PM.png" />
</Frame>

**Input** 单个标准文本框，简洁且熟悉。适合偏好极简外观，或数字方框与漏斗视觉风格不搭的情况。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Jnrh_0qON_PKwbtw/images/Screenshot-2026-04-22-at-3.32.12-PM.png?fit=max&auto=format&n=Jnrh_0qON_PKwbtw&q=85&s=9424d8177963dda12cd4ccdcc8520218" alt="Input 样式的单个验证码文本框" width="423" height="97" data-path="images/Screenshot-2026-04-22-at-3.32.12-PM.png" />
</Frame>

## 设置

### Resend Button

启用后，会在验证码输入框下方显示一个 **Resend** 链接。如果访客没有收到第一条验证码，可以用它请求新的验证码。

使用 **Resend Text** 字段自定义链接文字（默认：*Resend*）。

## Send Button：何时启用

这是最需要设置正确的选项，完全取决于 OTP 区块在漏斗中的位置。

### **当 OTP 区块与 Phone Number 字段位于同一步骤时：**

启用 Send Button。这会在步骤中添加一个 **Send Code** 按钮。访客输入电话号码后点击该按钮触发短信，然后在同一步骤中输入验证码。如果不启用此按钮，就无法在提交该步骤之前请求验证码。

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Jnrh_0qON_PKwbtw/images/send-code.png?fit=max&auto=format&n=Jnrh_0qON_PKwbtw&q=85&s=873d1ceec490652f900883ce7e1952ee" alt="发送验证码" width="1920" height="991" data-path="images/send-code.png" />
</Frame>

### **当 OTP 区块位于单独的步骤（电话号码步骤之后）时：**

你可以保持 Send Button 禁用。访客已经在上一步提交了电话号码，因此当他们进入 OTP 步骤时，LanderLab 会自动发送验证码。验证码输入框已准备就绪，无需按钮。

<Tip>
  快速规则：OTP 与电话号码在同一步骤 → 启用 Send Button；OTP 位于电话号码之后的单独步骤 → Send Button 可保持关闭
</Tip>

使用 **Send Text** 字段自定义按钮文字（默认：*Send Code*）。

### Validations

使用 **Error Text** 字段设置访客输入错误或过期验证码时显示的信息。

### Spacing

使用预设尺寸 **S、M、L 或 Full** 控制区块的**宽度**。调整上下**边距**（margin）值，微调步骤内的间距。

### SMS OTP 定价

SMS OTP 验证的费用为**每次验证 \$0.09**，且**仅限付费套餐**使用。如果你使用的是免费套餐，会在 OTP 区块设置中看到 **Activate Plan** 提示。

### 为什么使用 OTP 验证

* 确认访客拥有其提交的电话号码
* 杜绝虚假、输错或一次性的号码
* 提升呼叫中心和短信营销活动的线索质量
* 增强广告主对你线索数据的信心


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.