Kaizen 156 - Enhancing Mass Communication in Zoho CRM with a Custom Button Widget

Hello code enthusiasts!

Welcome to a fresh week of Kaizen! In this post, you will learn how to build a custom button widget to boost mass communication of your business using SMS notifications and pre-recorded calls within Zoho CRM.

Business Scenario

Timely communication with customers is crucial in any business to send important updates, reminders, and promotional messages.

Imagine you are managing a sales team, and your business regularly sends promotional offers to hundreds of customers. Typically, you would need to export customer details to a separate broadcasting system, create the messages, and send them manually.

Instead of manually making individual calls and messages about the offer, you can now leverage this custom button widget placed in the mass menu within Zoho CRM to send personalized SMS notifications or even recorded voice calls to your customers.

Creating a Custom Button Widget

Let us look at the steps to create a widget for the above-mentioned functionality.

1. Log in to your Zoho CRM, go to Setup>Customization>Modules and Fields and select your desired Module. For this demo, we will choose the Leads module.

2. In the Leads module, switch to the Buttons tab and click Create New Button.

3. Follow the steps outlined in this help page and create a new button in the Mass Action Menu with its action defined by a widget.

4. A pop-up appears for you to choose either from the available local widgets or create a new widget.

5. Follow the steps provided in this kaizen to create a new widget for this use case.

Code Logic for Mass Communication

6. Here is the code logic to send broadcast SMS notifications and pre-recorded calls to the selected leads.

Build the widget HTML page with the following elements shown in the GIF for obtaining user input like phone fields, sms/voice call preference, and the message content.

For voice calls, the entered text message will be converted to speech using Twilio's services.

The current module (Leads) and the selected record IDs are passed to the widget through the on PageLoad callback function.
For the current module, we used the Zoho CRM Meta JS SDK to get fields that have phone data type in it. These fields are listed in the Phone Fields dropdown, allowing the user to select the desired phone numbers that Twilio should use to send SMS or make calls.
The COQL API SDK helps fetch values from the selected Phone fields in the dropdown for the selected record IDs.
Depending on the selected action SMS or Voice Call tab, the corresponding Twilio Message or Call API will be triggered for communication.

For this demo, we used the Twilio APIs for sending SMS and making pre-recorded calls, but you can use any cloud communication platform of your choice.

const context = { };

async function getPhoneNumbers() {

const phoneFieldsDropdown = document.getElementById('phone-fields-dropdown');

const selectedValues = Array.from(phoneFieldsDropdown.options).filter(option => option.selected).map(option => option.value);

if (!selectedValues.length) {

return showAlert('error', 'Please select atleast one phone field');

}

const ids = context.recordIds.map(x => `'${x}'`).join(', ');

const select_query = `SELECT ${selectedValues.join(', ')} FROM ${context.module} WHERE id in (${ids})`;

const {data} = await ZOHO.CRM.API.coql({select_query});

const phoneNumbers = [];

data.forEach(x => {

Object.keys(x).forEach(key => {

if (key !== 'id' && x[key]) {

phoneNumbers.push(x[key]);

}

});

return phoneNumbers;

}

ZOHO.embeddedApp.on("PageLoad", function (data) {

// Get the current module name and selected record ids

const {Entity, EntityId} = data;

context.module = Entity;

context.recordIds = EntityId;

// Get the phone fields for current module

ZOHO.CRM.META.getFields({Entity}).then(

function (response) {

const {fields} = response;

const phoneFields = fields.filter(x => x.data_type === 'phone').map(x => ({value: x.api_name, label: x.display_label }));

new Choices('#phone-fields-dropdown', {

removeItemButton: true,

choices: phoneFields,

placeholder: true,

placeholderValue: 'Select Phone Fields to be used'

});

ZOHO.CRM.UI.Resize({height:"400", width:"700"});

});

// Initialize twilio credentials

twilio.init("$YOUR_ACCOUNT_SID", "$YOUR_AUTH_TOKEN", "+YOUR_TWILIO_NUMBER");

})

ZOHO.embeddedApp.init();

Try It Out!

To try this out, a fully functional code sample is attached to this post. All you have to do is replace your Twilio credentials on line 185 and everything else is already setup for you.

Widget in Action

Select multiple records in the Leads module.
Click Broadcast (custom widget button) to open a streamlined interface (we have used Twilio for this demo).
Select the Phone Fields to which you need to send the message / pre-recorded call.
Choose SMS or Voice Call in the tab based on your requirement.
Enter your message and hit Send.

Ta-daa! The messages go out to all the selected records immediately. You can also use any other third-party cloud communication platform of your choice instead of Twilio.

Caution!

Since the Twilio Message and Call APIs are triggered from the UI, the Twilio authentication will be accessible to anyone with access to the Zoho CRM organization where this widget is deployed.

Similar Scenarios

Sales Teams can send follow-up reminders in bulk to multiple leads after an event.
Support Teams can inform customers about system maintenance or updates by sending bulk notifications.
Operation Teams can send updates on deliveries or service schedules to relevant contacts.

We hope you found this post useful and engaging!

If you have any queries reach out to us at support@zohocrm.com or let us know in the comments section.

Cheers!

--------------------------------------------------------------------------------------------------------------------------------------

Additional Reading

Zoho CRM Widget - An Overview, Installation and Creation, Mobile Compatibility, other Kaizens
Zoho CRM - Custom Button, COQL API, Fields Metadata API, JS SDK for Widgets
Twilio - Message API, Call API, Twiml(Twilio Markup Language)

--------------------------------------------------------------------------------------------------------------------------------------

Previous Post: Kaizen #155 - Frequently Asked Questions on Subforms | Kaizen Collection: Home

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Topic Participants
Kiruthiga G
Andres

Sticky Posts
Kaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using Client
Kaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provide
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
Extension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use API
Kaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved