Types of personalized widgets

1. Announcement widget
2. News widget
3. Command panel widget
   
4. IM channel widget

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. 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. }

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. }
7. 
   
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. }
15. 
    
16. 3. email
17. {
18. "type" : "email",
19. "label" : string, // Text to be shown
20. "email_id" : "support@zohosalesiq.com"
21. }
22. 
    
23. 4. chat
24. {
25. "type" : "chat",
26. "label" : string // Text to be shown
27. }
28. 
    
29. 5. article
30. {
31. "type" : "article",
32. "article_id" : $articleId // Ex : "115844000014148177"
33. "label" : string // Text to be shown
34. }
35. 
    
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. }

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

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. //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>

Sample code

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:

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

Channel Name	Example URL Format	ID
WhatsApp	https://wa.me/917305992852	917305992852
LINE	https://line.me/R/ti/p/@246qkdpd	@246qkdpd
Instagram	https://ig.me/m/ZohoSalesIQ	ZohoSalesIQ
WeChat	weixin://dl/chat?<WECHAT_ID>	zoho_support_id
Facebook	https://m.me/ZohoSalesIQ	ZohoSalesIQ
X (Twitter)	https://x.com/messages/compose?recipient_id=5827392	5827392
Telegram	https://t.me/zylker_shop_bot	zylker_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>

channel_links

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>