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 three different types of custom widgets for your chat window (announcement, info and list messages), 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.

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.	Banner with optional media (either a video or an image) Title Body text Call to action that links to an article or URL of choice
Info	This widget can share exciting updates and news, but without a call-to-action button (CTA).	Banner with optional media (either a video or an image) Title Body text
List	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.	Title Actions Invoke a chat Invoke a call Open a URL Trigger a custom client action

Adding personalized widgets to the SalesIQ chat window

Announcement message

1. The syntax code for an announcement message is as follows.
   

Syntax:

1.  {
2.     "type": "announcement",
3.     "data": {
4.         "banner": {
5.             "video_url": "URL_TO_VIDEO",  
6.             "image_url": "URL_TO_IMAGE"
7.         },
8.         "title": "STRING",  
9.         "body": {
10.             "text": "STRING" 
11.         },
12.         "action": {
13.             "invoke": "STRING",
14.   "article_id": "STRING",
15.             "url": "URL",
16.             "text": "STRING"
17.         }
18.     }
19.  }

1. Customize the above syntax code with your requirements and paste within the ready function of the installation code. 

Sample announcement message with code structure

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.                data : {
9.                     banner : {
10.                          image_url : "https://previewengine-accl.zohoexternal.com/image/WD/gkbu53ba12feb59204d558ba0e4440c52d3f1?version=1.0&width=2046&height=1536",
11.                     },
12.                     title : "Lead Nurturing 101: Free Training",
13.                     body : {
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.                     },
16.                     action : {
17.                          invoke : "open.url",
18.                          url : "https://www.zohomeetups.com/chicago-zoho-user-group-meetup-lead-nurturing-zoho-sep-2024",
19.                          text : "Register now"
20.                     }
21.                }
22.           }
23.      ]);
24. }
25. </script>

Output

Info message

1. The syntax code for an info message is as follows.
   

1. Customize the above syntax code with your requirements and paste within the ready function of the installation code. 

Sample info message with code structure

Output

List message

1. The syntax code for a list message is as follows.
   

1. Customize the above syntax code with your requirements and paste within the ready function of the installation code. 
   

Sample list message with code structure

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 : "list",
8.                data : {
9.                     title : "Join us at Zoholics: We'll talk tech and drink great coffee!",
10.                     body : [
11.                          {
12.                               label : "Start a Chat",
13.                               action : {
14.                                    invoke : "start.chat"
15.                               }
16.                          },
17.                          {
18.                               label : "Place a Call",
19.                               action : {
20.                                    invoke : "start.call"
21.                               }
22.                          },
23.                          {
24.                               label : "Explore our Products",
25.                               action : {
26.                                    invoke : "open.url",
27.                                    url : "https://events.zoho.com/ZoholicsSydney2024"
28.                               }
29.                          },
30.                          {
31.                               label : "About Us",
32.                               action : {
33.                                    invoke : "open.article",
34.                                    article_id : "115844000014148177"
35.                               }
36.                          },
37.                          {
38.                               label : "Book an Appointment",
39.                               action : {
40.                                    invoke : "custom.action",
41.                                    clientaction_name : "openBookingForm"
42.                               }
43.                          }
44.                     ]
45.                }
46.           }
47.      ]);
48. }
49. </script>
    

Output

Points to remember:

1. Invoke actions: The invoke field defines the type of action that the message or list item will trigger. Possible values include:
1. start.chat: To start a chat session.
2. start.call: To initiate a call.
3. open.url: Opens a URL in a browser based on url key provided inside the action object.
4. open.article: Opens a specified article based on the article id given in article_id inside the action object.
5. custom.action: Triggers a custom client-side action based on clientaction_name key inside the action object. Refer client action JS API document.
2. Optional fields: Fields like video_url, image_url, article_id, clientaction_name and url should be included only if necessary. Based on the action that needs to be triggered, define the keys. For instance, if the action was to start a chat, providing an article id will not have any effect.
3. Client actions: If the list item action requires a custom behavior on your website, the clientaction_name field can specify a custom action that the client can handle.