# Widget

## Create the file structure

Set up a directory structure with the following files

```
├── src
│   ├── static                    
│   │   ├── widget.css      
│   │   ├── widget.html 
│   │   ├── widget.js             
│   ├── view.xml
│   ├── view_widget.xml
│   ├── control.py
│   ├── function.py
│   ├── user_code.py  
├── LICENSE
├── README.md
├── manifest.toml
```

## widget.html, widget.css and widget.js scripts

Fill those files with the content that you require and according to the table below, then save them.

<table><thead><tr><th width="170">File</th><th width="587">Purpose</th></tr></thead><tbody><tr><td>widget.html</td><td>Define the Widget's components layout</td></tr><tr><td>widget.css</td><td>Define the Widget's components style</td></tr><tr><td>widget.js</td><td>Define the Widget's logic as well as dynamically modification of the Widget's style.</td></tr></tbody></table>

{% hint style="info" %}
Widgets execute in the user's web browser as client-side applications. Runtime selection only applies to server-side scripts `control`, `function`, and `user_code`
{% endhint %}

## view\.xml

For the moment given, this file is not fully implemented for Widget plugin, so it is not relevant at all for this plugin type, however it should contain dummy, albeit valid data so the plugin can be deployed, for this reason, you can use this view\.xml file on your Widget plugin development as dummy file:

```xml
<form name="formName">
    <group name="ubidotsInformation">
        <group name="fieldToken">
            <label name="labelToken">Ubidots Token</label>
            <token name="token" placeholder="Select Token"/>
        </group>
    </group>
</form>
```

## view\_widget.xml

Fill this file with the contents that you require to be displayed when the user is creating the widget in the dashboard.

## LICENSE and README.md

Write the contents of the README.md and LICENSE files.

## manifest.toml

Fill the contents of this file. According to the widget section within the Private Plugins page, the manifest.toml should look like:

```webmanifest
manifest_version = 2.0

[settings]
version = "1.1.1"
plugin_type = "widget_webhook"
license_name = "MIT license"
runtime = "python:3.11"
infrastructure = "aws"

[settings.webhook]
default_http_method = "POST"
allowed_http_methods =  ["POST"]

[settings.widget]
name = "Send data to device widget"

js_thirdparty_libraries = [
  "https://code.jquery.com/jquery-3.6.0.min.js",
  "https://code.jquery.com/moment-3.6.0.min.js"
]
css_thirdparty_libraries = [
  "https://code.jquery.com/jquery-3.6.0.min.css",
  "https://code.jquery.com/moment-3.6.0.min.css"
]
enable_lazy_load = true
```

## Compressing the files

Compress the files in zip format from the root of the file structure, not the parent folder.


---

# 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://dev.ubidots.com/plugins/plugins-development/widget.md?ask=<question>
```

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.