您可選擇將已經設置好的機器人以H5應用類型部署到各個渠道，比如自家官網、微信小程序等，目前支持：網頁/自研app、微信（公眾號/小程序）、支付寶（小程序）。

1.選擇“獨立頁面部署”

1）點擊“生成新部署地址”，也就是承接服務的咨詢頁面地址，最多可生成5個。注：如您已進行獲取用戶登錄token的操作，請在url拼接上token信息（舉例：http：//......from=xxx&_user_access_token=xxx)，再部署到渠道頁面中，token需要后端服務調用GenerateUserAccessToken - 獲取用戶免登Token接口進行生成。

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接入操作文檔見：http://bestwisewords.com/document_detail/439788.html。

2. 工作臺訪客名片上如何顯示用戶昵稱？

訪客名片顯示用戶昵稱，需要先進行“獲取用戶登錄token”的api接入，未接入前，咨詢用戶均以游客身份咨詢，接入后，可實現用戶進入聊天窗免登獲取token，訪客名片將顯示用戶昵稱。

api接入操作文檔見：http://bestwisewords.com/document_detail/439788.html。

3. 用戶咨詢的聊天記錄保存多久？

游客身份訪問時會生成一個臨時token，token有效期8小時，8小時后聊天記錄會自動清除；如需要聊天記錄長時間保存，可進行“獲取用戶登錄token”的api接入，可實現用戶進入聊天窗免登獲取token，聊天記錄將長期保留。

api接入操作文檔見：http://bestwisewords.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. 將外部變量前增加_biz_作為query的key，將key和變量的值一起拼接到渠道部署的鏈接上，例如_biz_test=aaa。

   • 假設渠道部署的鏈接是：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=aaa

3. 在對話流里引用，輸入“$”找到環境參數${envVars['VENDOR_PARAM']}，點選后配置成${envVars['VENDOR_PARAM']['_biz_test']}。