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

Estimated reading: 3 minutes 18 views

Introduction

Looking to make your live chat window more engaging for website visitors? With Zoho SalesIQ’s personalised widgets (Beta), you can now enhance the look and feel of your chat interface, promote content, and guide users to take action – all within the chat itself.

Whether it’s sharing updates, promoting products, or connecting users to your support channels, these interactive widgets make communication clearer, quicker, and more tailored to your business goals.

Note: This feature is currently in beta. The widget JS API works only with the new SalesIQ live chat. If you’re using an older version, please contact SalesIQ support to upgrade.

Step-by-Step Instructions

Step 1: Add Zoho SalesIQ Installation Code to Your Website

Go to SalesIQ Dashboard > Settings > Brands > Installation > Website.
Copy the SalesIQ installation code.
Paste the code just before the closing </body> tag of your website’s HTML.

Step 2: Insert Widget Code into the Installation Script

After adding the SalesIQ script, insert the personalised widget code into the ready() function like this:

CopyEdit

$zoho.salesiq.ready(function() {
    $zoho.salesiq.set(“home.widgets”, [
        // Your widget code here
    ]);
});

You can include multiple widgets one after the other inside the array.

Types of Personalised Widgets in Zoho SalesIQ

Zoho SalesIQ offers four types of custom chat widgets:

1. Announcement Widget

Highlight events, offers or promotions with a call-to-action button.

Features:

Banner (image or video)
Title and body text
CTA button linking to a URL or article

Output:

2. News Widget

Share product updates or news without a CTA button.

Features:

Banner (image or video)
Title and body text

Output:

3. Command Panel Widget

Let users take direct actions like starting a chat or booking a service.

Features:

Title
Action buttons for:
- Chat
- Call
- Open link
- Show article
- Trigger custom actions

Output:

4. IM Channel Widget

Display your social and messaging channels like WhatsApp, Facebook, and Instagram.

Two display types:

Action Item – Shows each channel as a vertical button.
Channel Links – Displays icons side-by-side for a compact look.

Output:

Widget Code Snippets

Example: Announcement Widget

CopyEdit

{
    type: “announcement”,
    banner: {
        type: “image”,
        url: “https://yourdomain.com/image.jpg“,
        image_position: “fit”
    },
    title: “Free Business Workshop”,
    text: “Join us to explore digital tools for scaling your business.”,
    action: {
        type: “link”,
        label: “Register Now”,
        url: “https://yourdomain.com/workshop“
    }
}

Example: News Widget

CopyEdit

{
    type: “news”,
    banner: {
        type: “image”,
        url: “https://yourdomain.com/news-image.jpg“,
        image_position: “fill”
    },
    title: “Product Update: New Features Released”,
    text: “Check out the latest improvements in your SalesIQ dashboard.”
}

Example: Command Panel Widget

CopyEdit

{
    type: “command_panel”,
    title: “Quick Access”,
    actions: [
        { type: “chat”, label: “Chat with Us” },
        { type: “call”, label: “Call Us”, provider: “native”, contact_number: “0123456789” },
        { type: “link”, label: “Visit Help Centre”, url: “https://yourdomain.com/help” },
        { type: “client_action”, label: “Book Demo”, name: “bookbtn”, clientaction_name: “book_now” }
    ]
}

Example: IM Channel Widget (Action Item)

CopyEdit

{
    type: “action_item”,
    title: “Connect via WhatsApp”,
    icon: {
        type: “channel”,
        name: “whatsapp”,
        url: “https://wa.me/447123456789“
    }
}

Example: IM Channel Widget (Channel Links)

CopyEdit

{
    type: “channel_links”,
    title: “Find us on”,
    channels: [
        { name: “facebook”, url: “https://m.me/yourpage” },
        { name: “instagram”, url: “https://ig.me/m/yourusername” },
        { name: “x”, url: “https://x.com/messages/compose?recipient_id=1234567” }
    ]
}

Tips for Using Widgets Effectively

Keep it simple – Use short, clear messages with strong CTAs.
Use visuals – Images or videos boost engagement.
Test regularly – Check display across different pages and devices.
Update often – Keep offers and updates fresh to encourage return visits.
Tailor per page – Use different widgets for different pages or user actions.

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

Introduction

Step-by-Step Instructions

Step 1: Add Zoho SalesIQ Installation Code to Your Website

Step 2: Insert Widget Code into the Installation Script