Building a Ytel Connected App with Custom Button and Web Tab Widgets
A Ytel extension with Zoho CRM allows a CRM user to,
- Send an SMS to a contact or list of contacts using Custom Button.
- Create SMS templates.
- Retrieve authentication details, add balance amount, edit phone numbers, and purchase new numbers through web tabs.
- Create a message history through an SMS History custom module.
This guide helps a developer create a Connected App with widgets to implement Ytel features with Zoho CRM.
- Create and Authenticate an Extension
- Set Up a Connected App
- Create Customized Components
- Custom Buttons
- Custom Modules and Fields
- Web Tab Widget
- Test an Application
Import the Zoho JS SDK
To import Zoho JS SDK, please visit this link, download and extract it to your path.
Register the Event Listener
To pass the contextual data to the connected app, you need to register for the appropriate events. Registering an event means defining a function that will be executed when certain event is triggered by your application.The event here is
Page Load - Triggered whenever an entity page(Detail Page) is loaded.
The code for event listener for the "Ytel" application is,
- ZOHO.embeddedApp.on("PageLoad",function(data){
- console.log("Page Loaded with data");
- console.log(data);
- })
The code to initialize SDK is,
- ZOHO.embeddedApp.init()
The code to invoke an API is
- ZOHO.CRM.API.getRecord({
- console.log(data);
- });
Create and Authenticate an Extension
This extension with Zoho CRM is authenticated using custom variables. Click here to find out how to obtain the Account SID and Authtoken.
To create an extension,
- Log in to Zoho Developer Console and create a ytel extension.
- Select Custom Properties on the left pane and setup the custom variables.
Set up a Connected App
- Click Connected Apps on the left pane of the Extension details page.
- In the Connected Apps page, enter the necessary information.
- Connected App Name : Ytel
- Description : A short description about the connected app.
- Choose Hosting : select External Hosting.
- Specify Base URL : https://localhost:8081/ (Sand Box), https://example.com/ (Production)
- Click Save.
Create Customized Components
To create custom buttons
- Click Components on the left pane of Zoho Developer Console
- Select Links & Buttons.
- Create custom Send SMS buttons in the List View page and View page (Details page) of the Contacts module.
- What action would you like the button to perform : Select Invoke a Widget.
- Enter the SandBox URL : /html/SendSMS.html
- Click Save. Now you can view the custom buttons you've created.
To create custom modules and fields
- Click Modules on the left pane of the Zoho Developer Console, and select Modules tab.
- Create two custom modules SMSTemplates and Ytel SMS History as shown below
- Create the fields structure for the SMSTemplates module along with one custom field named Template Content.
- Create the Fields structure for Ytel SMS History module with 5 custom fields,
- Contact Name : Look up
- Message Sent : Multi Line (Small)
- Sent From : Single Line
- Status : Single Line
- Template Used : Look Up
For details of how to add custom fields, refer to this page.
To create a web tab widget
- Click Modules on the left pane of the Zoho Developer Console, and select Web Tabs.
- Click Create Web Tab, and enter the following information,
- Tab Name : Ytel
- Type : Widget
- SandBox URL : /html/SetupMsg360.html
- Click Save.
- Click Connected Apps on the left pane of the Console, and view the widgets you've created for this extension.
Test an Application
- Test the Application by clicking the Test your Extension button located in the top right corner of your Zoho Developer Console.
- Ensure that the custom button widgets, web tab and the custom modules work as intended.
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 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 Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
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.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Building a Client Side Application
This guide will help you with the following: Create a Connected App Internal Hosting External Hosting Create the "Helloworld" Widget Setup the files structure for "HelloWorld" Widget Register the Event Listeners This guide will furnish you with ...Building a Real Estate CRM
Zoho Developer Console allows developers to transform your CRM into an industry specific CRM solution. A real estate CRM needs to manage comprehensive and comparative details about properties, offer ease in handling Buyer and Client data and provide ...Building a Twilio Extension
Twilio is a cloud communication platform that allows developers to integrate their application programmatically to make and receive voice calls and text messages using its Web service API. The following core topics will assist developers in ...Setting up Connected Apps
Creating a Connected App To create a connected app In the Zoho Developer console homepage, click Extensions for Zoho CRM. Click Edit below the extension for which your app will be created. Click Connected App in the left pane of the Extension ...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 ...
New to Zoho LandingPage?
Zoho LandingPage Resources