旅程定制
旅程定制功能让您可以将品牌的视觉形象应用到 Unico 身份验证流程中——无需提交工单, 无需依赖支持团队,效果立即可见。
您可以设置徽标、背景颜色、按钮颜色与形状,以及内容颜色。发布后,该配置会立即对您分支上 启动的后续流程生效。
适用对象: 使用 Web 流程(CbU)且采用 iFrame、重定向或 SDK 集成模式的客户。
终端用户的变化: 他们在身份验证过程中看到的界面现在会呈现您的品牌风格。
查找位置: IDCloud 门户 → 侧边栏设置 → 定制选项卡。
开始之前
访问权限
您的用户账号需要有访问 IDCloud 门户设置区域的权限。如果侧边栏没有显示齿轮图标,请让 您的账户管理员为您授予访问权限。
配置的生效方式
| 适用范围 | 定制配置按分支和集成模式分别生效。iFrame 与重定向/SDK 拥有独立的配置——发布其中一个不会影响另一个。 |
| 生效时间 | 发布后立即生效,适用于从该时刻起启动的流程。已在进行中的流程将保留之前的外观。 |
| 如果您未进行定制 | 流程将加载 Unico 的默认主题。 |
| 流程版本 | 预览基于Web 流程 v3.0设计。在其他版本中,预览可能无法准确反映实际效果——如遇此情况,请联系 Unico 更新您的版本。 |
需要准备的内容
- 徽标采用 PNG 格式,建议使用透明背景,高度不超过 60 px,大小不超过 100 KB。
- 您品牌颜色的十六进制代码(例如
#1B3FA0)。
您的集成中可配置的内容
除了集成模式之外,界面上显示的内容还取决于您集成的CbU 版本。这是"我看不到这个字段" 最常见的原因:
| 功能 | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 重定向 | 2.0 重定向 | 3.0 重定向 |
|---|---|---|---|---|---|---|
| 徽标 | ✅ | 不存在 | 不存在 | ✅ | ✅ | ✅ |
| 背景颜色 | — | — | — | — | — | ✅ |
| 按钮背景颜色 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 按钮文字颜色 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 按钮边框圆角 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 内容颜色 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
简而言之:背景颜色仅在重定向模式的 CbU 3.0 中可配置,而在 iFrame 模式下,徽标仅存在 于 CbU 1.0 中。颜色和按钮形状适用于所有组合。
如果您不知道自己所使用的版本,请咨询您的对接负责人或 Unico 支持团队。
分步说明
步骤 1 —— 打开定制选项卡
在 IDCloud 门户中,点击侧边栏中的齿轮图标(设置)。界面将直接打开定制选项卡。
设置界面包含三个选项卡——定制、Webhook 和 QR 码。本指南介绍第一个选项卡。
已选中定制选项卡的设置界面。
步骤 2 —— 选择集成模式
在左侧栏中,选择 iFrame 或 重定向或 SDK —— 表单字段会根据所选模式发生变化。
您可以在界面上识别出三个区域:左侧的模式选择器、中间的表单,以及右侧的实时 预览,它会在您发布之前对每一项更改做出反应。
如果您同时使用两种模式,则需要分别配置。 它们是独立的配置——先调整并发布其中一个, 然后对另一个重复操作。
iFrame / 重定向或 SDK 选择器、表单和预览。
步骤 3 —— 上传徽标
适用于重定向或 SDK。在 iFrame 中,仅适用于 CbU 1.0。
点击添加徽标并选择文件。要求:PNG 格式,最大高度 60 px,最大大小 100 KB。
请使用透明背景的 PNG 图片。 这样徽标就能适配任何背景颜色——如果 PNG 图片带有白色 背景,一旦背景被设置了颜色,就会出现一个明显的矩形。此外,建议优先使用横版徽标:可用 空间宽而短。
"添加徽标"字段,包含格式、高度和大小要求。
步骤 4 —— 设置颜色
表单中共有四个颜色字段,分别归类在背景、按钮和内容下:
| 字段 | 在流程中出现的位置 | 默认值 | 可用性 |
|---|---|---|---|
| 背景颜色 | 流程界面的背景 | #F2F2F7 | 仅重定向模式的 CbU 3.0 |
| 按钮 → 背景颜色 | 操作按钮的填充色(例如"拍摄自拍照") | — | 所有版本 |
| 按钮 → 文字颜色 | 按钮内的文字 | — | 所有版本 |
| 内容颜色 | 标题和描述(例如"身份验证") | #000000 | 所有版本 |
对于以上任意字段,您可以输入十六进制值(例如 #1B3FA0),或点击字段左侧的颜色
样块打开可视化选择器。对于背景和内容字段,只要保持为空,流程就会使用字段中以占位符
形式显示的默认值。
背景颜色以渐变方式呈现,而非纯色。 您设置的色调是渐变的顶部颜色,流程界面会朝着屏幕 底部逐渐变暗。非常深的色调会导致底部几乎变黑——如果您想要均匀的效果,请选择中等到浅色 的色调。
将品牌主色用作按钮背景色。 这是用户需要首先找到的元素;如果它不够醒目,流程的转化率 就会下降。
将这四种颜色作为一组来选择,而不是逐一选择。 它们会相互影响:深色背景配黑色内容颜色 会使流程无法阅读,浅色按钮放在白色卡片上则可能直接消失不见。先设置好全部四种颜色,然后 再在预览中检 查效果(步骤 6)。
背景颜色、按钮背景/文字颜色和内容颜色字段,以及预览中的效果。
步骤 5 —— 配置按钮
三个字段控制流程的操作按钮(例如"拍摄自拍照"):
| 字段 | 作用 |
|---|---|
| 背景颜色 | 按钮的填充色 |
| 文字颜色 | 按钮内文字的颜色 |
| 边框圆角 | 圆角大小,以像素为单位 |
边框圆角的参考值:
- 0 → 矩形按钮,直角边框
- 8 到 16 → 略微圆润的边角
- 24 或更大 → 药丸形状(完全圆润)
超过按钮高度一半的数值不会再改变效果——药丸形状是极限。
将品牌主色用作按钮背景色。 这是用户需要首先找到的元素——如果它不够醒目,流程的转化 率就会下降。同时,请保持边框圆角与产品其他部分一致,让流程感觉像是您应用的延续,而不是 第三方网站。
背景颜色、文字颜色和边框圆角,预览中显示按钮效果。
步骤 6 —— 在移动端和桌面端检查预览
右侧的预览会随每次更改而更新。使用顶部的移动端 / 桌面端选择器来检查两种格式的效果。
如果您输入了无效的颜色值——例如颜色名称或不完整的十六进制代码——该字段会显示红色 边框,且该值不会应用到预览中。请先修正后再继续。
务必在移动端模式下进行验证。 大多数终端用户是通过手机完成验证的;这是最重要的格式。 并且要检查三组对比度:按钮文字与按钮背景、按钮与流程卡片、内容颜色与背景颜色。常见的 情况是在白色卡片上配置白色按钮,导致按钮直接消失不见——预览的存在正是为了在您发布之前 发现这类问题。
移动端 / 桌面端选择器,以及高亮显示无效值的颜色字段。
步骤 7 —— 发布
一旦出现待处理的更改,发布按钮就会变为可用状态。
- 发布 会保存配置并将其应用到流程中。
- 取消 会放弃您所做的所有编辑,并将字段恢复到上次发布的状态。
- 要恢复为 Unico 默认设置,请清空颜色字段(让占位符重新出现)、移除徽标,然后发布。
没有版本历史记录。 如果您发布了错误的配置,解决方法是调整数值并重新发布——没有一键 恢复到之前版本的方式。这正是为什么上一步检查预览很重要。只要您尚未发布,点击"取消"即可 解决问题。
步骤 8 —— 注册允许的域名
仅适用于 iFrame 模式。
在 iFrame 模式下,流程以嵌入方式在您自己的页面中运行。出于安全考虑,只有在此处注册的 域名才能加载它。
-
点击右上角的配置域名。
-
侧边面板列出了已注册的域名,每个域名都带有编辑(铅笔图标)和删除 (垃圾桶图标)操作。
-
要添加域名,请点击创建域名,输入域名,然后点击保存。
请输入包含协议的域名(例如 https://yoursite.com)。
该列表是一项安全设置,单独保存。 它通过面板自身的保存按钮生效,而不是主界面的 发布按钮。同时也要注册您的测试和预发布域名,并移除不再使用的域名——这份列表决定了 谁可以嵌入您的流程。
常见问题
更改会应用到已经在运行的流程吗? 不会。已发布的配置仅适用于发布之后启动的流程。
为什么我看不到徽标和背景字段? 有两种可能的原因。第一:您可能选择了 iFrame ——在 iFrame 模式下,流程嵌入在您自己的页面中,该页面已经提供了背景和品牌标识。第二:您的 CbU 版本可能没有开放该字段。背景颜色仅存在于重定向模式的 CbU 3.0 中,而 iFrame 中 的徽标仅存在于 CbU 1.0 中。请查看"开始之前"中的表格。
我的徽标上传时被拒绝了,为什么? 请检查三项要求:PNG 格式、高度不超过 60 px、 大小不超过 100 KB。
屏幕底部的背景看起来太暗。 这是正常现象——背景 以渐变方式呈现,从上到下逐渐变暗。请 选择较浅的基础色调。
预览与我的实际流程不一致。 预览基于Web 流程 v3.0设计。如果您的集成使用的是其他 版本,效果可能会有所不同——请联系 Unico 评估版本更新事宜。
我发布了错误的配置,该如何恢复? 重新打开界面,调整数值(或清空以恢复默认值),然后 重新发布。没有版本历史记录。如果您尚未发布,只需点击取消即可。
是谁更改了我账户上的定制配置? 该界面不显示此类历史记录。要了解是哪位用户在何时进行 了最后一次更改,请联系 Unico 支持团队。
快速参考
IDCloud 门户
└─ 设置(侧边栏齿轮图标)
└─ 定制选项卡
├─ iFrame ............... 按钮(背景色、文字颜色、边框圆角)
│ 内容(内容颜色)
│ + 配置域名
└─ 重定向或 SDK ......... 徽标(PNG,60 px,100 KB)
背景(颜色,以渐变方式呈现)
按钮(背景色、文字颜色、边框圆角)
内容(内容颜色)
实时预览 · 移动端 / 桌面端 · 取消 · 发布