Framework and Hosting

Set up Framework

Zoho Billing uses the ZET (Zoho Extension Toolkit) framework to build widgets. The ZET framework allows your widget to interact with Zoho Billing using supported JS SDK (Java Script Software Development Kit) APIs. To facilitate this interaction, use the following script to import the framework’s java script file:

<script src="https://js.zohostatic.com/zohofinance/v1/zf_sdk.js">

Once the java script is imported, the global object ZFAPPS will be available in the framework. You can create a client object to communicate with the product using the below function:

 /* Initialization */
ZFAPPS.extension.init().then(() => {
/* Once initialized, you can use ZFAPPS SDK's all APIs */
/* You don't need to initialize every time to access its APIs. It's a one time initialization */
});

Example:

 ZFAPPS.extension.init().then(() => {
    ZFAPPS.get('user.name').then(function (data) {
    //response Handling
    }).catch(function (err) {
        //error Handling
    });

    /* Below is an example to get the current organization's name */
    ZFAPPS.get('organization.org_name').then(function (data) {
    //response Handling
    }).catch(function (err) {
        //error Handling
    });  
});

Next, you’ll have to install node JS and ZET CLI (Command Line Interface) to set up a run time environment for building the widget. This will help you in streamlining the development process.

Internal and External Hosting

You can host widgets internally on the Zoho Billing’s server or on an external server. If you host it internally using the Zoho Billing’s server, you can build your widgets using client-side technologies such as HTML, CSS, JS, and so on. These widgets will be rendered in Zoho Billing using iframes.

However, if you want to host the widget on an external server, you will have to use server-side technology to achieve this.

When you mention the widget URL in the plugin-manifest.json file, widgets that are hosted internally are configured with a relative URL {/${file_path}}, whereas widgets that are hosted externally use an absolute URL {https://${yourdomain}/${file_path}} to which the widget will redirect.

Was this document helpful?

Yes

No

Let us know where we can improve

We can wait. Take your time to draft us your question.

Umm.. where do we send the response?

By clicking Submit, you agree to our Privacy Policy.

Submit Cancel

Thank you for your feedback!