# Developing Web-plugins
### Field description
| Field | Description |
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| Parameters/**JS libraries** | This is the URL to a JavaScript file that is loaded on your page. For example, jQuery library, graph library, and others. |
| General/**shared parameters** | These parameters are available in scripts and are filled in only during plugin installation. |
| Web-components/step/**Initialize** | Initialize script: This code runs with the first page load. You can create or modify the DOM, display loading messages, and more. |
| Web-components/step/**Update** | Update script: This script runs when all data is loaded, and the DOM is fully rendered. |
| | |
## Creating a 'Hello World' Plugin
### **Preparation**
1. Add the plugin to your application. To do this, go to the "Status and Actions" section and enter your app's system name into the form.
The image above is an example: I added my application 'evp,' and now I can see my plugin in my app!
2\. Install your plugin in your app.
3\. Insert your plugin into your web page for debugging.
### **Writing Your First Plugin**
Now you are ready to write your first plugin:
Insert the following code to initialize the block:
```javascript
function(instance, context) {
div = $('loading...
');
div.css('width', '300px');
div.css('height', '300px');
div.css('background', 'red');
div.css('color', '#FFF');
instance.canvas.append(div);
}
```
After refreshing the page, you should see the following result.
Insert the following code into the update section:
```javascript
function(instance, properties, context) {
var ctx = $("#myDiv")
// or you could call native: document.getElementById('myDiv');
// or you call instance.canvas.text("test")
ctx.text("test")
}
```
Now, take a look at the image:
You can run any JavaScript code in the update section, and you also have access to variables and parameters. For example, if you have a component parameter named "test" and you've set its value as "World," you can access and use it within your JavaScript code in the update section.
and if you change the script:
```javascript
function(instance, properties, context) {
var ctx = $("#myDiv")
// or you could call native: document.getElementById('myDiv');
// or you call instance.canvas.text("test")
ctx.text(context.name)
}
```
you will see parameter on the page.
---
# 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://readme.directual.com/plugins/developing-plugins/developing-web-plugins.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.