Udesk即时通讯网页插件发送咨询对象（一、使用内嵌代码）
作者：張振琦
最近接到了一個客戶工單，咨詢是否可以在即時通訊的聊天窗口里發送商品信息。Udesk即時通訊網頁插件是提供了這個功能的，叫做咨詢對象。我也整理了一下，網頁插件實現發送咨詢對象可分為三種方式：使用內嵌代碼、使用專用鏈接、使用消息區。分三篇來介紹，本篇先來看如何使用內嵌代碼來實現發送咨詢對象。
網頁插件如何使用可以參考以下文章：
《Udesk即時通訊（IM）網頁插件入門》
《Udesk 即時通訊網頁插件客戶身份認證（一、Java簽名篇）》
《Udesk 即時通訊網頁插件客戶身份認證（二、插件傳入篇）》
咨詢對象-參數說明
| title | String | 標題 |
| url | String | 跳轉頁的鏈接地址 |
| image | String | 顯示圖片地址 |
| send | true或false | 為true時,咨詢對象下方會出現發送按鈕,點擊發送會將當前咨詢對象作為商品消息發送給客服 |
| <自定義參數> | 可定義多個自定義參數，可為中文 |
調用接口示例
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","價格": "￥6189.00","促銷價": "￥6188.00"} });這塊需要注意的是，咨詢對象的內容要在控件初始化前設置，否則不會生效。但是設置客戶參數會刷新控件，基于這個特性，如果業務存在不能在初始化前配置咨詢對象，或者單個頁面內有多個商品時，可以在設置咨詢對象的同時設置客戶參數，如果沒有做客戶身份認證，可以傳空。詳細內容可以參考如下代碼，代碼實現了一個頁面內，兩個商品信息，還使用了網頁插件的輔助按鈕選擇器。
<!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>價格：￥108.00</p><p>促銷價：￥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高級程序設計</p><p>價格：￥129.00</p><p>促銷價：￥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","價格": "￥108.00","促銷價": "￥102.60"}})}function product2() {ud({"customer": {},"product": {title: "JavaScript高級程序設計",send:true,url: "https://item.jd.com/12958580.html",image: "http://img10.360buyimg.com/n1/jfs/t1/119119/28/16355/390609/5f4870aaE11ee9a70/a3942abebcb6534a.jpg","價格": "￥129.00","促銷價": "￥86.50"}})}</script></body> </html>網頁打開效果如下：
點擊咨詢商品，可以看到咨詢的商品已經顯示在了聊天窗口內
在線客服系統內，客服可以在聊天窗口右側的客戶信息里看到客戶想要咨詢的商品。如果傳了url，點擊標題可以彈出對應頁面。
如果設置了參數send為true，客戶窗口會顯示如下：
點擊發送后，會發送這條商品信息到聊天窗口內，在線客服系統中效果如下：
如果使用的彈出窗口或者新標簽頁模式，則需要配置信息區，添加一個“咨詢對象”標簽，如果設置了咨詢對象則會顯示標簽，沒有設置則不會顯示。
信息區的配置可以參考《Udesk即時通訊網頁插件：窗口設置（五、信息區設置）》
總結
以上是生活随笔為你收集整理的Udesk即时通讯网页插件发送咨询对象（一、使用内嵌代码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中式英语如何产生？该怎么办？
- 下一篇： Photoshop设计一款Iphone风