Personalize your SalesIQ Chat window with new custom widgets
This guide details the setup options and steps for integrating a personalized widget into your Zoho SalesIQ chat window using JS API.
Syntax:
- $zoho.salesiq.ready(function() {
- $zoho.salesiq.set("home.widgets", [
- // List of Widgets to be shown
- ]);
- })
The following personalized widget types can be added to your SalesIQ chat window:
- Announcement message
- Info message
- List message
Widget types for your SalesIQ chat window
Announcement message
An announcement message can typically contain the following elements:
- 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
Code structure
- {
- "type": "announcement",
- "data": {
- "banner": {
- "video_url": "URL_TO_VIDEO",
- "image_url": "URL_TO_IMAGE"
- },
- "title": "STRING",
- "body": {
- "text": "STRING"
- },
- "action": {
- "invoke": "STRING",
- "article_id": "STRING",
- "url": "URL",
- "text": "STRING"
- }
- }
- }
Sample announcement message with code structure
- {
- "type": "announcement",
- "data": {
- "banner": {
- "image_url": "https://example.com/chicago-meetup-image.png", // URL of the Chicago skyline image
- "alt_text": "Chicago Meetup"
- },
- "title": "Lead Nurturing 101: Free Training", // Title of the announcement
- "body": {
- "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." // Description text
- },
- "action": {
- "invoke": "open.url", // Action triggered by clicking the button
- "url": "https://example.com/register", // URL where the button directs users
- "text": "Register now" // Text for the action button
- }
- }
- }
Info message
An info message is similar to an announcement, but often uses an image in the banner and does not include an explicit call-to-action button.
Code structure
- {
- "type": "info",
- "data": {
- "banner": {
- "image_url": "URL_TO_IMAGE"
- },
- "title": "STRING",
- "body": {
- "text": "STRING"
- }
- }
- }
Sample info widget with code structure
- {
- "type": "info",
- "data": {
- "banner": {
- "image_url": "https://example.com/zoho-sydney-image.png", // URL of the Zoholics Sydney banner image
- "alt_text": "Zoholics Sydney Australia"
- },
- "title": "Join us at Zoholics: We'll talk tech and drink great coffee", // Title of the info card
- "body": {
- "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!" // Description text
- }
- }
- }
List message
A list message allows for multiple actions that can be performed, each represented by a label. The actions performed can be as follows.
- Invoke a chat
- Invoke a call
- Open a URL
- Trigger a client action
Code structure
- {
- "type": "list",
- "data": {
- "title": "STRING",
- "body": [
- {
- "label": "STRING",
- "action": {
- "invoke": "STRING",
- "url": "URL",
- "article_id": "STRING",
- "clientaction_name": "STRING"
- }
- }
- ]
- }
- }
Points to remember
- Invoke actions: The invoke field defines the type of action that the message or list item will trigger. Possible values include:
- start.chat: To start a chat session.
- start.call: To initiate a call.
- open.url: Opens a URL in a browser based on url key provided inside the action object.
- open.article: Opens a specified article based on the article id given in article_id inside the action object.
- custom.action: Triggers a custom client-side action based on clientaction_name key inside the action object. Refer client action JS API document
- Optional Fields: Fields like video_url, image_url, article_id, clientaction_name and url should be included only if necessary. Provide keys based on the action that needs to be triggered. For instance, if the action was to start a chat, providing an article id will not have any effect.
- Client Actions: If the list item action requires a custom behavior, the clientaction_name field can specify a custom action that the client can handle.
Sample list widget with code structure
- {
- "type": "list",
- "data": {
- "title": "Join us at Zoholics: We'll talk tech and drink great coffee", // Title of the list widget
- "body": [
- {
- "label": "Start chat", // Label for the chat action
- "action": {
- "invoke": "start.chat" // Action type: start a chat
- }
- },
- {
- "label": "Start call", // Label for the call action
- "action": {
- "invoke": "start.call" // Action type: start a call
- }
- },
- {
- "label": "Open url", // Label for the URL action
- "action": {
- "invoke": "open.url", // Action type: open a URL
- "url": "https://example.com" // URL to be opened
- }
- },
- {
- "label": "Open article", // Label for the article action
- "action": {
- "invoke": "open.article", // Action type: open an article
- "article_id": "115844000014148177" // ID of the article to be opened
- }
- },
- {
- "label": "Trigger client action", // Label for a custom client action
- "action": {
- "invoke": "custom.action", // Action type: trigger a custom action
- "clientaction_name": "openBookingForm" // Name of the custom action
- }
- }
- ]
- }
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
WhatsApp Templates on SalesIQ
WhatsApp templates are pre-saved message layouts or formats that businesses can utilize to send updates, communications and notifications to their customers. These will be particularly useful for sending messages such as order confirmations, shipping ...Integrating Zoho Bookings with Zoho SalesIQ
Zoho Bookings in SalesIQ Zoho Bookings is an online tool that your customers can use to book appointments with your experts and specialists to avail your services. When you publish your services on Zoho Bookings, your customers can access this ...Audio Calls in SalesIQ chat window
Server Maintainance Update: We have changed the servers. As a result, the IP ports are changed. If you have whitelisted the Zoho SalesIQ to get support from our team, Please enable/whitelist the following ports in your firewall for calls/conferences ...How to customize the live chat widget and window?
You can now customize the live chat widget and the chat window to match your website's look-and-feel and choose where and how you want them to be displayed to your customers and can connect with them seamlessly. Choose your widget type Float Widget ...Click to Call on SalesIQ chat window
Click-to-call customer support is a convenient feature that lets website visitors initiate a phone call with a support representative by simply clicking a button within a website or chat interface. The call option on the chat window allows visitors ...
New to Zoho LandingPage?
Zoho LandingPage Resources