Widget Support

Widget Support

This guide helps you with the following:
  1. Embed a Telephony Widget 
  2. Create a Web Tab‌ 
  3. Create a Related List 
  4. Create a Custom Button 
  5. Create a Settings Widget 
  6. Create a Business Card Widget 
Sometimes, you may want to include features in your Zoho CRM application that are only available through off-the-shelf software. The ability to integrate with these external services helps you in extending the functionality of your application. Zoho Developer's widgets help you build embeddable UI components and seamlessly integrate them with your application data.

Types of Widgets

Currently, Zoho CRM supports five types of widgets in its user interface:

Telephony Widget

  1. This widget is used to integrate and embed any call center or telephony application inside Zoho CRM application.
  2. After users install the telephony widget, they can place a call by clicking on the telephone icon []



Embed a Telephony Widget

  1. Log in to Zoho Developer Console and click Extensions for Zoho CRM.
  2. Select the extension you'd like to modify and click Edit.
  3. Create a Connected App.
  4. Click Telephony in the left pane.
  5. In the Telephony page, provide the following details:
    1. Name for the widget in Call Center Name field.
    2. A resource path in SandBox URL field.
      This is the relative path to the main view of your telephony widget.
  6. Click Save.


To learn how to use a telephony widget, click here.

Web Tabs

  1. Through web tab widgets, you can embed information from a third-party application inside your Zoho CRM application. Web tab widgets differ from ordinary web tabs in their ability to fetch data through APIs provided by Javascript SDK.
  2. If you need to create modules with UI elements that cannot be added using prebuilt or custom modules, or if you need to add features in your module that are not supported by prebuilt or custom modules, you can do so using web tabs.
  3. Web tabs are displayed in your application like any other prebuilt or custom modules.


Create a Web Tab‌

  1. Log in to Zoho Developer Console and click Extensions for Zoho CRM.
  2. Select the extension you'd like to modify and click Edit.
  3. Create a Connected App.
  4. Click Modules, located in the left pane, and select the Web Tabs tab.
  5. Click the Create Web Tab button in the List of Web Tabs page.
  6. Enter the following information:
    1. Name for the widget in Tab Name field.
    2. Select Type as Widget.
    3. A resource path in SandBox URL field.
      This is the relative path to the main view page of your web tab widget.
  7. Click Save.


To learn how to put to use a web tab widget, click here.

  1. This widget helps you display correlated information from other modules or third-party service in the View page and represent it contextually as a related list.
  2. For example, you can integrate Google Drive with your application and upload documents from your CRM application to your Google Drive account. You can view within a record, a related list of all the associated documents uploaded to your Google Drive account. The related list will be automatically synced to your Google Drive account.


  1. Log in to Zoho Developer Console and click Extensions for Zoho CRM.
  2. Select the extension you'd like to modify and click Edit.
  3. Create a Connected App.
  4. Click Components located in the left pane.
  5. Select Related Details tab and click Add Widgets button.
  6. Enter the following information:
    1. Name for the related list in Name field.
    2. Select the name of the Module in which the related list has to be added.
    3. A resource path in SandBox URL field.
      This is the relative path to the main view page of your related list widget.
  7. Click Save.
To learn how to put to use a related list widget, click here.

Custom Buttons

  1. Buttons can also be configured as widgets. These widgets are used in List View pages or Record Details pages of a module to perform specific operations on clicking the button.
  2. For example, if you want to send an SMS to a Contact, then you can embed a Send SMS button to integrate with any messaging service. This button could be placed in the View, List View page or at List View - Button for each record of Contact(s).





Create a Custom Button

  1. Log in to Zoho Developer Console and click Extensions for Zoho CRM.
  2. Select the extension you'd like to modify and click Edit.
  3. Create a Connected App.
  4. Click Components located in the left pane.
  5. In the Components page, select the Links & Buttons tab.
  6. Click the Create New Button button.
  7. Enter the following information:
    1. Select the name of the Module in which the button has to be displayed.
    2. Name for the button.
    3. Click the Add Description link and specify the functionality of your custom button.
    4. Choose the location to place the custom button.
    5. Select Invoke a Widget as the action to be executed by the custom button.
    6. A resource path in SandBox URL field.
      This is the relative path to the main view page which will be displayed when your custom button widget is clicked.
  8. Click Save.


To learn how to put to use a custom button widget, click here.

Settings Widget

  1. While installing an extension, you'll want to put in place some configurations that are necessary for its functioning. Settings Widget helps you create the interface for establishing such configurations.
  2. These configurations can be a one-time set up of some global parameters that are used to authenticate the extension with an external system. It could also be some data configurations that are needed to correlate data between your application and a third-party product.
  3. Settings Widget helps you maintain centralized control and access to the set-up data of the extension.
  4. For example, consider the example where you are going to use data from an external source to create records in your CRM modules. While doing so, you might want to establish how the data from the third party product is mapped to your CRM fields.
  5. When creating a new lead, account, or contact using the InsideView extension component, you can determine what values from InsideView should be prefilled for which fields in Zoho CRM. The below screenshot depicts the settings widget used in the InsideView extension.

  1. In extensions where Settings Widgets are used, the Settings option will appear in the listing for the Installed extensions.



Create a Settings Widget

  1. Log in to Zoho Developer Console and click Extensions for Zoho CRM.
  2. Select the extension you'd like to modify and click Edit.
  3. Create a Connected App.
  4. Click Settings Widget located in the left pane.
  5. In the Settings Widget page, provide the following details:
    1. Name for the widget in Widget Name field.
    2. A resource path in SandBox URL field.
      This is the relative path to the main view page of your settings widget.
  6. Click Save.

Business Card Widget

In the View page of a record in your CRM Solution, the data can be presented in a variety of modes. Use a one- or two-column section layout, related lists, and other options to customize the content and layout to ensure data is presented in the most pertinent way. You can also embed other UI components and data representations in your record by using the Business Card widget. Use the Business Card widget to display data in new formats and display derived information which is not supported in the usual framework of the CRM solution record.

Here are a few examples of how to use the Business Card widget in your application:
  1. Display the degree of completion for details in any module record (refer to the screenshot below)
  2. Display related product suggestions
  3. Display infographics or statistical data related to the record
  4. Indicate progress of a process or steps covered in a process
The Business Card widget can be included in any module record in your Zoho CRM application.

Create a Business Card Widget

  1. ‌‌Log in to the Zoho Developer Console and click Extensions for Zoho CRM.
  2. Select the application to modify and click Edit.
  3. Create a Connected App.
  4. Click Components in the left pane.
  5. Select Business Card Widget and click Create Widget.
  6. Provide the following details:
    1. Enter a name for the widget in the Widget Name field.
    2. Select the Module to view the business card widget in.
    3. Enter a resource path in the SandBox URL field.
      This is the relative path to the main view page of your business card widget.
  7. Click Save.


Ensure that the height parameter in the ZOHO.CRM.UI.Resize() method has a value greater than zero.
  1. ZOHO.CRM.UI.Resize({width:0,height:200});



    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 CRM Training
        Redefine the way you work
        with Zoho Workplace

          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 CRM Training

            Create, share, and deliver

            beautiful slides from anywhere.

            Get Started Now


              Zoho Sign now offers specialized one-on-one training for both administrators and developers.

              BOOK A SESSION









                                            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.




                                                Manage your brands on social media

                                                  Zoho Desk Resources

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                    Zoho Marketing Automation

                                                      Zoho Sheet Resources

                                                       

                                                          Zoho Forms Resources


                                                            Secure your business
                                                            communication with Zoho Mail


                                                            Mail on the move with
                                                            Zoho Mail mobile application

                                                              Stay on top of your schedule
                                                              at all times


                                                              Carry your calendar with you
                                                              Anytime, anywhere




                                                                    Zoho Sign Resources

                                                                      Sign, Paperless!

                                                                      Sign and send business documents on the go!

                                                                      Get Started Now




                                                                              Zoho TeamInbox Resources



                                                                                      Zoho DataPrep Resources



                                                                                        Zoho DataPrep Demo

                                                                                        Get a personalized demo or POC

                                                                                        REGISTER NOW


                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now









                                                                                                              • Related Articles

                                                                                                              • Widget Support

                                                                                                                This guide will help you with the following: Embed a Telephony Widget  Create a Web Tab‌  Create a Related List  Create a Custom Button  Create a Getting Started Widget  Create a Business Card Widget  Sometimes, you may want to include features in ...
                                                                                                              • Building a Ring Central Telephony Widget

                                                                                                                A RingCentral widget embedded inside Zoho CRM allows users to perform various activities. A CRM user can: Load the telephony dial pad as an iframe in the Zoho CRM interface by using the telephone icon at the bottom right corner of the screen. Make a ...
                                                                                                              • Building a Zillow - Related List Widget

                                                                                                                A Zillow widget embedded inside Zoho CRM allows users to obtain various pieces of information about properties in the US. With a Zillow widget, a CRM user can: Get complete property details by entering the property address as input information. View ...
                                                                                                              • Building a Google Drive - Related List Widget

                                                                                                                Embedding a Google Drive widget inside Zoho CRM as a Related list allows a user to accomplish three tasks, Fetch files from Google Drive and show them as a related list in the record's detail page in CRM. Upload any document from Zoho CRM to a Google ...
                                                                                                              • Getting Started with Connected Apps

                                                                                                                A Connected App provides you with the means to integrate Zoho CRM with other applications, using APIs. This allows you to incorporate capabilities offered by external applications, thereby extending the feature set of your CRM. The data exchange ...
                                                                                                                Wherever you are is as good as
                                                                                                                your workplace

                                                                                                                  Resources

                                                                                                                  Videos

                                                                                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                  eBooks

                                                                                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                  Webinars

                                                                                                                  Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                  CRM Tips

                                                                                                                  Make the most of Zoho CRM with these useful tips.



                                                                                                                    Zoho Show Resources