## Zoho Invoice — Product, features, payments, integrations, solutions, and help Index

Access the complete documentation index at:
https://www.zoho.com/invoice/llms.txt

Use this file to discover all available documentation pages before proceeding.

# Framework and Hosting

 ![](/invoice/images/ue-resources/llm-utility-menu/sparkle-ai.svg) Explore With AI ![](/invoice/images/ue-resources/llm-utility-menu/dd-arrow.svg) 

*   [Open in ChatGPT (opens in new tab)](https://chatgpt.com/?prompt=Analyze+the+content+of+https%3A%2F%2Fwww.zoho.com%2Finvoice%2Fdeveloper%2Fwidgets%2Fframework-and-hosting.html+and+understand+it+thoroughly+so+I+can+ask+questions+about+it.)
*   [Open in Claude (opens in new tab)](https://claude.ai/new?q=Analyze+the+content+of+https%3A%2F%2Fwww.zoho.com%2Finvoice%2Fdeveloper%2Fwidgets%2Fframework-and-hosting.html+and+understand+it+thoroughly+so+I+can+ask+questions+about+it.)
*    ![Copy for LLM](/invoice/images/ue-resources/llm-utility-menu/copy.svg) Copy for LLM
*    [![View as Markdown](/invoice/images/ue-resources/llm-utility-menu/md.svg) View as Markdown (opens in new tab)](/invoice/developer/widgets/framework-and-hosting.md)

### Set up Framework

Zoho Invoice uses the ZET (Zoho Extension Toolkit) framework to build widgets. The ZET framework allows your widget to interact with Zoho Invoice 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:

```html
<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:

```js
 /*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:

```js
 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 Invoice’s server or on an external server. If you host it internally using the Zoho Invoice’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 Invoice 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.