Create widget by uploading file | Zoho Creator Help

Create widget by uploading file

This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version.
Before creating a widget, you need to have the Command Line Interface installed. Learn more

Note: For internal hosting, the maximum size of the widget ZIP file is 10 MB and the number of files inside the widget Zip file must not exceed 255.
In Creator, you can create a widget in two ways.
  1. Uploading your widget file
  2. Importing a Figma file 

Upload your widget file

  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. 


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

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

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

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

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

    9. The New Widget pane will appear.

    10. Enter a name for your Widget.
    11. Choose Internal option in the Hosting drop down list.
    12. Upload the packed zip file from the dist folder in the Widget File field.
    13. 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
    14. Click Create. The created widget is added to the Widgets page.
    15. This widget will appear as a drag-and-drop element in Page builder for all the Pages present in the application.
    External Hosting

    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.

    Importing a Figma file 

    You can convert your Figma design into a widget in Creator. To start with,  you need to access the Create Widgets from Figma UI Kit, read the instructions about using this kit, and then proceed to design your file in Figma. After the design has been finalized, copy and paste the frame URL and access token to generate widgets directly from the design in your Figma file. Learn how 
    To know more about the list of components supported in the UI kit, click here.

        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

                                                                                                                              • Import widget file from Figma

                                                                                                                                1. What Does This Page Cover? Learn how you can create widgets using your existing Figma design from Zoho Creator - Widgets Kit. This kit comes with comprehensive usage instructions and supported components for Creator widgets. Before you proceed to ...
                                                                                                                              • Create a widget from Figma

                                                                                                                                1. What Does This Page Cover? Learn how you can create widgets using your existing Figma design from Zoho Creator - Widgets Kit. This kit comes with comprehensive usage instructions and supported components for Creator widgets. Before you proceed to ...
                                                                                                                              • Understanding DS file

                                                                                                                                1. In a nutshell A Deluge Script (DS) file is a text-based file that stores the complete schema of a Zoho Creator application in the Deluge script format. It includes all components, such as forms, fields, reports, pages, schedules, custom functions, ...
                                                                                                                              • Sample widget

                                                                                                                                This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. Sample Widget: Playground We shall learn to add a sample widget into your Creator application. The procedure is as follows: ...
                                                                                                                              • Create an application for solution

                                                                                                                                Zoho Creator enables you to create an app solution based on your business requirement. You can create an application to run your business in a streamlined manner with the capabilities that Creator has to offer. An application helps you solve problems ...
                                                                                                                                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