# H5网页

## 流程示意

![](https://res8.wxqcloud.qq.com.cn/wxdoc/3cb05f02-aa1c-4d21-aa58-91d2c9cc2a3d.png)

## 配置主题样式

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

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

### 可修改的样式项

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