Welcome to Portal

?Unknown\pull-down

Welcome to Zoho Cares

Bienvenido a Soporte de Zoho

Search our knowledge base, ask the community or submit a request.

Personalize your SalesIQ Chat window with new custom widgets (Beta)

AlertNote:
  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.

Types of personalized widgets

SalesIQ supports three widgets types where you use them for news & updates with a CTA, listing your products, services and more. 
  1. Announcement widget
  2. Info widget
  3. List 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
 



Info


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



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.


  1. Title
  2. Actions
    1. Invoke a chat
    2. Invoke a call
    3. Open a URL
    4. Trigger a custom client action


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. Custom widget codes can be added for the provided widget types -  Announcement message, Info message and List message.

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.
Syntax:
  1.  {
  2.     "type": "info",
  3.     "data": {
  4.         "banner": {
  5.             "image_url": "URL_TO_IMAGE"    
  6.         },
  7.         "title": "STRING",
  8.         "body": {
  9.             "text": "STRING"
  10.         }
  11.     }
  12.  }
  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

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 : "info",
  8.                data : {
  9.                     banner : {
  10.                          image_url : "https://previewengine-accl.zohoexternal.com/image/BACKSTAGE/912000271967525?cli-msg=eyJtb2R1bGUiOiJFdmVudEltYWdlUmVzb3VyY2UiLCJ0eXBlIjowLCJwb3J0YWxJZCI6IjY1MDczMzk2MSIsInN1YlJlc291cmNlSWQiOiI2NTA3MzM5NjEiLCJpZCI6IjkxMjAwMDI3MTk2NzUyNSJ9",
  11.                     },
  12.                     title : "Join us at Zoholics: We'll talk tech and drink great coffee",
  13.                     body : {
  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.      ]);
  19. }
  20. </script>

Output


List message

  1. The syntax code for a list message is as follows.
Syntax:
  1. {
  2.     "type": "list",
  3.     "data": {
  4.         "title": "STRING", 
  5.         "body": [    
  6.             {
  7.                 "label": "STRING",
  8.                 "action": {
  9.                     "invoke": "STRING",
  10.                     "url": "URL",
  11.                     "article_id": "STRING",
  12.                     "clientaction_name": "STRING"
  13.                 }
  14.             }
  15.         ]
  16.     }
  17. }
  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



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

Helpful?70
Updated: 2 months ago
Share :