使用全新个性化小部件自定义您的SalesIQ聊天窗口（测试版）

使用全新个性化小部件自定义您的SalesIQ聊天窗口（测试版）

注意：
  1. 此功能仍处于测试版。如有需要，将对JS API代码/格式进行更改，以进一步优化这些小部件。
  2. 此外，小部件JS API仅适用于新的SalesIQ实时聊天。如果您使用的是旧版本，则需要迁移至新的实时聊天小部件才能使用此功能。如需迁移，请通过[support@zohosalesiq.com]与我们联系，以获取更新后的实时聊天小部件。
本指南详细介绍了使用JS API将个性化小部件添加到您的Zoho SalesIQ聊天窗口的设置选项/步骤。

个性化小部件如何助力您的业务？

  1. 提升用户参与度：个性化的组件能够显著提升访客/用户的网站参与度。与被动地获取信息不同，访客可以与动态组件互动，让体验更加吸引人且直观。
  2. 全页面提升可见性：小部件会显示在您网站的所有页面上，确保一致的可见性。这使您能够有效地向访问者传达关键信息和优惠活动，无论他们身处网站的哪个位置。
  3. 互动式信息传递：访客更有可能与以视觉吸引人且具有互动性的形式呈现的内容产生互动。通过使用互动小工具，您可以比传统网站文本更有效地传达重要信息。
  4. 轻松访问产品：访客只需点击小部件，即可轻松访问您的产品、服务和公告。这种无缝访问有助于激发探索欲，从而提高转化率。
  5. 灵活的公告选项：SalesIQ支持四种不同类型的自定义小部件，用于您的聊天窗口（公告、新闻、命令面板和IM频道），让您可以个性化定制与受众分享信息的方式。根据您的业务需求和访客的兴趣量身打造内容。

个性化小部件的类型

SalesIQ 支持四种小部件类型，可用于发布新闻与更新并附带行动号召，列出您的产品、服务等。
  1. 公告小部件
  2. 新闻小部件
  3. 命令面板小部件
  4. IM 渠道小部件

小部件

描述

功能


输出


公告


此小部件可用于突出显示即将举行的活动、特别优惠、促销活动等。此小部件将包含一个清晰的行动号召按钮（CTA），以促进用户参与。

  1. 带有可选媒体（视频或图片）的横幅
  2. 标题
  3. 正文
  4. 链接到所选文章或网址的行动号召
 



新闻


此小部件可分享精彩动态和新闻，但没有行动号召按钮（CTA）。

  1. 带有可选媒体（视频或图片）的横幅
  2. 标题
  3. 正文



命令面板


This widget comes with multiple actions like starting a chat/call, open a URL or even invoke a custom action, all represented by a label. This widget can be used to present a variety of services or offerings, allowing users to take multiple actions directly from the widget like booking an appointment, accessing an article etc.


  1. 标题
  2. 操作
    1. 开始聊天
    2. 开始通话
    3. 打开网址
    4. 打开文章
    5. 触发自定义客户端操作

IM频道
此小部件可采用两种不同方式展示即时通讯/社交渠道。

  1. 频道列表
（或）




向SalesIQ聊天窗口添加个性化小部件

请按照以下步骤，将您选择的小部件添加到您的SalesIQ聊天窗口。
  1. 将SalesIQ安装代码添加到您网站的源代码中。
    1. 首先，您需要将SalesIQ安装代码添加到您的网站。
    2. 为此，从SalesIQ仪表板中，导航至“设置”>“品牌”>“安装”>“网站”，并复制SalesIQ安装代码。
    3. 然后，将安装代码粘贴到您网站 HTML 源代码中 </body> 标记的正前方。
  2. <b将自定义小部件代码添加到SalesIQ安装代码中。
    1. 在将SalesIQ代码添加到您网站的源代码后，下一步是将自定义小部件代码添加到SalesIQ安装代码中，以实现您所选择的自定义设置。
    2. 以下是向SalesIQ聊天窗口添加个性化小部件的语法。
语法：
  1. // SalesIQ 安装代码
  2. $zoho.salesiq.ready(function() {
  3.     $zoho.salesiq.set("home.widgets", [
  4. // 要显示的组件列表
  5.      ]);
  6. })
    1. 需要在安装代码的home.widgets ready 函数内添加目标小部件类型的自定义小部件代码。
    2. 可以将多个小部件一个接一个地叠加起来。

媒体与操作对象

以下媒体和操作在小部件中受支持。

媒体对象

公告和新闻小部件支持图片和视频对象。
  1. 1. 图片
  2. {
  3. "type" : "image",
  4. "url" : "https://www.zohowebstatic.com/sites/zweb/images/salesiq/bot/images_bot.png",
  5. "image_position" : "fit|fill"
  6. }
  7. 2. 视频
  8. {  
  9.    "type":"video",
  10.    "thumbnail":"https://zoho.com/images/bot.png",
  11.    "url": "https://zoho.com/videos/bots.mp4",
  12.    "autoplay" : true,
  13. “字幕”：https://zoho.com/videos/bots.srt
  14. }

操作对象

公告、新闻和命令面板小部件支持图片和视频对象。
  1. 1. 链接
  2. {
  3. "type" : "link",
  4. "label" : string, // 要显示的文本
  5. "url" : "https://www.zoho.com/salesiq/help/developer-guides/bot-siq-scripts-zobot-response-cta-2.0.html"
  6. }

  8. 2. 调用
  9. {
  10. "type" : "call",
  11. "label" : 字符串, // 要显示的文本
  12. "provider" : "native|system", // native - 将启动SalesIQ | system - FaceTime或移动呼叫
  13. "contact_number" : 数字 //电话号码
  14. }

  16. 3. 电子邮件
  17. {
  18. "type" : "email",
  19. "label" : 字符串, // 要显示的文本
  20. "email_id" : "support@zohosalesiq.com"
  21. }

  23. 4. 聊天
  24. {
  25. "type" : "chat",
  26. "label" : string // 要显示的文本
  27. }

  29. 5. 文章
  30. {
  31. "type" : "article",
  32. "article_id" : $articleId // 例如：“115844000014148177”
  33. "label" : string // 要显示的文本
  34. }

  36. 6. 客户操作
  37. {
  38. “type” : “client_action”, //根据操作对象内的 clientaction_name 键触发自定义客户端操作。有关详细信息，请访问客户端操作 API 文档。
  39. "label" : 字符串, // 要显示的文本
  40. "name" : "bookbtn", // 调用客户端函数时要发送的键
  41. "clientaction_name" : "book_now"
  42. }

公告小部件

  1. 公告小部件的语法代码如下。
语法：
  1. {
  2. "type"   : "announcement",
  3. "banner" : 媒体对象 ,
  4. "title" : 字符串,
  5. "text" : 字符串,
  6. "action" : 操作对象
  7. }  
  1. 根据您的需求自定义上述语法代码，并将其粘贴到安装代码的ready函数内。

示例代码

下方提供了代码示例供您参考。
  1. //从 SalesIQ 仪表板中，导航至“设置”>“品牌”> 选择品牌 > 安装 > 网站 > 复制代码，并粘贴到这里，以便此示例代码正常运行。
  2. &lt;b&gt;&lt;script&gt;window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}&lt;&#x2F;script&gt;&lt;script id=&quot;zsiqscript&quot; src=&quot;https:&#x2F;&#x2F;salesiq.zohopublic.com&#x2F;widget?wc=siqfe0612efca087f0231494bd17d55e66512cf7eb42ab4d0f0ae8ccc0a932be&quot; defer&gt;&lt;&#x2F;script&gt;&lt;&#x2F;b&gt;
  3. <script>
  4. $zoho.salesiq.ready = function () {
  5.     $zoho.salesiq.set("home.widgets", [
  6.         {
  7.             type: "announcement",
  8.             banner: {
  9.                 type: "image",
  10.                 url: "https://previewengine-accl.zohoexternal.com/image/WD/gkbu53ba12feb59204d558ba0e4440c52d3f1?version=1.0&width=2046&height=1536",
  11.                 image_position: "fit|fill"
  12.             },
  13. title: "潜在客户培养101：免费培训",
  14. 文本：“欢迎该地区的所有Zoho用户参加此次聚会！Zoho One订阅用户将获得最深入的见解。Zoho CRM及其他独立应用用户将了解Zoho全套产品如何助力他们的业务成功。”
  15. 操作：{
  16. 类型：“链接”，
  17. 标签：“立即注册”，
  18. 网址: “https://www.zoho.com/zoholics/”
  19.             }
  20.         }
  21.     ]);
  22. };
  23. </script>

输出


新闻小部件

  1. 新闻小部件的语法代码如下。
语法：
  1. {
  2. "type" : "新闻",
  3. "banner" : 媒体对象,
  4. "title" : 字符串,
  5. "text" : 字符串
  6. }
  1. 根据您的需求自定义上述语法代码，并将其粘贴到安装代码的ready函数内。

示例代码

下方提供了代码示例供您参考。
  1. //从 SalesIQ 仪表板中，导航至“设置”>“品牌”> 选择品牌 > 安装 > 网站 > 复制代码，并粘贴到这里，以便此示例代码正常运行。
  2. &lt;b&gt;&lt;script&gt;window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}&lt;&#x2F;script&gt;&lt;script id=&quot;zsiqscript&quot; src=&quot;https:&#x2F;&#x2F;salesiq.zohopublic.com&#x2F;widget?wc=siqfe0612efca087f0231494bd17d03555e66512cf72ab4d0f0ae8ccc0a932be&quot; defer&gt;&lt;&#x2F;script&gt;&lt;&#x2F;b&gt;
  3. <script>
  4. $zoho.salesiq.ready = function() {
  5.     $zoho.salesiq.set("home.widgets", [
  6.         {
  7.             type: "news",
  8.             banner: {  
  9.                 type: "image",
  10.                 url: "https://previewengine-accl.zohoexternal.com/image/BACKSTAGE/912000271967525?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjY1MDczMzk2MSIsInN1YlJlc291cmNlSWQiOiI2NTA3MzM5NjEiLCJpZCI6IjkxMjAwMDI3MTk2NzUyNSJ9",
  11.                 image_position: "fit|fill"
  12.             },
  13. title: "加入Zoholics：我们聊科技，喝美味咖啡”，
  14. 文本：“我们为您带来产品更新、一对一支持课程，以及与Zoho客户和合作伙伴的丰富交流机会。在您的反馈推动下，我们努力确保今年的Zoholics活动能为每位参与者提供有价值的内容！”
  15.         }
  16.     ]);
  17. };
  18. </script>

输出


命令面板小部件

  1. 命令面板消息的语法代码如下。
语法：
  1. { 
  2.         "type": "command_panel",
  3. "title": "字符串",
  4. “操作”：操作对象
  5. }
  1. 根据您的需求自定义上述语法代码，并将其粘贴到安装代码的ready函数内。

示例代码

下方提供了代码示例供您参考。
  1. //从 SalesIQ 仪表板中，导航至“设置”>“品牌”> 选择品牌 > 安装 > 网站 > 复制代码，并粘贴到这里，以便此示例代码正常运行。
  2. &lt;b&gt;&lt;script&gt;window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}&lt;&#x2F;script&gt;&lt;script id=&quot;zsiqscript&quot; src=&quot;https:&#x2F;&#x2F;salesiq.zohopublic.com&#x2F;widget?wc=siqfe0612efca087f0231494bd17555e66512cf7eb42ab4d0f0ae8ccc0a932be&quot; defer&gt;&lt;&#x2F;script&gt;&lt;&#x2F;b&gt;
  3. <script>
  4. $zoho.salesiq.ready = function () {
  5.     $zoho.salesiq.set("home.widgets", [
  6.         { 
  7.             type: "command_panel",
  8. title: "加入Zoholics：我们聊科技，喝美味咖啡”，
  9. 操作：[
  10.                 {
  11. type: "聊天",
  12. label: "开始聊天"
  13.                 },
  14.                 {
  15.                     type: "call",
  16. label: "拨打电话",
  17. 提供者: “原生|系统”
  18.                 },
  19.                 {
  20. 类型：“链接”，
  21. 标签：“探索我们的产品”
  22. 网址: “https://events.zoho.com/ZoholicsSydney2024”
  23.                 },
  24.                 {
  25.                     type: "article",
  26.                     article_id: "ARTICLE_ID",
  27. 标签：“关于我们”
  28.                 },
  29.                 {
  30. 类型: “client_action”,
  31. 标签: “预约挂号”,
  32. 名称: “bookbtn”,
  33. 客户端操作名称: “openBookingForm”
  34.                 },
  35.             ]
  36.         }
  37.     ]);
  38. };
  39. </script>

输出



IM频道小部件

您可使用两种显示类型，在SalesIQ实时聊天小部件中展示您的即时通讯（IM）渠道：
  1. 操作项– 将每个即时消息渠道显示为垂直按钮，类似于默认的聊天和呼叫按钮。
  2. channel_links– 以图标形式并排显示即时通讯渠道，提供更紧凑的视图。
这两种选项均可帮助用户直接通过SalesIQ聊天界面，使用他们偏好的消息平台与您取得联系。

输出



支持的渠道：

以下是支持的即时通讯渠道列表，包括小部件配置中使用的 id 和 url 属性的示例值：

Alert
注意：以下示例URL和ID属于SalesIQ的IM渠道，请将其替换为您自己的。

渠道名称
示例URL格式
ID
WhatsApphttps://wa.me/917305992852917305992852
LINEhttps://line.me/R/ti/p/@246qkdpd@246qkdpd
Instagramhttps://ig.me/m/ZohoSalesIQZohoSalesIQ
微信weixin://dl/chat?<WECHAT_ID>zoho_support_id
Facebookhttps://m.me/ZohoSalesIQZohoSalesIQ
X（Twitter）https://x.com/messages/compose?recipient_id=58273925827392
Telegramhttps://t.me/zylker_shop_botzylker_shop_bot

action_item

  1. 操作项的语法代码如下。
语法：
  1. {
  2.     "type" : "action_item",
  3. "title" : 字符串,
  4. // 通道密钥的允许值 - 'facebook' | 'instagram' | 'whatsapp' | 'telegram' | 'x' | 'we' | 'line'
  5.     "icon" : {
  6.                       type : "channel",
  7. name: "频道名称",
  8. id: "$unique_key", // 如果存在URL，则可选
  9. url: "<频道URL>"
  10.                   }  
  11. }
  1. 根据您的需求自定义上述语法代码，并将其粘贴到安装代码的ready函数内。

示例代码

下方提供了代码示例供您参考。
  1. //从 SalesIQ 仪表板中，导航至“设置”>“品牌”> 选择品牌 > 安装 > 网站 > 复制代码，并粘贴到这里，以便此示例代码正常运行。
  2. &lt;b&gt;&lt;script&gt;window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}&lt;&#x2F;script&gt;&lt;script id=&quot;zsiqscript&quot; src=&quot;https:&#x2F;&#x2F;salesiq.zohopublic.com&#x2F;widget?wc=siqfe0612efca087f0231494bd17555e66512cf7eb42ab4d0f0ae8ccc0a932be&quot; defer&gt;&lt;&#x2F;script&gt;&lt;&#x2F;b&gt;
  3. <script>
  4. $zoho.salesiq.ready = function () {
  5.     $zoho.salesiq.set("home.widgets", [
  6.         {
  7. 类型: “行动项”,
  8. 标题: “与我们聊天”,
  9. 图标: {
  10. 类型: “频道”,
  11. 名称: “whatsapp”,
  12. //以下号码为SalesIQ的WhatsApp号码，请将其替换为您自己的WhatsApp商业号码
  13. id: "917305992852", // 如果存在URL，则可选
  14. 网址: “https://wa.me/917305992852”
  15.             }
  16.         },
  17.         {
  18. 类型: “行动项”,
  19. 标题: “与我们聊天”,
  20. 图标: {
  21. 类型: “频道”,
  22.                 name: "instagram",
  23. //以下ID属于SalesIQ的Instagram，请用您的Instagram ID替换它
  24. id: "zohosalesiq", // 如果存在 URL，则可选
  25. 网址: “https://www.instagram.com/zohosalesiq/”
  26.             }
  27.         }
  28.     ]);
  29. };
  30. </script>
  1. channel_links的语法代码如下。
语法：
  1. {
  2.     "type": "channel_links",
  3. "title" : 字符串,
  4. // 通道密钥的允许值 - 'facebook' | 'instagram' | 'whatsapp' | 'telegram' | 'x' | 'we' | 'line'
  5. “渠道”：[
  6.         {
  7. name: "频道名称",
  8. id: "$unique_key", // 如果存在URL，则可选
  9. url: "<频道URL>"
  10.         }
  11.     ]
  12. }
  1. 根据您的需求自定义上述语法代码，并将其粘贴到安装代码的ready函数内。

示例代码

下方提供了代码示例供您参考。
  1. //从 SalesIQ 仪表板中，导航至“设置”>“品牌”> 选择品牌 > 安装 > 网站 > 复制代码，并粘贴到这里，以便此示例代码正常运行。
  2. &lt;b&gt;&lt;script&gt;window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}&lt;&#x2F;script&gt;&lt;script id=&quot;zsiqscript&quot; src=&quot;https:&#x2F;&#x2F;salesiq.zohopublic.com&#x2F;widget?wc=siqfe0612efca087f0231494bd17555e66512cf7eb42ab4d0f0ae8ccc0a932be&quot; defer&gt;&lt;&#x2F;script&gt;&lt;&#x2F;b&gt;
  3. <script>
  4. $zoho.salesiq.ready = function () {
  5.     $zoho.salesiq.set("home.widgets", [
  6.         {
  7. 类型: “渠道链接”,
  8. 标题: “联系我们”,
  9. 渠道: [
  10.                 {
  11. 名称: “whatsapp”,
  12. //以下号码为SalesIQ的WhatsApp号码，请将其替换为您自己的WhatsApp商业号码
  13. id: "917305992852", // 如果存在URL，则可选
  14. 网址：“https://wa.me/917305992852” // 请替换为您的WhatsApp号码
  15.                 },
  16.                 {
  17. name: “line”,
  18. //以下ID属于SalesIQ的LINE，请用您的LINE ID替换
  19. id: "@246qkdpd", // 如果提供URL，则可选
  20. url: "https://line.me/R/ti/p/@246qkdpd" // 请替换为您的LINE ID
  21.                 },
  22.                 {
  23.                     name: "instagram",
  24. //以下ID属于SalesIQ的Instagram，请用您的Instagram ID替换它
  25. id: "zohosalesiq", // 如果存在 URL，则可选
  26. url: "https://ig.me/m/zohosalesiq" // 请替换为您的Instagram用户名
  27.                 },
  28.                 {
  29.                     name: "we",
  30. id: "WECHAT_ID", / 如果存在URL则为可选
  31. url: “weixin://dl/chat?WECHAT_ID” // 请替换成您的微信ID
  32.                 },
  33.                 {
  34. 名称: "facebook",
  35. //以下ID属于SalesIQ的Facebook，请用您的Facebook ID替换
  36. id: "ZohoSalesIQ", // 如果提供URL，则可选
  37. url: "https://m.me/ZohoSalesIQ" // 请替换为您的Facebook页面名称或用户ID
  38.                 },
  39.                 {
  40.                     name: "x",
  41. //以下ID属于SalesIQ的Facebook，请用您的Facebook ID替换
  42. id: "5827392", // 如果提供URL，则可选
  43. url: "https://x.com/messages/compose?recipient_id=5827392" // 请用您的X（Twitter）收件人ID替换
  44.                 },
  45.                 {
  46.                     name: "telegram",
  47. id: "zylker_shop_bot", // 如果提供URL，则可选
  48. 网址：“https://t.me/zylker_shop_bot” // 请替换为您的Telegram用户名
  49.                 }
  50.             ]
  51.         }
  52.     ]);
  53. };
  54. </script>