Udesk即时通讯网页插件发送咨询对象（一、使用内嵌代码）
作者：張振琦
最近接到了一個(gè)客戶工單，咨詢是否可以在即時(shí)通訊的聊天窗口里發(fā)送商品信息。Udesk即時(shí)通訊網(wǎng)頁插件是提供了這個(gè)功能的，叫做咨詢對(duì)象。我也整理了一下，網(wǎng)頁插件實(shí)現(xiàn)發(fā)送咨詢對(duì)象可分為三種方式：使用內(nèi)嵌代碼、使用專用鏈接、使用消息區(qū)。分三篇來介紹，本篇先來看如何使用內(nèi)嵌代碼來實(shí)現(xiàn)發(fā)送咨詢對(duì)象。
網(wǎng)頁插件如何使用可以參考以下文章：
《Udesk即時(shí)通訊（IM）網(wǎng)頁插件入門》
《Udesk 即時(shí)通訊網(wǎng)頁插件客戶身份認(rèn)證（一、Java簽名篇）》
《Udesk 即時(shí)通訊網(wǎng)頁插件客戶身份認(rèn)證（二、插件傳入篇）》
咨詢對(duì)象-參數(shù)說明
| title | String | 標(biāo)題 |
| url | String | 跳轉(zhuǎn)頁的鏈接地址 |
| image | String | 顯示圖片地址 |
| send | true或false | 為true時(shí),咨詢對(duì)象下方會(huì)出現(xiàn)發(fā)送按鈕,點(diǎn)擊發(fā)送會(huì)將當(dāng)前咨詢對(duì)象作為商品消息發(fā)送給客服 |
| <自定義參數(shù)> | 可定義多個(gè)自定義參數(shù)，可為中文 |
調(diào)用接口示例
ud({product: {title: "Apple iPhone 7",url: "http://item.jd.com/3133829.html?cu=true&utm_source…erm=9457752645_0_11333d2bdbd545f1839f020ae9b27f14",image: "http://img14.360buyimg.com/n1/s450x450_jfs/t3157/63/1645131029/112074/f4f79169/57d0d44dN8cddf5c5.jpg","價(jià)格": "￥6189.00","促銷價(jià)": "￥6188.00"} });這塊需要注意的是，咨詢對(duì)象的內(nèi)容要在控件初始化前設(shè)置，否則不會(huì)生效。但是設(shè)置客戶參數(shù)會(huì)刷新控件，基于這個(gè)特性，如果業(yè)務(wù)存在不能在初始化前配置咨詢對(duì)象，或者單個(gè)頁面內(nèi)有多個(gè)商品時(shí)，可以在設(shè)置咨詢對(duì)象的同時(shí)設(shè)置客戶參數(shù)，如果沒有做客戶身份認(rèn)證，可以傳空。詳細(xì)內(nèi)容可以參考如下代碼，代碼實(shí)現(xiàn)了一個(gè)頁面內(nèi)，兩個(gè)商品信息，還使用了網(wǎng)頁插件的輔助按鈕選擇器。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>IM</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><style>.product {width:200px;float:left;padding:20px;margin:10px;border:solid 1px red;border-radius:25px;}.bt {float:right;}</style></head><body><div style="width:600px"><div class="product"><img src="http://img14.360buyimg.com/n1/jfs/t2191/111/699154754/198998/32d7bfe0/5624b582Nbc01af5b.jpg" style="width:200px;height: 200px;"><p>Java編程思想（第4版）</p><p>價(jià)格：￥108.00</p><p>促銷價(jià)：￥102.60</p><button type="button" onclick="product1()" class="bt">咨詢商品</button></div><div class="product"><img src="http://img10.360buyimg.com/n1/jfs/t1/119119/28/16355/390609/5f4870aaE11ee9a70/a3942abebcb6534a.jpg" style="width:200px;height: 200px;"><p>JavaScript高級(jí)程序設(shè)計(jì)</p><p>價(jià)格：￥129.00</p><p>促銷價(jià)：￥86.50</p><button type="button" onclick="product2()" class="bt">咨詢商品</button></div></div><script>(function(a,h,c,b,f,g){a["UdeskApiObject"]=f;a[f]=a[f]||function(){(a[f].d=a[f].d||[]).push(arguments)};g=h.createElement(c);g.async=1;g.charset="utf-8";g.src=b;c=h.getElementsByTagName(c)[0];c.parentNode.insertBefore(g,c)})(window,document,"script","https://assets-cli.udesk.cn/im_client/js/udeskApi.js","ud");ud({"code": "你的code","link": "你的link","selector":".bt"});function product1() {ud({"customer": {},"product": {title: "Java編程思想（第4版）",url: "https://item.jd.com/10058164.html",image: "http://img14.360buyimg.com/n1/jfs/t2191/111/699154754/198998/32d7bfe0/5624b582Nbc01af5b.jpg","價(jià)格": "￥108.00","促銷價(jià)": "￥102.60"}})}function product2() {ud({"customer": {},"product": {title: "JavaScript高級(jí)程序設(shè)計(jì)",send:true,url: "https://item.jd.com/12958580.html",image: "http://img10.360buyimg.com/n1/jfs/t1/119119/28/16355/390609/5f4870aaE11ee9a70/a3942abebcb6534a.jpg","價(jià)格": "￥129.00","促銷價(jià)": "￥86.50"}})}</script></body> </html>網(wǎng)頁打開效果如下：
點(diǎn)擊咨詢商品，可以看到咨詢的商品已經(jīng)顯示在了聊天窗口內(nèi)
在線客服系統(tǒng)內(nèi)，客服可以在聊天窗口右側(cè)的客戶信息里看到客戶想要咨詢的商品。如果傳了url，點(diǎn)擊標(biāo)題可以彈出對(duì)應(yīng)頁面。
如果設(shè)置了參數(shù)send為true，客戶窗口會(huì)顯示如下：
點(diǎn)擊發(fā)送后，會(huì)發(fā)送這條商品信息到聊天窗口內(nèi)，在線客服系統(tǒng)中效果如下：
如果使用的彈出窗口或者新標(biāo)簽頁模式，則需要配置信息區(qū)，添加一個(gè)“咨詢對(duì)象”標(biāo)簽，如果設(shè)置了咨詢對(duì)象則會(huì)顯示標(biāo)簽，沒有設(shè)置則不會(huì)顯示。
信息區(qū)的配置可以參考《Udesk即時(shí)通訊網(wǎng)頁插件：窗口設(shè)置（五、信息區(qū)設(shè)置）》
總結(jié)
以上是生活随笔為你收集整理的Udesk即时通讯网页插件发送咨询对象（一、使用内嵌代码）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中式英语如何产生？该怎么办？
- 下一篇： Android Studio更换项目界面