Extension pointers: Working with widgets to power-up extension capabilities (Part-2)

Widgets simplify work and enhance the functionality of Zoho CRM by contextually embedding third-party services and adding new features to Zoho CRM.

In the previous post (Part 1), we mentioned what widgets are, the basic steps to install ZET CLI, and how to create a widget. Here's a quick summary of those pointers before we move into further detail with our current post.

Widgets help embed applications in Zoho CRM and seamlessly synchronize application data into native CRM components.
It also helps to add new features to Zoho CRM and create customized UI interfaces using the HTML, CSS, and JS library.
Zoho Command Line Interface (ZET CLI) can be used to create, validate, package, and locally run your widgets.

After packing the widget you can embed it inside Zoho CRM as a connected app and host the widget either internally or externally on the server to get it running. As a continuation of the previous post, let's see the different ways to host widgets and how widgets can be embedded in Zoho CRM.

A widget application can be hosted either internally or externally.

Internal Hosting

Zoho's Servers are used to host an application internally. In order to host the application you created internally, you will need to upload the packed and zipped file of your project.

External Hosting

External hosting enables you to host your app externally with third-party web hosting solutions.

Where can widgets be embedded in Zoho CRM?

A widget can be embedded into different components in Zoho CRM

➤ Custom button

➤ Related list

➤ Web tab

In this post, we'll explain the steps involved in hosting a widget internally in Zoho using a connected app and embedding it in Zoho CRM Components while building an extension.

Steps to associate the Widget with a connected app of your extension and host it

1. Go to the Extension's Detail page of your extension.

2. Choose Connected Apps from the left panel of the Zoho Developer console under Utilities.

3. Provide the name and a description for the connected app. To host an application internally,

Choose Internal Hosting
The sandbox Zoho server URL is predefined and serves as the base URL.
Upload the zipped file of the widget from the dist folder of your project's directory

Click Save

Steps to Embed the widget

Once a widget is associated with your extension as a connected app, the next step is to embed and position the widget in the CRM components where you want it to serve its purpose.Now, let's see where you can embed the widgets.

Custom Button

Choose Components from the left panel of the Zoho Developer console under Build. Select the Links & Buttons tab and click Create New Button.

Provide the necessary details and select Invoke a Widget as the action you would like the button to perform.

Specify the HTML file location by appending it with the sandbox URL and click Save.

Once the custom button has been created successfully, you can test it in the sandbox testing environment to check if the functionality is working as intended. Later, when the extension is installed, the custom button will perform the functionality as defined in the widget in your Zoho CRM account.

Custom Related List

Similar to a custom button, it is possible to embed a widget into any module as a related list.

Choose Components from the left panel of the Zoho Developer console under Build. Select the Related Details tab and click Add Widgets.

Specify the sandbox URL of the widget along with the necessary details and click Save.

Web Tab

Choose Modules from the left panel of the Zoho Developer console under Build. Select the Web Tabs tab and click Create Web Tab.

Choose Type as Widget and specify the sandbox URL of the widget along with the necessary details and click Save.

Once you've embedded the widget in the required location, you can test it using the sandbox testing environment to see if the functionality is working as intended. Customize and enhance the widget's functionality as needed.

Up to this point we've explained in detail the process to install CLI, create a widget, associate the widget with a connected app, and embed it in Zoho CRM. In our upcoming post we'll see a working example of this process. Keep following this space for more information.

<<Previous

Next>>

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

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