Kaizen #23 - Widgets

Hello Everyone!

Welcome to another week of Kaizen!

In this post, we are going to discuss Widgets in detail.

First things first—What are Widgets?

Widgets are embeddable UI components that you can create and add to your Zoho CRM. You can use widgets to perform functions that utilize data from third-party applications. You can build widgets for Zoho CRM using our JS SDK.

For instance,

You want your sales representatives to handle new requirements/customization requested by prospects by raising internal tickets. The respective team can analyse the tickets and proceed with taking further actions. Although it is available as a different ticketing software, switching between them can be time-consuming and strenuous. Using widgets, you can make it available inside Zoho CRM itself thus, saving time and effort.

Simply put, widgets give you the power to merge all your work that might be separated in different software into Zoho CRM. Thus, making your work easy and swift.

Where can you use widgets?

Currently, you can add widgets to:

Custom Buttons
Related Lists
Webtabs
Homepage Dashboards

Steps to create a widget

Step 1: Installing the CLI (Command Line Interface)

Step 2: Creating a widget

Step 3: Adding and Hosting Widgets

Step 4: Using Widgets

Step 1: Installing the CLI

The command line interface is a text-based interface to access a third-party application using commands. Here, we are going to use the zet CLI for explanation.

Installing the necessary components

Pre-requisites:

1. Download the nodejs source code from "https://nodejs.org/en/download/".

2. Once you have installed Node JS, run the following command to verify it.

$ node -v

$ npm -v

Installing zet

Zet is a CLI that helps you to build and package widgets in Zoho CRM.

Run the following command to install the zapps CLI node package. Ensure that your system has Node JS 6 or above.

$ npm install -g zoho-extension-toolkit

Run the following command to ensure that the installation was successful.

$ zet //Help information about 'zet' command will be shown.

Creating a project

1. Run the following command to create a new project.

$ zet init

This command will show the list of Zoho Services for which you can create a project template.

In this case, select Zoho CRM as the service. Provide a name for your widget. The sample project will be created in the respective folder directory.

2. To open the project, run the following command.

cd {Project_Name}

Step 2: Creating a Widget

Now, you can start designing and including the UI components for the Widget in the widget.html file. You can find this file in the "app" folder of your project. This file must contain the structure, design, and components of the Widget.

The HTML code for ZenDesk widget

This widget helps you handle new requirements/customization requested by prospects by raising internal tickets. The respective team can analyse the tickets and proceed with taking further actions.

<html>

<head>

</head>

<body>

<h2>Create Ticket</h2>

<label for="subject">Subject:</label>

</div>

<label for="description">Description:</label>

</div>

<button type="button" onclick="des()" class="btn btn-success">CREATE</button>

<button type="submit" class="btn btn-primary">CLOSE</button>

</form>

</div>

$(document).ready(function(){

initializeWidget();

})

</script>

</body>

</html>

To use the Zoho CRM APIs in the widget, you can use the API helpers provided in the JS SDK.

Example HTML code with API helpers:

<!DOCTYPE html>

<html>

<head>

<title>Heatmaps</title>

var id;

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

id= data.EntityId;

});

ZOHO.embeddApp.init()

.then(function(){

ZOHO.CRM.API.getRecord({Entity:"Accounts",RecordID:id})//CRM API helper

.then(function(errData){

console.log(data)

})

});

</script>

</head>

</html>

3. Once you have created the widget, you can host the widget locally and test.

To host the widget locally:

$ zet run

You can test the widget using the host address received.

Once you have tested the widget and find no problems with it, you can package the widget and host it internally or externally.

Internal Hosting

You can host your application's static content using Zoho CRM's internal hosting. With the help of Zoho's CLI, you can create, develop, test, and package your widgets. You have to upload the files of the application in a zip format.

Also, if you choose to run your widgets through internal hosting, you need not host your application elsewhere. In general, you can choose internal hosting, if you have created the application.

External Hosting

Some services are available from third-party sources. They allow you to use their software from their websites. In order to make those applications available in your CRM, you can choose external hosting.

Validating and Packaging the application

1. To validate your application, run the following command,

$ zet validate

This will validate your app package and identify violations, if any. They should be corrected before updating the zip in our developer console.

2. To generate an uploadable zip of your application, run the following command,

$ zet pack

This will create a zip file of the application under the "dist" folder of your project directory, which can be uploaded to the CRM.

Step 3: Adding a widget

To add a widget:

1. Go to Setup > Developer Space > Widgets.

2. Click Create your First Widget.

3. In the following pop-up,

Give the widget a Name (mandatory).
Provide a description about the widget (optional).
Select the preferred Widget type.
Select the preferred Hosting type.

4. To host the application internally:

Select Zoho from the Hosting drop-down.
Click Upload.
Select the compressed (ZIP) file of your application (Maximum size limit is 25MB)
Provide the Index URL of your application in the CRM. The base URL is automatically generated for internal hosting.

5. To host the application from external sources,

Select External from the Hosting drop-down.
Enter the URL of the website where the application is hosted. For instance, here is an example to add a heatmap widget through external hosting.

6. Click Save.

Step 4: Using a widget

Once the widget is added to your CRM, it can be used from the component to which it was associated to. Below are the two sample widgets.

1. ZenDesk

Using this widget, users can raise internal tickets from Zoho CRM itself. They need not open a new tab to do the same.

2. Heatmap

This widget displays a heatmap of the distribution of sales in a city. You can get an idea of the locations where the sales are booming, and plan accordingly.

A widget can also be used in Dashboard, Custom Button, or Related List. Refer to Widgets - Usage for more details.

We hope you found this post useful. Stay tuned for more!

Cheers!

Previous 'Kaizen' - Connections in Zoho CRM

Next 'Kaizen' - CORS and the JS SDK

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

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

Tout forum

France ZUGs

Zoho SalesIQ Resources

Topic Participants
Sneha Sridharan

Sticky Posts
Extension pointers for integrating Zoho CRM with Zoho products #8: Upload and manage Zoho Workdrive folders and files from within Zoho CRM
Keeping records on your customers and business prospects is essential for tracking data, conducting follow-ups, and running a business smoothly. When you use two separate applications, and store relevant data in each, checking and tracking data becomes
Extension pointers: Handle cases with personalized solutions using custom actions
In our last post, we detailed the steps involved in creating a custom action and the workflow from the developer and end user's side. Now let's look at a working example of how we can create a custom action and implement it in a Zoho CRM account to make
Extension pointers - Simple yet significant pointers #13: On change of field value for CRM variables
CRM variables provide global access to a variable across an entire extension. They also help in the storage of user-specific data provided by the user at the time of installation, which can later be fetched to perform data functionalities. Additionally,
Extension pointers: Extend end-user benefits and allow personalization by implementing extensions with custom actions
From our earlier post on custom actions, we know that we can create templated actions, share them with end users, and allow them to reuse those actions to achieve personalized outcomes. In this post, we'll look at how custom actions make it easy for users
Extension pointers - Simple yet significant pointers #12: Functions for Zoho CRM extensions
Functions are essential in achieving logical functionality for an extension. You can easily code your functions in Deluge using drag-and-drop tools to meet your requirements. How to create functions for Zoho CRM extensions in Sigma Go to Sigma and select