1. Open the terminal.
2. Run the following command to create a new project:
   
   $ zet init
3. A list of Zoho Services will be displayed.
4. Select Zoho Creator as the required service.
   

   

5. Enter the Project Name. The sample project will be created in the respective folder directory.
6. Run the following command to open the project folder.
   
   $ cd {Project_name}

   

7. Open the app folder in your project folder. 
   

   
   

8. You can configure the manifest.json file for your widget by following the below steps:

1.  After creating a folder for the project, run the following command to open the project folder.
   $ cd {Project_name}Open the App folder in your project folder.

2. Find the plugin-manifest.json file in this folder.
   

3. Configure the file with a name field and type field for application components(application, forms, and reports) to be used in the widget.
   

9. Find the Widget.html file in the folder. Enter your code in the Widget.html file. The widget.html file contains the structure, design and components of the Widget. To use the Zoho Creator APIs in the widget, you can use the API helpers provided in the JS SDK Library.
   

   

10. Run the following command to validate your application:
    
    $ zet validate
11. This will validate your app package and identify any violations. They should be corrected before updating the zip in the developer console.
12. Run the following command to pack the project.
    
    $ zet pack

    

13. A zip file of the application will be created in the dist folder of your project directory.
    

    

14. Navigate to the Settings page of the app in which you need to embed your widget. Select Widgets.
15. Click Create button.
    

    

16. The New Widget pane will appear.
    

    

17. Enter a name for your Widget.
18. Choose Internal option in the Hosting drop down list.
19. Upload the packed zip file from the dist folder in the Widget File field.
20. Enter /widget.html in the Index File field. The /widget.html file is the index file i.e., this file will be incorporated as the widget in your page.
    Note:
1. The widget ZIP folder contains the widget.html file inside the App folder by default. 
   
2. If you've created another folder inside the App folder and moved the widget.html file inside the new folder, then you need to specify the index file name in the following format:
   /<folder-name>/<filename>.html
   
21. Click Create. The created widget is added to the Widgets page.
22. This widget will appear as a drag-and-drop element in Page builder for all the Pages present in the application.
    

The procedure given above pertains to the internal hosting of widgets (i.e.) the widgets are hosted within Creator. Alternatively the widgets can also be hosted externally and linked up with Creator.

The procedure for external hosting of widgets is as follows:

1. Go to the Application Settings page. Then click on Widgets option.
2. Now click on the New Widget button in the Widgets page. The New Widget pane will appear.
   

   

3. Enter a name for your Widget.
4. Choose External option in the Hosting drop down list.
5. Enter the Index page URL of the externally hosted widget in the Index File field.
   

   

6. Click Create. The created widget is added to the Widgets page.
7. This widget will appear as a drag-and-drop element in Page builder for all the Pages present in the application.
   

To know more about the list of components supported in the UI kit, click here.

Related Topics

• Understand widgets
• Install CLI
• Add widget to a page
• JS API documentation
• Sample widget