Getting Started with Connected Apps
A Connected App is an application that is integrated with Zoho CRM via API's. Zoho provides standard SAML and OAuth protocols to support Single Sign-on, a controlled data and meta access permissions to Connected Apps.
Building your own connected app
We are introducing the process of developing and embedding your own connected app as simple as it could get. Initially ,let’s see what Connected Apps are ,and how they work, then we'll dive into how to code them.
Connected App Overview
Connected App allows you to extend the functionalities of Zoho CRM and provide contextual information along with your CRM data. The key features of the connected App include,
- View a pending support ticket of a contact in a Related List.
- Gain insight on your prospect's personal and business connections,right besides your record view.
- Enrich your contact information using any third party market intelligence service.
- Link your own in house file hosting service and replace the default attachment support provided in Zoho CRM completely.
HelloWorld Sample Widget
The source code for a simple “helloworld” widget is available here.
The “HelloWorld” application consist of the following files,
Main UI Layer of the widget.
Style sheet for the html.
Business logic is defined inside the custom.js that tells how the app behaves to events happening inside zoho CRM.
Let’s dive in and take a look at the detailed description of these files.
Main user interface of the app where SDK library, custom js and style sheets are included.
Custom style sheet for the app is defined here.
This is the user-defined script file where the app's business logic is defined and the SDK is initialized along with event listeners.
It's the java script SDK that allows you to control zoho CRM’s UI and manipulate data on the current user’s context. You can find the latest version of our SDK here.
"HelloWorld" application returns the User information and Record information of a particular lead record in Zoho CRM as the API response.The output is rendered in a Related List widget.
Register the Event Listeners
And in some cases where contextual data should be passed 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 code for event listeners for the "HelloWorld" application is,
console.log("Page Loaded with data");
The code to initialize SDK is,
The code to invoke an API is
Some of the fully functioning widgets are also available in our github page.
Configure your first widget
As discussed in the beginning, custom built applications can be integrated with ZohoCRM through connected apps. Widget is a type of Connected App that is integrated with CRM’s UI contextually.
To configure a widget in your extension, you need to create a connected app. The following steps will guide you through the process in detail.
- Log in to developer.zoho.com which is the Zoho CRM’s developer console.
- Navigate to an existing extension or create a new one,inside which you wish to configure your first widget.
- Click Connected Apps tab from the left pane, that will open up a new form.
- Provide a name and description of the Connected App.
- In the development phase, make use of our zoho cli to start a local HTTP Server that allows to run your app locally and test it in our extension's sandbox.
- These static contents can either be hosted internally within zoho or with any external hosting provider for Production.Choose the appropriate hosting type accordingly.
- To package the app for production, make use of the package command provided in the cli, which will create a zip of all the files inside the apps folder.
- Incase of internal hosting, this package is required to be uploaded under the connected app configuration page before publishing your extension.
Select the "Choose Hosting" to be Internal and upload the "helloword.zip" as discussed in step 8 of the previous secion.
Widgets are supported across a wide range of ZohoCRM components such as RelatedList, WebTab, Custom Button, Telephony dialer, and Extension Settings page etc,. Detailed explanation of all types widgets and their configuration procedures are provided in Widgets support in Zoho CRM.
A Sample Widget
This part explains the creation of a Sample Related List Widget in the Lead's Module.
The steps to create a demo widget are,
- Click Customize in your Zoho Developer Console.
- Select Related Details and click Add Widget.
- Provide a resource path for the widget. Resource path is the relative path to the main view page of your widget. In this case,it is “html/main.html”.
- If the App is hosted internally, the Widget is created and associated with the Connected App as shown below,
- Upon creating the related list widget successfully, click Test your Extension in the top right corner of your console.
- Open an existing record under the Leads module and scroll down to view the Related List that is created recently.
- Refer to Widgets support in Zoho CRM to learn about the features that support embedding widgets in Zoho CRM.
- To get started, see Building your First Connected App and learn how to build a client side app from scratch.
- To build your first server-side app, see Building a server-side app.
- Refer to Embedded App JS SDK here.
- Refer to the Embeddedd App JS API s here.