数据库 定义键盘快捷键 scipy 微信商家收款 sockets methods photoshop视频教程全集下载 ppt视频教程下载 jquery对象 软件测试实战项目 python的re模块 java抽象类 java简介 java接口类 java中的抽象类 java中的队列 java函数式接口 java方法重载 java调用接口 java文件路径 信息系统项目管理师教程 exescope教程 主板芯片组天梯图 圆形截图 maxtoc4d linux多线程编程 微信昵称找人的软件 摩尔斯电码翻译器在线 修改ip地址软件 xapk安装器 经典雅黑 painter下载 计算机科学概论 ocr文字识别软件免费下载 掘地鼠炖肉 枪林弹雨辅助 红米3和红米3s的区别 类似迅雷的下载软件 3dmax布尔运算 脚本模板
当前位置: 首页 > 学习教程  > 编程语言

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

2020/11/4 14:55:02 文章标签:

作者:张振琦 最近接到了一个客户工单,咨询是否可以在即时通讯的聊天窗口里发送商品信息。Udesk即时通讯网页插件是提供了这个功能的,叫做咨询对象。我也整理了一下,网页插件实现发送咨询对象可分为三种方式:使用内嵌代…

作者:张振琦

最近接到了一个客户工单,咨询是否可以在即时通讯的聊天窗口里发送商品信息。Udesk即时通讯网页插件是提供了这个功能的,叫做咨询对象。我也整理了一下,网页插件实现发送咨询对象可分为三种方式:使用内嵌代码、使用专用链接、使用消息区。分三篇来介绍,本篇先来看如何使用内嵌代码来实现发送咨询对象。

网页插件如何使用可以参考以下文章:
《Udesk即时通讯(IM)网页插件入门》
《Udesk 即时通讯网页插件客户身份认证(一、Java签名篇)》
《Udesk 即时通讯网页插件客户身份认证(二、插件传入篇)》

咨询对象-参数说明

名称说明
titleString标题
urlString跳转页的链接地址
imageString显示图片地址
sendtrue或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即时通讯网页插件:窗口设置(五、信息区设置)》

在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_350273.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?