渠道部署方式介绍文档

您可选择将已经设置好的机器人以H5应用类型部署到各个渠道，比如自家官网、微信小程序等，目前支持：网页/自研app、微信（公众号/小程序）、支付宝（小程序）。

1.选择“独立页面部署”

1）点击“生成新部署地址”，也就是承接服务的咨询页面地址，最多可生成5个。注：如您已进行获取用户登录token的操作，请在url拼接上token信息（举例：http：//......from=xxx&_user_access_token=xxx)，再部署到渠道页面中哦!

2）给生成的地址命名，用于区分在不同页面部署的服务入口，后期可以进行数据分析。注：假如部署后进入不了聊天窗，建议检查网络是否加了代理之类。

3）生成的地址要部署到哪里，就把链接部署到指定页面的服务入口（参考下图），点击可跳转服务窗口

→点击“在线沟通”打开咨询页面 →

2.选择“悬浮挂件部署”

1）提供悬浮挂件的图标和名称，默认悬浮挂件样式如图。

2）注释中红框圈出来的位置就是你上传图标和名称后，会替换掉的位置。注：假如悬浮挂件只想显示图标，不想要文字，悬浮入口名称可不填。

3）点击“添加页面地址”（也叫“宿主页面”），输入悬浮挂件需要悬浮的页面地址，最多可添加20个。

注意↓↓↓

4）复制悬浮挂件的脚本（见图一），把脚本复制插入到悬浮的网站代码中（参考图二），假如您已经进行获取用户登录token的api接入，请在脚本上添加token信息（参考图三）。

图一：<代码中的from：***，***来源h5地址后缀code（from=？）>

图二：

图三：

可复制代码（xxxx记得改哦）：

params:{ _user_access_token:'xxxxxxxx' }

5）确认部署，完成代码发布。

6）调整悬浮挂件位置（非必要操作）

目前悬浮挂件大小不支持修改，如果想调整位置，请参考下方代码根据自身需求添加到悬浮挂件代码中。

// [可选] 希望停靠的容器，可选，提供了之后，会计算容器的位置从而使服务窗悬浮在容器的一侧。

// [optional] the container of dialog, if provided, the dialog will align at the side of container

container: {

// 停靠容器的选择器

// the container selector

selector: '#main',

// 值可以为 'left' 或者 'right'，表示停靠在容器的左侧还是右侧，默认为 'right'

// dialog align at left or right, default is 'right'

align: 'left',

// 基于容器位置做相对偏移，可选，x 为水平偏移量，y 为垂直偏移量，值必须是数字，可以是正数或者负数，默认单位为 px

// the position that offset the container, x is horizontal, y is vertical

offset: {

x: 10,

y: 25

}

},

// [可选] 在页面上出现的绝对位置，

// 可填入的属性为 'left', 'right', 'top', 'bottom'，

// 位置设置为固定数值时，填写数字即可，默认单位为 px， 例如：12，

// 位置设置百分比时，默认填写格式为数字 + '%'， 例如：'12%'。

// 默认值：right: 40, bottom: 50

// 同时设置 top & bottom 时，top 优先

// 同时设置 left & right 时，left 优先

position: {

bottom: 100, // 像素

top: '10%' // 百分比

},

3. 选择“微信（公众号/小程序）h5部署”

1) 进入微信H5管理页面

点击“微信授权管理”可查看当前业务空间下的所有微信端授权；

2) 关联微信（公众号/小程序）

点击“新增微信授权”新增微信授权，具体操作步骤如下；

step1: 配置域名&下载授权文件

在微信端完成域名配置和授权文件下载；

操作路径：小程序页面→开发管理→开发设置→业务域名，点击修改对应域名并完成下载校验文件。

step2: 新增授权信息

点击”新增授权微信“后，通过手机端扫码添加公众号/小程序扫码授权；

step3：上传授权文件

微信小程序需要上传之前下载的授权文件，微信公众号则不需要上传授权文件；

文件内容为第一步在微信端下载的校验文件，此处域名为自动生成。

step4：绑定关联渠道

把微信与机器人部署渠道做关联绑定。

注意：

1.已经授权过的公众号/小程序，扫码则会提示：该公众号/小程序在其他业务空间下已授权，请先解绑后再操作。图1

2.解除绑定后，授权信息、已关联的渠道和关联数据都会自动删除。

报错图示如下：

step5：部署

点击“部署”按钮才能生效哦，然后使用“独立页面部署”添加的链接就可以啦！

4. 选择“支付宝（小程序）h5部署”

1）进入支付宝授权界面

点击“支付宝授权管理”可查看当前业务空间下的所有支付宝端授权；

2）关联支付宝小程序

点击“新增支付宝授权”可新增业务空间内支付宝授权；

step1：新增域名&下载授权文件

在支付宝端完成域名配置和授权文件下载

step2：新增支付宝小程序

点击“新增支付宝小程序”，填写支付宝端appid和对应账号名称。

step3：上传授权文件

上传支付宝端下载的校验文件。

step4：关联当前已部署好的渠道

step5：部署

点击“部署”按钮才能生效哦，然后使用“独立页面部署”添加的链接就可以啦！

5. 选择“抖音（小程序）h5部署”

1）进入抖音授权管理界面

点击“抖音授权管理”可查看当前业务空间下的所有抖音端授权；

2）关联抖音小程序

点击“新增抖音小程序”可新增业务空间内抖音授权；

step1：新增抖音小程序：

点击“新增抖音小程序”，填写抖音开放平台账号名称和对应AppID。

step2：上传授权文件

上传抖音端下载的授权文件。

step3：域名配置

务必将“域名配置栏”的域名配置到抖音小程序的“h5域名配置”中

抖音侧配置路径：控制台→我的应用→打开小程序→小程序配置页点击“前往配置”→点击“开发配置”→“服务器域名”→在“request合法域名”里添加配置。

step4：关联当前已部署好的渠道

step5：部署

点击“部署”按钮才能生效哦。然后使用“独立页面部署”添加的链接就可以啦！

二. 常见问题

1. 安全校验如何去除？

H5聊天窗默认支持游客身份访问，为了防刷，游客访问时需要进行安全校验；倘若进行了“获取用户登录token”的api接入，可实现用户进入聊天窗免登获取token；以带访客信息的身份咨询，将无需安全校验。

api接入操作文档见：https://help.aliyun.com/document_detail/439788.html。

2. 工作台访客名片上如何显示用户昵称？

访客名片显示用户昵称，需要先进行“获取用户登录token”的api接入，未接入前，咨询用户均以游客身份咨询，接入后，可实现用户进入聊天窗免登获取token，访客名片将显示用户昵称。

api接入操作文档见：https://help.aliyun.com/document_detail/439788.html。

3. 用户咨询的聊天记录保存多久？

游客身份访问时会生成一个临时token，token有效期8小时，8小时后聊天记录会自动清除；如需要聊天记录长时间保存，可进行“获取用户登录token”的api接入，可实现用户进入聊天窗免登获取token，聊天记录将长期保留。

api接入操作文档见：https://help.aliyun.com/document_detail/439788.html。

4. 消息协议

• 消息协议

• 消息头

• 消息体

Message Schema（消息内容）

• 消息类型

1）文本消息

{
    "msgType":"text",
    "content":{
  	  "text":"Hello world"
    }
}

2）图片

{
    "msgType":"image",
    "content":{
  	  "picUrl":"https://www.alimebot.com/1.jpg"
    }
}

3）富文本消息

{
    "msgType":"richtext",
    "content":{
  	  "contentType":"Html",
  	  "text":"${text}"
    }
}

4）视频消息

{
    "msgType":"video",
    "content":{
  	  "url":"${url}",
  	  "duration":"${duration}",
  	  "cover":"${cover}"
    }
}

5）指令消息

{
    "msgType":"cmd",
    "content":{
  	  "code":"${code}",
  	  "params":"",
      "text":""
    }
}

6）卡片消息

{
    "msgType":"card",
    "content":{
        "code":"${code}",
        "data":{},
    },
    "context":{
    
    },
  	"extraInfo":{
    
    }
}

7）系统消息

{
  type: 'system',
  content: {
    text: "",
    action: {
      text: "",
      onClick: () => {}
    },
  },
}

5. 如何获取表情包

替换加粗红色字体部分可查看其他表情包，更多表情包见“6.表情包合集”； wwEmoji 例如：'天使': '023' 表情包地址：https://chat-ui.oss-cn-hangzhou.aliyuncs.com/face-qn2020/023.png

展示：

xmEmoji 例如：'开心': '006' 表情包地址：https://g.alicdn.com/crm/static/0.5.5/xm/006.gif

展示：

tbEmoji 例如："飞吻":"008", 表情包地址：https://g.alicdn.com/crm/static/0.5.5/tb/008.png

展示：

6. 表情包合集

const wwEmoji = {
	'微笑': '001',
	'害羞': '002',
	'吐舌头': '003',
	'忧伤': '047',
	'再见': '024',
	'迷惑': '030',
	'安慰': '009',
	'飞吻': '008',
	'天使': '023',
	'挥泪告别': '054',
	'爱慕': '005',
	'加油': '011',
	'傻笑': '040',
	'小样': '036',
	'委屈': '048',
	'悲泣': '049',
	'大哭': '050',
	'痛哭': '051',
	'对不起': '053',
	'小二': '070',
	'恭喜发财': '069',
	'财神': '067',
	'抱抱': '010',
	'玫瑰': '085',
	'爱心': '087',
	'漂亮MM': '078',
	'帅哥': '079',
	'胜利': '012',
	'成交': '081',
	'鼓掌': '082',
	'握手': '083',
	'疑问': '031',
	'无奈': '042',
	'强': '013',
	'跳舞': '007',
	'查找': '017',
	'享受': '026',
	'偷笑': '004',
	'好主意': '021',
	'流口水': '025',
	'露齿笑': '016',
	'流汗': '043',
	'呆若木鸡': '028',
	'皱眉': '055',
	'摇头': '037',
	'算账': '019',
	'亲亲': '014',
	'花痴': '015',
	'呼叫': '018',
	'思考': '029',
	'大笑': '006',
	'嘘': '035',
	'惊讶': '060',
	'惊愕': '061',
	'生气': '066',
	'老大': '071',
	'学习雷锋': '068',
	'心碎': '088',
	'招财猫': '080',
	'红唇': '084',
	'举杯庆祝': '094',
	'钱': '089',
	'很晚了': '097',
	'礼物': '091',
	'购物': '090',
	'等待': '096',
	'时钟': '095',
	'财迷': '020',
	'鬼脸': '022',
	'色情狂': '027',
	'没钱了': '032',
	'无聊': '033',
	'怀疑': '034',
	'感冒': '038',
	'尴尬': '039',
	'不会吧': '041',
	'凄凉': '044',
	'困了': '045',
	'晕': '046',
	'I服了U': '052',
	'好累': '056',
	'吐': '058',
	'背': '059',
	'闭嘴': '062',
	'欠扁': '063',
	'鄙视你': '064',
	'大怒': '065',
	'邪恶': '072',
	'单挑': '073',
	'CS': '074',
	'隐形人': '075',
	'炸弹': '076',
	'惊声尖叫': '077',
	'残花': '086',
	'收邮件': '092',
	'电话': '093',
	'飞机': '098',
	'支付宝': '099',
};

export const xmEmoji = {
	'打招呼': '001',
	'唱歌': '002',
	'打屁屁': '003',
	'开心': '006',
	'可怜': '007',
	'么么哒': '010',
	'帅': '011',
	'送花': '012',
	'微笑': '013',
	'委屈': '014',
	'再见': '016',
	'OK': '017',
};

// 新版淘宝表情
export const tbEmoji = {
	"微笑":"001",
	"害羞":"002",
	"吐舌头":"003",
	"偷笑":"004",
	"爱慕":"005",
	"大笑":"006",
	"跳舞":"007",
	"飞吻":"008",
	"安慰":"009",
	"抱抱":"010",
	"加油":"011",
	"胜利":"012",
	"强":"013",
	"亲亲":"014",
	"花痴":"015",
	"露齿笑":"016",
	"查找":"017",
	"呼叫":"018",
	"算账":"019",
	"财迷":"020",
	"打call":"021",
	"鬼脸":"022",
	"天使":"023",
	"再见":"024",
	"憨笑":"025",
	"享受":"026",
	"期待":"027",
	"呆若木鸡":"028",
	"思考":"029",
	"迷惑":"030",
	"疑问":"031",
	"剁手":"032",
	"无聊":"033",
	"怀疑":"034",
	"嘘":"035",
	"做错事":"036",
	"不容易":"037",
	"感冒":"038",
	"尴尬":"039",
	"傻笑":"040",
	"不会吧":"041",
	"南":"042",
	"流汗":"043",
	"凄凉":"044",
	"困了":"045",
	"晕":"046",
	"忧伤":"047",
	"委屈":"048",
	"悲泣":"049",
	"大哭":"050",
	"痛哭":"051",
	"I服了U":"052",
	"对不起":"053",
	"心酸":"054",
	"皱眉":"055",
	"好累":"056",
	"吐":"058",
	"背":"059",
	"惊讶":"060",
	"惊愕":"061",
	"闭嘴":"062",
	"欠扁":"063",
	"鄙视你":"064",
	"大怒":"065",
	"生气":"066",
	"财神":"067",
	"请喝茶":"068",
	"恭喜发财":"069",
	"小二":"070",
	"老大":"071",
	"邪恶":"072",
	"单挑":"073",
	"机智":"074",
	"隐形人":"075",
	"炸弹":"076",
	"惊声尖叫":"077",
	"漂亮MM":"078",
	"围观":"079",
	"招财猫":"080",
	"成交":"081",
	"鼓掌":"082",
	"握手":"083",
	"红唇":"084",
	"玫瑰":"085",
	"残花":"086",
	"爱心":"087",
	"心碎":"088",
	"红包":"089",
	"购物":"090",
	"礼物":"091",
	"收邮件":"092",
	"电话":"093",
	"举杯庆祝":"094",
	"时钟":"095",
	"等待":"096",
	"很晚了":"097",
	"飞机":"098",
	"支付宝":"099"
};

export default {
'': wwEmoji,
'ww': wwEmoji,
'xm': xmEmoji,
'tb': tbEmoji
};

7. 新增渠道应用有上限吗？

下图中的“新增渠道应用”目前没有设置上限。

8. chatui支持联想输入功能吗？

支持的哦~联想输入效果：用户咨询手动输入问题时，自动根据知识库配置问法推荐相关问题供用户点选（见下图），降低用户输入成本的同时提升问题解决率。

• 联想输入开关：服务模式为”仅机器人接待“或”机器人&人工接待“时支持设置。

9. 微信窗口给客户发机器人h5链接，链接渲染的卡片内容可以编辑吗？

可以编辑的，“独立页面部署”区域右侧“设置”入口点击，就可以可进入“配置url卡片内容”页面

• 该功能应用场景及使用效果，见下图箭头指向位置。

10. chatui的样式可以自定义调整吗？

您可以进入“渠道管理”—“服务界面设置”—“基础样式”版块进行调整，目前移动端仅支持自定义顶部的标题文案、文案颜色及标题背景色，修改后同步在pc端生效，如pc端不想共用此效果，可点击“自定义样式”上传图片覆盖。

同时，pc端支持修改窗口大小及背景图。

11.如何在渠道部署中传入外部变量？

您可按以下步骤在渠道部署中传入外部变量：

1. 假设外部变量为test；

2. 将外部变量拼接到渠道部署的链接上；

   • 假设渠道部署的链接是：https://chatbot.aliyuncs.com/intl/index.htm?locale=zh-CN&from=Vt9；

   • 拼接后的链接：https://chatbot.aliyuncs.com/intl/index.htm?locale=zh-CN&from=Vt9& _biz_test

3. 在对话流里引用，输入“$”找到环境参数${envVars['VENDOR_PARAM']}，点选后配置成${envVars['VENDOR_PARAM']['test']}