Customize your SalesIQ Chat window with new Personalized Widgets (Beta)

Customize your SalesIQ Chat window with new Personalized Widgets (Beta)

Note:
  1. This feature is still in beta version. If need be, changes will be made to the JS API code/format for further refinement of the widgets.
  2. Additionally, the widgets JS API will work only on the new SalesIQ live chat. If you are using the older version, you will need to migrate to the new live chat widget to use this. To migrate, please contact us at [support@zohosalesiq.com] to get the updated live chat widget.
This guide details the setup options/steps for adding personalized widgets into your Zoho SalesIQ chat window using JS API.

How can personalized widgets help your business?

  1. Enhanced user engagement: Personalized widgets can significantly boost visitor/user engagement on your website. Instead of passively absorbing information, visitors can interact with dynamic widgets, making the experience more engaging and intuitive.
  2. Increased visibility across all pages: Widgets are displayed on all pages of your website, ensuring consistent visibility. This allows you to effectively communicate key messages and offers to visitors regardless of where they are on your site.
  3. Interactive information delivery: Visitors are more likely to engage with content presented in a visually appealing and interactive format. By using interactive widgets, you can convey important information more effectively than traditional website text.
  4. Easy access to offerings: Visitors can easily access your products, services, and announcements by simply clicking on the widget. This seamless access encourages exploration and can lead to increased conversions.
  5. Flexible announcement options: SalesIQ supports four different types of custom widgets for your chat window (announcement, news, command panel and IM channels), allowing you to personalize and customize how you share information with your audience. Tailor the content to meet your business needs and the interests of your visitors.

Types of personalized widgets

SalesIQ supports four widgets types where you use them for news & updates with a CTA, listing your products, services and more. 
  1. Announcement widget
  2. News widget
  3. Command panel widget
  4. IM channel widget

Widget

Descriptions

Functionalities


Output


Announcement


This widget can be used to spotlight an upcoming event, special offers, deals and more. This widget will include a clear call-to-action button (CTA) to drive user engagement.

  1. Banner with optional media (either a video or an image)
  2. Title
  3. Body text
  4. Call to action that links to an article or URL of choice
 



News


This widget can share exciting updates and news, but without a call-to-action button (CTA).

  1. Banner with optional media (either a video or an image)
  2. Title
  3. Body text



Command Panel


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. Title
  2. Actions
    1. Start a chat
    2. Start a call
    3. Open a URL
    4. Open an article
    5. Trigger a custom client action

IM Channels
This widgets helps to display the IM/social channels in two different ways. 

  1. List of channels
                          (or)




Adding personalized widgets to the SalesIQ chat window

Follow the steps below to add a widget of your choice to your SalesIQ chat window.
  1. Add SalesIQ installation code to your website's source code.
    1. First, you need to add the SalesIQ installation code to your website. 
    2. For this, from the SalesIQ dashboard, navigate to Settings > Brands > Installation > Website and copy the SalesIQ installation code.
    3. Then, paste the installation code right before the closing </body> tag of your website's HTML source code.
  2. Add the custom widget code to the SalesIQ installation code.
    1. Once the SalesIQ code is added to your website's source code, the next step is to add the custom widget code to the SalesIQ installation code for the customizations of your choice. 
    2. Following is the syntax for adding personalized widgets to the SalesIQ chat window.
Syntax:
  1. // SalesIQ installation code
  2. $zoho.salesiq.ready(function() {
  3.     $zoho.salesiq.set("home.widgets", [
  4.   // List of widgets to be shown
  5.      ]);
  6. })
    1. The custom widget code of the intended widget type needs to be added within the home.widgets ready function of the installation code.
    2. More than one widget can be stacked one after another. 

Media & Action objects

The following media and actions are support in the widgets. 

Media object

Image and videos objects are support in Anncouncement and News widgets. 
  1. 1. Image
  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. Video 
  8. {  
  9.    "type":"video",
  10.    "thumbnail":"https://zoho.com/images/bot.png",
  11.    "url": "https://zoho.com/videos/bots.mp4",
  12.    "autoplay" : true,
  13.    "subtitles": "https://zoho.com/videos/bots.srt"
  14. }

Action object

Image and videos objects are support in Anncouncement, News, and Command panel widgets. 
  1. 1. Link
  2. {
  3. "type" : "link",
  4. "label" : string, // Text to be shown
  5. "url" : "https://www.zoho.com/salesiq/help/developer-guides/bot-siq-scripts-zobot-response-cta-2.0.html"
  6. }

  8. 2. Call
  9. {
  10. "type" : "call",
  11. "label" : string, // Text to be shown
  12. "provider" : "native|system", // native - SalesIQ will be initiated | system - FaceTime or Mobile call
  13. "contact_number" : number //Phone number 
  14. }

  16. 3. email
  17. {
  18. "type" : "email",
  19. "label" : string, // Text to be shown
  20. "email_id" : "support@zohosalesiq.com"
  21. }

  23. 4. chat
  24. {
  25. "type" : "chat",
  26. "label" : string // Text to be shown
  27. }

  29. 5. article
  30. {
  31. "type" : "article",
  32. "article_id" : $articleId // Ex : "115844000014148177"
  33. "label" : string // Text to be shown
  34. }

  36. 6. client_action
  37. {
  38. "type" : "client_action", // Triggers a custom client-side action based on clientaction_name key inside the action object. Visit client action API document for more details.
  39. "label" : string, // Text to be shown
  40. "name" : "bookbtn", // key to be sent when invoking the client function
  41. "clientaction_name" : "book_now"
  42. }

Announcement widget

  1. The syntax code for an announcement widget is as follows.
Syntax:
  1. {
  2. "type"   : "announcement",
  3. "banner" : media object ,
  4. "title"  : string,
  5. "text"   : string,
  6. "action" : action object 
  7. }  
  1. Customize the above syntax code with your requirements and paste within the ready function of the installation code. 

Sample code

A code sample has been provided below for your reference.
  1. //From SalesIQ Dashboard, navigate to Settings > Brands > Select the brand > Installation > Website > Copy the code and paste here for this sample code to work.
  2. <script>window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}</script><script id="zsiqscript" src="https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17d55e66512cf7eb42ab4d0f0ae8ccc0a932be" defer></script>
  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: "Lead Nurturing 101: Free Training",
  14.             text: "All Zoho users in the region are welcome to join the meetup! Zoho One subscribers will gain the most insights. Zoho CRM and other stand-alone app users will discover how Zoho’s full suite can boost their business success.",
  15.             action: {
  16.                 type: "link",
  17.                 label: "Register Now",
  18.                 url: "https://www.zoho.com/zoholics/"
  19.             }
  20.         }
  21.     ]);
  22. };
  23. </script>

Output


News widget

  1. The syntax code for an news widget is as follows.
Syntax:
  1. {
  2. "type" : "news",
  3. "banner" : media object,
  4. "title" : string,
  5. "text" : string
  6. }
  1. Customize the above syntax code with your requirements and paste within the ready function of the installation code. 

Sample code

A code sample has been provided below for your reference.
  1. //From SalesIQ Dashboard, navigate to Settings > Brands > Select the brand > Installation > Website > Copy the code and paste here for this sample code to work.
  2. <script>window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}</script><script id="zsiqscript" src="https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17d03555e66512cf72ab4d0f0ae8ccc0a932be" defer></script>
  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: "Join us at Zoholics: We'll talk tech and drink great coffee",
  14.             text: "We're bringing you product updates, one-on-one support sessions, and extensive networking opportunities with Zoho customers and partners. Fuelled by your feedback, we've worked to ensure that this year's Zoholics has something valuable for everyone!"
  15.         }
  16.     ]);
  17. };
  18. </script>

Output


Command panel widget

  1. The syntax code for a command panel message is as follows.
Syntax:
  1. { 
  2.         "type": "command_panel",
  3.         "title": "STRING", 
  4.         "actions": action objects
  5. }
  1. Customize the above syntax code with your requirements and paste within the ready function of the installation code. 

Sample code

A code sample has been provided below for your reference.
  1. //From SalesIQ Dashboard, navigate to Settings > Brands > Select the brand > Installation > Website > Copy the code and paste here for this sample code to work.
  2. <script>window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}</script><script id="zsiqscript" src="https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17555e66512cf7eb42ab4d0f0ae8ccc0a932be" defer></script>
  3. <script>
  4. $zoho.salesiq.ready = function () {
  5.     $zoho.salesiq.set("home.widgets", [
  6.         { 
  7.             type: "command_panel",
  8.             title: "Join us at Zoholics: We'll talk tech and drink great coffee",
  9.             actions: [
  10.                 {
  11.                     type: "chat",
  12.                     label: "Start a Chat"
  13.                 },
  14.                 {
  15.                     type: "call",
  16.                     label: "Place a Call",
  17.                     provider: "native|system"
  18.                 },
  19.                 {
  20.                     type: "link",
  21.                     label: "Explore our Products",
  22.                     url: "https://events.zoho.com/ZoholicsSydney2024"
  23.                 },
  24.                 {
  25.                     type: "article",
  26.                     article_id: "ARTICLE_ID",
  27.                     label: "About Us"
  28.                 },
  29.                 {
  30.                     type: "client_action",
  31.                     label: "Book an Appointment",
  32.                     name: "bookbtn",
  33.                     clientaction_name: "openBookingForm"
  34.                 },
  35.             ]
  36.         }
  37.     ]);
  38. };
  39. </script>

Output



IM Channel widgets

You can showcase your Instant Messaging (IM) channels inside the SalesIQ live chat widget using two display types:
  1. action_item – Displays each IM channel as a vertical button, similar to the default Chat and Call buttons.
  2. channel_links – Displays the IM channels as icons arranged side-by-side, offering a more compact view.
Both options help users reach out to you via their preferred messaging platform directly from the SalesIQ chat interface.

Output



Supported Channels: 

Below is a list of supported IM channels, including example values for id and url attributes used in widget configuration:

Alert
Note: The below example URL and ID belongs to SalesIQ's IM channels, please replace it with yours. 

Channel Name
Example URL Format
ID
WhatsApphttps://wa.me/917305992852917305992852
LINEhttps://line.me/R/ti/p/@246qkdpd@246qkdpd
Instagramhttps://ig.me/m/ZohoSalesIQZohoSalesIQ
WeChatweixin://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. The syntax code for an action_item is as follows.
Syntax:
  1. {
  2.     "type" : "action_item",
  3.     "title" : string,
  4.     // Allowed values for channel key - 'facebook' | 'instagram' | 'whatsapp' | 'telegram' | 'x' | 'we' | 'line'
  5.     "icon" : {
  6.                       type : "channel",
  7.                       name: "channel's name",
  8.                       id: "$unique_key", // Optional if URL is present
  9.                       url: "<channel's URL>"
  10.                   }  
  11. }
  1. Customize the above syntax code with your requirements and paste within the ready function of the installation code. 

Sample code

A code sample has been provided below for your reference.
  1. //From SalesIQ Dashboard, navigate to Settings > Brands > Select the brand > Installation > Website > Copy the code and paste here for this sample code to work.
  2. <script>window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}</script><script id="zsiqscript" src="https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17555e66512cf7eb42ab4d0f0ae8ccc0a932be" defer></script>
  3. <script>
  4. $zoho.salesiq.ready = function () {
  5.     $zoho.salesiq.set("home.widgets", [
  6.         {
  7.             type: "action_item",
  8.             title: "Chat with us",
  9.             icon: {
  10.                 type: "channel",
  11.                 name: "whatsapp",
  12.                 //The below number belongs to SalesIQ's WhatsApp, replace it with your WhatsApp business number
  13.                 id: "917305992852", // Optional if URL is present
  14.                 url: "https://wa.me/917305992852"
  15.             }
  16.         },
  17.         {
  18.             type: "action_item",
  19.             title: "Chat with us",
  20.             icon: {
  21.                 type: "channel",
  22.                 name: "instagram",
  23.                 //The below id belongs to SalesIQ's Instagram, replace it with your Instagram id
  24.                 id: "zohosalesiq", // Optional if URL is present
  25.                 url: "https://www.instagram.com/zohosalesiq/"
  26.             }
  27.         }
  28.     ]);
  29. };
  30. </script>
  1. The syntax code for an channel_links is as follows.
Syntax:
  1. {
  2.     "type": "channel_links",
  3.     "title" : string,
  4.     // Allowed values for channel key - 'facebook' | 'instagram' | 'whatsapp' | 'telegram' | 'x' | 'we' | 'line'
  5.     "channels": [
  6.         {
  7.             name: "channel's name",
  8.             id: "$unique_key", // Optional if URL is present
  9.             url: "<channel's URL>"
  10.         }
  11.     ]
  12. }
  1. Customize the above syntax code with your requirements and paste within the ready function of the installation code. 

Sample code

A code sample has been provided below for your reference.
  1. //From SalesIQ Dashboard, navigate to Settings > Brands > Select the brand > Installation > Website > Copy the code and paste here for this sample code to work.
  2. <script>window.$zoho=window.$zoho || {};$zoho.salesiq=$zoho.salesiq||{ready:function(){}}</script><script id="zsiqscript" src="https://salesiq.zohopublic.com/widget?wc=siqfe0612efca087f0231494bd17555e66512cf7eb42ab4d0f0ae8ccc0a932be" defer></script>
  3. <script>
  4. $zoho.salesiq.ready = function () {
  5.     $zoho.salesiq.set("home.widgets", [
  6.         {
  7.             type: "channel_links",
  8.             title: "Reach us on",
  9.             channels: [
  10.                 {
  11.                     name: "whatsapp",
  12.                 //The below number belongs to SalesIQ's WhatsApp, replace it with your WhatsApp business number
  13.                     id: "917305992852", // Optional if URL is present
  14.                     url: "https://wa.me/917305992852" // Replace with your WhatsApp number
  15.                 },
  16.                 {
  17.                     name: "line",
  18.                    //The below id belongs to SalesIQ's LINE, replace it with your LINE id
  19.                     id: "@246qkdpd", // Optional if URL is present
  20.                     url: "https://line.me/R/ti/p/@246qkdpd" // Replace with your LINE ID
  21.                 },
  22.                 {
  23.                     name: "instagram",
  24.                    //The below id belongs to SalesIQ's Instagram, replace it with your Instagram id
  25.                     id: "zohosalesiq", // Optional if URL is present
  26.                     url: "https://ig.me/m/zohosalesiq" // Replace with your Instagram username
  27.                 },
  28.                 {
  29.                     name: "we",
  30.                     id: "WECHAT_ID", / Optional if URL is present
  31.                     url: "weixin://dl/chat?WECHAT_ID" // Replace with your WeChat ID
  32.                 },
  33.                 {
  34.                     name: "facebook",
  35.                    //The below id belongs to SalesIQ's Facebook, replace it with your Facebook id
  36.                     id: "ZohoSalesIQ", // Optional if URL is present
  37.                     url: "https://m.me/ZohoSalesIQ" // Replace with your Facebook page name or user ID
  38.                 },
  39.                 {
  40.                     name: "x",
  41.                    //The below id belongs to SalesIQ's Facebook, replace it with your Facebook id
  42.                     id: "5827392", // Optional if URL is present
  43.                     url: "https://x.com/messages/compose?recipient_id=5827392" // Replace with your X (Twitter) recipient ID
  44.                 },
  45.                 {
  46.                     name: "telegram",
  47.                     id: "zylker_shop_bot", // Optional if URL is present
  48.                     url: "https://t.me/zylker_shop_bot" // Replace with your Telegram username
  49.                 }
  50.             ]
  51.         }
  52.     ]);
  53. };
  54. </script>