# Getting started Follow these steps to create a Singular widget: 1. [Download the widget boilerplate](#download-the-app-boilerplate) 2. [Create a widget in your Singular account](#creating-an-app-template-in-your-account) 3. [Deploy your widget code](#deploying-an-app) 4. [Test and debug your widget](#testing-and-debugging-an-app) 5. [Publish your widget](#publishing-an-app) 6. Share your widget ### 1. Download the widget boilerplate Open a console and enter following commands: ```bash C:\Users\tm\Singular Widgets>singular createwidget myWidget Singular Widget – myWidget has been created C:\Users\tm\Singular Widgets>dir /S /B C:\Users\tm\Singular Widgets\myWidget C:\Users\tm\Singular Widgets\myWidget\deploykey.json C:\Users\tm\Singular Widgets\myWidget\source C:\Users\tm\Singular Widgets\myWidget\source\icon.png C:\Users\tm\Singular Widgets\myWidget\source\output.html ``` This set of commands creates a folder called **myWidget** on your local disk and clones the widget boilerplate into it. We recommend adding this folder to your source code management tool. **Description of default files**
FileDescription
deploykey.jsonA file containing the widget deploy key.
source\output.htmlThe widget's source code.
source\icon.pngThe widget icon in the .png format.
#### output.html boiler plate ```html
``` ### 2. Create a widget template in your Singular account #### 1. Log into Singular.live and check your permissions To create a Singular.live widget, you need an account that has developer permissions. Check your permissions by navigating to the Singular Dashboard, selecting the **User Menu** > **Settings,** and checking your **User Settings**. **User Administration** and **Developer Tools** should be switched on.

Checking your account's developer permissions

#### 2. Create a new widget Also on the Singular Dashboard: 1\. Select the **User Menu** > **Widget Manager,** and then **New Widget** to create a new widget.

Creating a new widget

2\. Enter a name and category for your widget. The widget name doesn't need to match the name of the folder used in the `singular createwidget` command in [step one](#download-the-app-boilerplate). Nevertheless, we recommend using the same name. ### 3. Deploy your widget code Continuing in the Widget Manager: 1\. Copy the **Deploy Key** from the Widget Details and paste it into the `deploykey.json` file from [step one](#download-the-app-boilerplate).

Copying the deploy key

The file should look like this: {% code title="deploykey.json" %} ```javascript { "deploykey": "uS3bDUabcDnYlAZMO87OL2nBckvSIdmE" } ``` {% endcode %} 2\. Upload the widget code to Singular using following command in the Node.js console: ```log C:\Users\tm\Singular Widgets> singular deploywidget myWidget ----------------------------------------------- Singular.Live widget deploy Validating files in directory "source" Creating zip file Deploying widget to Singular.Live Widget ID: 4215 successfully deployed C:\Users\tm\Singular Widgets> ``` The deploy script will read the deploy.json file, extract the deploy key, create a zip-file of the widget sources, and upload it to the Singular.live Cloud. Your widget then will be visible in the **Widget Browser** when you create a new widget instance. {% hint style="info" %} Activate the `Show Dev Versions` checkbox in the **Widget Browser** to access the development version of your widget. {% endhint %} The status of the `Development` version of your widget gets updated every time you deploy new sources for your widget. Refresh the **Widget Manager** and select your widget to see to see its updated status. ### 4. Define your widget UI Define the widget UI in the **UI Definition** field.

Copy your widget UI definition

### 5. Test and debug your widget Before you publish your widget, use Chrome's developer tools to debug and optimize it. ### 6. Publish your widget When you're done testing your widget, use the `publish` function to make it available for other users. The `publish` function creates an identical copy of the development version of your widget and tags it as `published`. When you do this, the development version gets increased by one. Widgets never get deleted from the Singular.live platform. They are always in one of the following states: * **development**: Every new widget defaults to the `development` status. Widgets under development and can only be accessed by users with development permissions. Once your widget has been fully developed and tested, you can `publish` it to make it available to other users. Widgets with `development` status can be `published`. * **published**: A published widget is available to all members of your account. Only one `published` version of a widget can exist at the same time. By default, the latest published version will be used when creating an instance of a widget. Widgets with `published` status can be `un-published`. * **archived**: Widgets automatically get archived when a new version is published. Existing widget instances that use an older widget version will stay on the older version. A standard user can manually update the widget in the widget instance by selecting the **Update** button. Users with developer permissions can also use any archived version of an widget. Widgets with `archived` status can be `published` and `depreciated`. * **depreciated**: Set a widget to `depreciated` status when you want or need to force a widget instance to upgrade to the latest published version of an widget. A widget with `depreciated` status can be `archived`. #### Overview of widget statuses | Status | Action | New status | | :---------: | :--------: | :---------: | | development | Publish | Published | | published | Un-publish | Archived | | archived | Publish | Published | | | Depreciate | Depreciated | | depreciated | Archive | Archived | ### 7. Share your widget (optional) If you'd like to share your widget with another Singular user, enter their Singular account name in the **Share with** field in the Widget Manager.

Sharing a widget

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://developer.singular.live/software-development-kits/widget-sdk/getting-started.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.