====== 自定义客服消息 ======


===== 简介 =====

环信自定义消息API允许客户在坐席工作台加载自己的消息编辑页面，按照环信自定义消息的格式发送包含图文和链接的消息给访客，从而实现从坐席到访客的产品介绍，订单消息等丰富内容的可扩展消息。

===== 操作指南 =====

管理员登录并进入管理员模式后，选择“设置->系统开关->自定义消息”，填入自定义消息页面的 URL并保存。

{{:cs:200admin:admin-settings-options4.png?nolink|设置自定义消息}}

启用自定义消息功能后，在消息编辑窗上方会增加自定义消息按钮。

点击自定义消息按钮，会弹出Iframe窗口并加载客户在管理面板设置的自定义消息页面。

在编辑页面编辑消息，并确认发送后，消息会直接发送给访客，并显示在客服人员的聊天记录窗口中。

===== 发送接口 =====

通过 JS 调用 window.parent.postMessage(object, “*”) 发送消息，其中”object”是json格式的消息体，请参考下面的[[cs:400systemintegration:30custommsg#消息格式|消息格式]]。接口使用可以参考[[https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage|MDN Web API文档]]

===== 消息格式 =====

==== 图文消息 ====

消息体为json格式：

<code javascript>
var standardData = {
	easemob: {
		kefu: {
			articles: [{
				title: "Title",
				description: "Description",
				url: "URL",
				picurl: "PIC_URL"
			}]
		}
	}
};
window.parent.postMessage(standardData, '*');
</code>

=== 参数说明 ===

^参数^必须^说明^
|articles|是|图文消息，一个图文消息支持1到10条图文。|
|title|否|标题。|
|description|否|描述。|
|url|否|点击后跳转的链接。|
|picurl|否|图文消息的图片链接，支持JPG、PNG格式，较好的效果为大图640*320，小图80*80。如不填，在客户端不显示图片。|

==== 小程序卡片消息 ====

消息体为json格式：

<code javascript>
var standardData = {
	easemob: {
		kefu: {
			miniprogrampage: {
				title: "Title",
                pagePath:"pagePath",
                thumbMediaId:"thumbMediaId",
                thumbUrl:"thumbUrl"
			}
		}
	}
};
window.parent.postMessage(standardData, '*');
</code>

=== 参数说明 ===

^参数^必须^说明^
|miniprogrampage|是|小程序卡片消息|
|title|是|卡片消息标题|
|pagePath|是|小程序的页面路径|
|thumbMediaId|是|小程序消息卡片的封面，image类型的media_id，通过[[https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/customer-message/customerServiceMessage.uploadTempMedia.html|微信上传素材接口]]上传图片文件获得，建议大小为 520*416|
|thumbUrl|是|小程序封面图片，用于工作台展示|