Integrating Zoho Creator and Zoho Desk using a Widget Extension
In the dynamic realm of customer support, innovation is key to maintaining an edge. Integrating Zoho Creator with Zoho Desk opens up new possibilities, streamlining workflows by bridging communication between platforms. This guide will lead you through the process of crafting a custom widget that links Zoho Creator and Zoho Desk.
Published on September 2, 2024
1. INTRODUCTION
In the fast-paced, ever-evolving world of customer support, staying ahead is not a luxury—it’s a necessity. Your ingenious foray into the arcane alchemy of Zoho Creator and Zoho Desk integrations can streamline your business processes by enabling seamless communication between different platforms.
In this guide, we will walk you through creating a custom widget that connects Zoho Creator and Zoho Desk. It will let you fetch and display data from a Zoho Creator app in Zoho Desk. This integration is useful for managing warranty info. It allows direct access to customer data stored in Zoho Creator from a Zoho Desk ticket.
2. CREATING THE ZOHO CREATOR APP
You start by creating an application in Zoho Creator to store and organize your data. This section offers a tutorial on building an app. Further, providing guidance on configuring a form for gathering information.
First, log into your Zoho Creator account.
Click on Create Application. Choose Create from Scratch and then click Create.
Name your application “Warranty Management.” Click on Create Application. You can enable the environment from here. It lets you add features in a specific environment. So you can test the new features without affecting the live app.
To capture warranty data, create a new form by clicking Create New Form and select From Scratch.
Name the form “Warranty Details” and click on Create Form.
Now, add the following fields to the form to capture warranty information:
- Email Address (email field)
- Product Name (single-line field)
- Warranty Start Date (date field)
- Warranty End Date (date field)
- Serial Number (single-line field)
Click Done to save your form and run a quick test to ensure everything is working correctly.
3. CREATING ZOHO DESK WIDGET EXTENSION
Now that you have a Zoho Creator app, the next step is to create a Zoho Desk widget. It will fetch warranty information from the Creator app. You must set up a development environment on your computer. Then, use Node.js to create and run your widget.
Start by logging into your Zoho Desk account.
Navigate to Settings and click on Build Extensions under Developer Space.
Now, click on Download Node.js under Build Extension.
Install Node.js using the package manager. There are other ways. But, as we will be working from PowerShell, let’s use this method.
Open PowerShell as an Administrator and run the command:
‘winget install Schniz.fm’
This installs the Fast Node Manager (fnm).
Configure the fnm environment by running:
‘fnm env –use-on-cd | Out-String | Invoke-Expression’
Install Node.js with:
‘fnm use –install-if-missing 20’
Verify the Node.js and npm versions:
‘node -v’
‘npm -v’
Ensure the versions match those listed on the Node.js website.
In Zoho Desk, go to the Build Extensions page and click on ZET CLI Tool under Build Extension.
Install the ZET CLI tool using the following command in PowerShell:
‘npm install -g zoho-extension-toolkit’
Now, initiate the extension project by running the following command:
‘zet init’
If the command fails, set the execution policy to unrestricted. Run this command, then run ‘zet init’ again:
‘Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope CurrentUser’
Now, select the Zoho Desk option for your project. Provide a project name. Then, select No when asked if you need the Support Module.
Then, the widget source files will be downloaded to your computer. Please locate them in ‘C:\Users\Administrator\your_project’.
Open the ‘plugin-manifest.json’ file in a text editor. Add details like the widget name, logo, and icon under the “widgets” attribute.
Name your widget by setting the “name” attribute. Provide the logo file path using the “logo” attribute. Set the icon path with the “icon” attribute. Once these details are filled in, save the file.
The next step is to edit the HTML and JavaScript files. Open ‘widget.html’ file in an editor from the “app” folder.
Now, add the following code in the ‘<body>’ tag.
| <div id=”warranty-info”> <p>Loading warranty information…</p> </div> |
The ‘widget.html’ file uses HTML to define your widget’s layout. It creates a basic user interface. To implement your widget’s logic, you’ll use the ‘extension.js’ file. Navigate to your project’s directory. Then, go to the “app” folder, the “js” folder, and open the ‘extension.js’ file in an editor.
Zoho Desk widgets can use the ZOHODESK JavaScript object. It lets them interact with ticket data. To access the ticket’s contact email, use the following code:
| // Initialize the widget and fetch ticket information
ZOHODESK.get(“ticket.contact.email”).then(function(response) { const emailObj = JSON.parse(response); const email = emailObj[‘ticket.contact.email’]; // Now use this email to fetch warranty information fetchWarrantyInfo(email); });
// The ‘fetchWarrantyInfo’ function will use the email from the ticket. // It will query the Zoho Creator app for warranty details.
function fetchWarrantyInfo(email) { // Replace with your actual Zoho Creator API URL const apiUrl = `https://creator.zoho.com/api/v2/YOUR_ZOHO_USERNAME/YOUR_APP_NAME/report/All_Warranty_Details?criteria=(Email == “${email}”)`;
// Fetch the warranty information using Zoho Creator’s API fetch(apiUrl, { method: ‘GET’, headers: { ‘Authorization’: ‘Zoho-oauthtoken ‘ + ‘YOUR_OAUTH_TOKEN’, ‘Content-Type’: ‘application/json’, } }) .then(response => response.json()) .then(data => displayWarrantyInfo(data)) .catch(error => console.error(‘Error:’, error)); }
// Function to display fetched warranty information function displayWarrantyInfo(data) { const warrantySection = document.getElementById(‘warranty-info’); warrantySection.innerHTML = ”; // Clear previous content
if (data && data.data.length > 0) { data.data.forEach(warranty => { let warrantyDetails = ` <p><strong>Product Name:</strong> ${warranty.Product_Name}</p> <p><strong>Warranty Start Date:</strong> ${warranty.Warranty_Start_Date}</p> <p><strong>Warranty End Date:</strong> ${warranty.Warranty_End_Date}</p> <p><strong>Serial Number:</strong> ${warranty.Serial_number}</p> <hr> `; warrantySection.innerHTML += warrantyDetails; }); } else { warrantySection.innerHTML = ‘<p>No warranty information found for this email.</p>’; } } |
Before implementing the code, ensure you have your Zoho Creator app API URL. Replace ‘YOUR_ZOHO_USERNAME’ with your Zoho username. Replace ‘YOUR_APP_NAME’ with your app name. Replace ‘All_Warranty_Details’ with the actual form name for warranty details.
Also, replace ‘YOUR_OAUTH_TOKEN’ with your actual OAuth token. We’ll provide guidance on obtaining these values later in the article.
After entering all the necessary details, save the edited project files. The widget is now ready for testing.
To start the server on your local machine, open PowerShell. Then, run ‘cd your_project_location’ to go to your project directory. Lastly, run ‘zet run’ command.
To test your extension, enable Developer Mode in Zoho Desk.
Before doing so, run the server and open ‘https://127.0.0.1:5000/plugin-manifest.json’ in Google Chrome. Then, click Advanced and click Proceed to Unsafe to access ‘widget.html’.
If you’re using Firefox, open ‘https://127.0.0.1:5000/plugin-manifest.json’ in a new tab. Click “Advanced,” then “Accept the Risk and Continue.””
If the “Proceed to Unsafe” option is missing, enable the ‘chrome://flags/#allow-insecure-localhost’ flag in Chrome. Then restart the browser.
Next, go to the Build Extensions page in Zoho Desk. Click Enable Developer Mode to refresh the page and activate Developer Mode.
Now, if you access a ticket in Zoho Desk and navigate to the Marketplace, you will see your widget.
Since our widget primarily uses JavaScript, it should work fine here; you can test and finalize its UI. After testing, finalize the widget.
Open PowerShell and run the ‘zet pack’ command. It will create a zip file of the widget’s source files. This step is crucial for publishing, as you must provide the widget’s source code in a zip file.
Finally, run the ‘zet validate’ command to validate all the widget source files.
4. PUBLISHING THE WIDGET
Now, upload your widget. After packaging your extension, it’s time to publish it.
Open Zoho Desk and navigate to Developer Space. Go to Build Extensions. Click on Sigma under Upload Your Extension.
Click on New Extension. Enter a name and description for your widget. Select Zoho Desk as the service. Upload the widget’s zip file from ‘C:\Users\your_user_name\widget_name\dist\widget_name.zip.’ Then, click Create.
After review, click Publish to make your widget live.
Click the Install URL link. Select the departments and profiles for the widget’s availability. Then, click Install to add the custom widget to Zoho Desk.
Go to the Tickets section in Zoho Desk to find your widget in Marketplace.
5. CONNECTING ZOHO CREATOR APP WITH ZOHO DESK WIDGET
To integrate Zoho Desk with Zoho Creator, use Zoho Creator’s REST API to fetch data. To obtain the necessary API URL for your Zoho Creator application:
- Find the owner name, app link, and report link in Zoho Creator. Your widget will use them to extract data.
- Open the application and the relevant form in Zoho Creator, where you can find these details in the URL.
Then construct the Zoho Creator API URL. The basic format of the Zoho Creator API URL is as follows:
https://creator.zoho.com/api/v2/{owner_name}/{app_link_name}/report/{report_link_name}
Replace the placeholders with your actual details:
- {owner_name}: Your Zoho Creator username or email address.
- {app_link_name}: The link name of your Zoho Creator application.
- {report_link_name}: The link name of the report you want to query.
To verify the URL, open it in a browser. Ensure it retrieves the data correctly by checking the file generated.
To retrieve specific data, such as warranty info from an email, add query parameters to the API URL like this:
https://creator.zoho.com/api/v2/john_doe/warranty_management/report/All_Warranty_Details?criteria=(Email == “example@example.com”)
Next, generate an OAuth access token for authenticating API requests. First, visit the Zoho Developer Console here: https://api-console.zoho.com/. Then, get your token.
Next, create a new client, e.g., select Self Client as the client type. Enter the required details and click Create to generate the client ID and client secret.
To generate an authorization code, go to the Zoho API Console and select Generate Code. Enter the required scopes, separated by commas (e.g., ‘ZohoCreator.report.READ’). Choose the validity period for the code, enter a description, and click Create.
The authorization code will then be generated and displayed in a pop-up.
After obtaining the code, use the following endpoint to exchange it for an access token:
Include the parameters client_id, client_secret, redirect_uri (optional), and code in your request.
Now, make a sample API call. Use Postman or any API testing tool to make a request using your API URL and OAuth token. Confirm that you receive the desired data.
After getting the access token, refresh token, and API URL, use JavaScript to fetch the data. Update the placeholders in the earlier code. Here’s a reminder of the code with the placeholders filled in:
| function fetchWarrantyInfo(email) { const apiUrl = `https://creator.zoho.com/api/v2/john_dou/warranty_management/report/All_Warranty_Details?criteria=(Email == “$example@example.com”)`;
fetch(apiUrl, { method: ‘GET’, headers: { ‘Authorization’: ‘Zoho-oauthtoken ‘ + ‘2inwubdyd4yryibfhfbdfb44i512bhweveg44ufvw4’, ‘Content-Type’: ‘application/json’, } }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(‘Error:’, error)); } |
Ensure placeholders are replaced with actual values and keep your OAuth tokens secure. This method enables effective integration between Zoho Desk and Zoho Creator.
Also, use the exact names of the data fields from the “Warranty Details” form in your JavaScript code.
6. TESTING AND VALIDATING THE WIDGET
After integrating the widget with Zoho Desk, it’s crucial to test the setup. This ensures it meets the intended use case and works as expected.
Navigate to the Tickets section in Zoho Desk, where the widget is installed. Open a ticket and check whether the widget loads properly.
Check that the widget fetches and shows data from Zoho Creator. It should use the contact email linked to the ticket.
7. CONCLUSION
If you follow the steps, you should have a working Zoho Desk widget. It will integrate seamlessly with Zoho Creator. This setup lets you access crucial data in Zoho Desk. It boosts workflow efficiency and the user experience.
