This tutorial focuses on creating a custom widget to add to the top navigation of the Zoho CRM. There are many types of widgets and reasons you would choose to create a custom widget.
Primarily, any function that can not be accomplished within Zoho CRM needs to be done with a custom widget. This includes all types of integrations with external services or company-specific pages.
Further, the form validation and layout rules have limitations even after considering the power of custom functions. If you wish to harness the full abilities of HTML+CSS+JS inside of the Zoho CRM then this is the place to get started.
This article will walk through how to get started and initialize the connected app inside Zoho. The setup is the most difficult part, once you get a hang of it, you should be able to add modifications without too much issue.
The major benefits of Custom App over externally hosted solutions are the continuity of user flow (there’s no need to leave the application and go elsewhere) and custom apps don’t need to be verified with authentication keys (which can be notoriously tricky with the Zoho REST API)
Make sure you have node and npm installed (If you do not, install them)
Then install the Zoho Extension Toolkit (ZET)
npm install -g zoho-extension-toolkit
Then check to see if installed successfully (If you get a “command not found” error, refer to the appendix for troubleshooting)
Create The Project
It’s time to create the project. Visit the project Github for full code. This will make a project folder with everything that you will need to connect to Zoho:
This version is commented, slightly changed, and will be maintained. In the future, there will also likely be more Zoho integration projects to choose from. Up to you, either clone or use zet init.)
Select the “Zoho CRM” option. Then you can choose a project name. I chose to use “testWidget”
The next step is to navigate into the folder and run the app
cd testWidgetnpm installzet run
The documentation does not include the npm install step, however, you are likely to get an error similar to below if you do not install the dependencies:
Error in parsing CLI command : Error: Cannot find module ‘express’
After you do “zet run” the local development server will start on port 5000 and you can navigate to that screen to preview the test page. There will bea a translations folder and widget.html file in the “app” directory, so either click through to the widget page or go to http://127.0.0.1:5000/app/widget.html.
When you upload the widget to the connected apps section on Zoho CRM, it will need to live inside the app folder.
The next step is to run validation to check for any violations. Since we just downloaded the start code, there should be no violations. Nevertheless, it’s good practice to get in a habit of checking before each zip.
Finally, the files are going to need to be added as a zip to the connected app section of the CRM. To accomplish this run the package command.
This will create the distribution zip in the “dist” folder.
Upload and Distribute on Zoho
The files are now prepared for deployment, so head to the CRM settings. In the vertical solutions CRM, the app will first need to be added under the left tab options “Connected Apps”. This prepares it for usage elsewhere in the CRM, specifically Web Tabs and custom buttons (Pictured below).
To add the connected app
- Click “New Connected App”
- Give the app a name
- Select Internal Hosting (unless you are prepared with an s3 bucket or custom hosting)
- Upload the zip directly from the dist folder (include no other files)
- Select save
After hitting save your connected app page should look as below:
Next, it’s time to connect this app through a web tab. Navigate to the modules section and select the Web Tab page (as pictured below). After clicking the “Create Web Tab” button, your screen should look similar to below.
Steps To Complete:
- Name the Tab
- Select the type “Widget”
- Append a descriptive url parameter like “testWidget” to the Sandbox URL
- Select user permissions
- Add the widget
Select “Test application” in the top right corner and the new tab name will be in the menu bar. At this stage, however, there will most likely be a blank page.
The final two steps:
Finally, run the Zoho local server again with
Congratulations on making your own custom widget! I made this article because the Zoho documentation was missing a lot of the crucial details and had to spend some sessions on the phone with Zoho support.
“-bash: zet: command not found”. If you get this error after running the global install of the Zoho extensions toolkit then the path has probably not been added to your bash profile.
Go to your bash profile file inside the home directory (~/.bash_profile) and add the export path to find the download location. Most likely this is in the .npm-global folder bin. So the addition would be “export PATH=”/Users/[User Profile name]/.npm-global/bin:$PATH””. You can find your user profile in the prefix by running “npm get prefix”. Then save and run “source ~/.bash_profile” to save the changes and link the path.
Why Widgets/Offical Page: https://www.zoho.com/crm/developer/widgets.html
Zoho’s Widget Tutorial https://www.zoho.com/developer/help/extensions/buildingwidgets.html
More Information On API methods: http://help.zwidgets.com/help/v1.0.5/ZOHO.CRM.API.html