# H5网页

# 流程示意

# 配置主题样式

主题样式用于定义会话组件的视觉与交互表现。区块右上角显示「已上线」，表示当前配置已发布到线上。

生效规则：主题样式修改后点击【更新上线】以使修改的样式生效并上线，无需重新部署代码。

# 可修改的样式项

样式项	说明
对话气泡圆角大小	可以设置对话气泡的圆角大小，调整气泡的外观
字体大小	调整字体的大小，提升可读性和用户体验
输入提示内容	设置用户输入框的提示内容，指导用户进行交互
推荐问题开关	可以选择开启或关闭推荐问题功能，自定义推荐的问题
多媒体输入开关	控制是否允许用户通过多媒体进行输入（机器人无法理解）
主题色	默认：默认主题色为绿色其他颜色：系统提供六种预设主题色供选择自定义颜色：支持用户自定义颜色，包括：用户消息气泡背景色、机器人消息气泡背景色、发送按钮背景色、推荐问题文字颜色、H5对话背景色

# 获取接入代码

# 接入代码说明

# 展现形态

展现形态	说明
悬浮气泡	页面角落常驻入口，点击展开会话。适用于官网、产品页、帮助中心等常规页面，不打断浏览。
独立全屏	占满窗口，适合独立客服页。

# 展现形态参数

配置以下参数，代码实时联动，一键复制配置即可更新

# 悬浮气泡：

<script src="https://chatbot.weixin.qq.com/mmpraiweb_node/dist/static/script/H5_SDK_ACCESS.js"></script>
<script>
WxChat.init({
  appId: "appId",
  openId: "openId",
  robotName: "robotName",
  mode: "bubble",
  position: "bottom-right",
  offset: 24,
  defaultOpen: true,
});
</script>

# 独立全屏：

<script src="https://chatbot.weixin.qq.com/mmspraiweb_node/dist/static/script/H5_SDK_ACCESS.js"></script>
<script>
WxChat.init({
  appId: "appId",
  openId: "openId",
  robotName: "robotName",
  mode: "fullscreen",
});
</script>

# 参数说明：

参数	类型	说明
robotName	string	机器名名称。
mode	string	展现形态，与「悬浮气泡 / 独立全屏」对应。
position	string	入口停靠位置，可选择：左下角/右下角，与「停靠位置」下拉对应。
offset	number	距页面边缘的边距，单位为 px，默认 24 px。
defaultOpen	boolean	页面加载后是否自动展开会话窗口，默认开启。

主题样式由控制台下发，改主题无需替换代码；mode、position 等字段的具体取值以控制台【复制代码】生成的内容为准。

# 部署与配置可信域名

● 将代码复制到页面前并重新部署，完成线上发布。

● 在【可信域名】中填入正式域名（如 https://example.com ），回车确认，可连续添加，最多 10 个。

生效规则：可信域名保存后立即生效，仅白名单内的域名可加载 SDK。

# 可信域名

可信域名用于维护允许加载 SDK 的域名白名单，是接入的安全边界。区块右上角显示「已上线」。

关键点	说明
填写格式	如 example.com
添加方式	回车确认，可连续添加多个
数量上限	最多 10 个
生效方式	保存后立即生效
加载规则	仅白名单内的域名可加载 SDK

# 注意事项

修改主题样式后线上未变化：主题样式保存后立即生效，通常无需部署。请确认保存成功、当前域名已在可信域名白名单内，并刷新页面（必要时清理 CDN 缓存）。

修改展现形态后未生效：展现形态与气泡参数属于代码侧参数，需重新复制代码、替换页面中的旧代码并重新部署。

页面没有出现会话入口：依次检查代码是否置于前、是否已重新部署、当前访问域名是否在可信域名白名单内，以及浏览器控制台是否有 SDK 加载报错。

# 第三方客服系统接入- H5接入鉴权：

详见H5接入鉴权教程