Building a Ytel Connected App with Custom Button and Web Tab Widgets

Building a Ytel Connected App with Custom Button and Web Tab Widgets

A Ytel extension with Zoho CRM allows a CRM user to,

  1. Send an SMS to a contact or list of contacts using Custom Button.
  2. Create SMS templates.
  3. Retrieve authentication details, add balance amount, edit phone numbers, and purchase new numbers through web tabs.
  4. 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.

  1. Create and Authenticate an Extension
  2. Set Up a Connected App
  3. Create Customized Components
    1. Custom Buttons
    2. Custom Modules and Fields
    3. Web Tab Widget
  4. 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,
  1. ZOHO.embeddedApp.on("PageLoad",function(data){
  2.         console.log("Page Loaded with data");
  3.         console.log(data);
  4. })

The code to initialize SDK is,
  1. ZOHO.embeddedApp.init()

The code to invoke an API is
  1. ZOHO.CRM.API.getRecord({
  2. console.log(data);
  3. });

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,
  1. Log in to Zoho Developer Console and create a ytel extension.
  2. Select Custom Properties on the left pane and setup the custom variables.


Set up a Connected App

  1. Click Connected Apps on the left pane of the Extension details page.
  2. In the Connected Apps page, enter the necessary information.
    1. Connected App Name : Ytel
    2. Description : A short description about the connected app.
    3. Choose Hosting : select External Hosting.
    4. Specify Base URL : https://localhost:8081/ (Sand Box), https://example.com/ (Production)
  3. Click Save.


Create Customized Components

To create custom buttons

  1. Click Components on the left pane of Zoho Developer Console
  2. Select Links & Buttons.
  3. Create custom Send SMS buttons in the List View page and View page (Details page) of the Contacts module.
  4. What action would you like the button to perform : Select Invoke a Widget.
  5. Enter the SandBox URL : /html/SendSMS.html
  6. Click Save. Now you can view the custom buttons you've created.


To create custom modules and fields

  1. Click Modules on the left pane of the Zoho Developer Console, and select Modules tab.
  2. Create two custom modules SMSTemplates and Ytel SMS History as shown below


  3. Create the fields structure for the SMSTemplates module along with one custom field named Template Content.
  4. Create the Fields structure for Ytel SMS History module with 5 custom fields,
    1. Contact Name : Look up
    2. Message Sent : Multi Line (Small)
    3. Sent From : Single Line
    4. Status : Single Line
    5. Template Used : Look Up 



For details of how to add custom fields, refer to this page.

To create a web tab widget

  1. Click Modules on the left pane of the Zoho Developer Console, and select Web Tabs.
  2. Click Create Web Tab, and enter the following information,
    1. Tab Name : Ytel
    2. Type : Widget
    3. SandBox URL : /html/SetupMsg360.html
  3. Click Save


  4. Click Connected Apps on the left pane of the Console, and view the widgets you've created for this extension. 

Test an Application

  1. Test the Application by clicking the Test your Extension button located in the top right corner of your Zoho Developer Console.
  2. Ensure that the custom button widgets, web tab and the custom modules work as intended.














      Create. Review. Publish.

      Write, edit, collaborate on, and publish documents to different content management platforms.

      Get Started Now


        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







                              Quick LinksWorkflow AutomationData Collection
                              Web FormsRetailOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceForms for Solopreneurs
                              Digital FormsMarketingForms for Small Business
                              HTML FormsEducationForms for Enterprise
                              Contact FormsE-commerceForms for any business
                              Lead Generation FormsHealthcareForms for Startups
                              Wordpress FormsCustomer onboardingForms for Small Business
                              No Code FormsConstructionRSVP tool for holidays
                              Free FormsTravelFeatures for Order Forms
                              Prefill FormsNon-Profit
                              Forms for Government
                              Intake FormsLegal
                              Mobile App
                              Form DesignerHR
                              Mobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic FormsInsurance
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsWufoo alternativeEncrypted Forms
                              Accessible FormsTypeform alternativeSecure Forms

                              WCAG

                                          Create. Review. Publish.

                                          Write, edit, collaborate on, and publish documents to different content management platforms.

                                          Get Started Now






                                                            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

                                                                  Use cases

                                                                  Make the most of Zoho Desk with the use cases.

                                                                   
                                                                    

                                                                  eBooks

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

                                                                   
                                                                    

                                                                  Videos

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

                                                                   
                                                                    

                                                                  Webinar

                                                                  Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                                                   
                                                                    
                                                                  • Desk Community Learning Series


                                                                  • Meetups


                                                                  • Ask the Experts


                                                                  • Kbase


                                                                  • Resources


                                                                  • Glossary


                                                                  • Desk Marketplace


                                                                  • MVP Corner



                                                                    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 Demo

                                                                                                      Get a personalized demo or POC

                                                                                                      REGISTER NOW


                                                                                                        Design. Discuss. Deliver.

                                                                                                        Create visually engaging stories with Zoho Show.

                                                                                                        Get Started Now









                                                                                                                            • 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 ...
                                                                                                                              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