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即时通讯网页插件发送咨询对象（一、使用内嵌代码）相关推荐

Android嵌入Udesk即时通讯网页插件（一、入门）
作者:张振琦 Android 系统上实现Udesk即时通讯,除了使用Udesk提供的原生sdk以外还可以嵌入Udesk提供的即时通讯网页插件.Udesk即时通讯网页插件的内容,大家可以参考<Ud ...
Udesk即时通讯网页插件离线消息推送
作者:张振琦 Udesk即时通讯网页插件提供了,当客户离线后,客服回复的消息可以推送到我们自己的一个服务地址上的功能.这样就给了我们很大的发挥空间,我们可以使用短信.邮件等方式提醒客户上线查看消息,或 ...
微信小程序嵌入Udesk即时通讯网页插件
作者:张振琦小程序除了使用原生通讯方式接入Udesk,还可以使用web-view组件嵌入Udesk即时通讯网页插件的专用链接来实现. 原生接入方式可以参考以下文章 <Udesk微信小程序即时通 ...
Udesk即时通讯网页插件：按钮设置
作者:张振琦前篇我们介绍了Udesk即时通讯网页插件的创建以及如何使用.在网页插件的管理页面内除了基本信息还有其他的一些选项卡,按钮设置.窗口设置.邀请设置.导航菜单和其他设置. 本篇来介绍一下按钮 ...
Udesk即时通讯网页插件专用链接传参介绍
作者:张振琦在<Udesk即时通讯(IM)网页插件入门>中说到了即时通讯的专用链接,也演示了浏览器直接访问和网页iframe加载的效果.本篇来介绍一下,专用链接支持的参数,通过给专用链接 ...
Udesk 即时通讯网页插件客户身份认证（二、插件传入篇）
作者:张振琦上篇我们实现了服务端的签名算法,我接下来看WebIM插件里如何传入客户信息.调用的接口如下: // SHA1示例 ud({"customer": {"non ...
Udesk接入需求---Android嵌入Udesk即时通讯网页插件（二、实现发送照片,录屏,发送文件）
Udesk接入需求---1.初步接入 Udesk接入需求---1.初步接入这是19年当时的一个需求,这是第一步,接入方式,但是最后我接入的方式,由于公司是付费用户,所有选择的是 webview嵌套H ...
即时通首页html代码,Udesk即时通讯（IM）网页插件入门
Udesk即时通讯(IM)网页插件入门 Udesk即时通讯(IM)网页插件入门作者:张振琦 Udesk能够支持APP,微信,企业微信,微信小程序,微博,web页面,六大即时通讯渠道. web渠道只需 ...
Udesk即时通讯（IM）网页插件入门
作者:张振琦 Udesk能够支持APP,微信,企业微信,微信小程序,微博,web页面,六大即时通讯渠道. web渠道只需要管理员在后台建立即时通讯网页插件,然后将代码嵌入网页即可实现.在此基础上,还提 ...

Udesk即时通讯网页插件发送咨询对象（一、使用内嵌代码）

Udesk即时通讯网页插件发送咨询对象（一、使用内嵌代码）相关推荐

最新文章

热门文章