> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/plugins/developing-plugins/developing-web-plugins.md).

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

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FalHV1a1LLBilhUSYN2Ky%2Ftelegram-cloud-photo-size-2-5316662066813188458-y.jpg?alt=media\&token=2ffc7ade-4bfc-4e9c-930c-b0b7dc706f99)

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.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FnFeOIRzTvCSjTVHnbu2v%2Fimage.png?alt=media\&token=bc884501-a83c-4068-b63c-9ed313d77492)

3\. Insert your plugin into your web page for debugging.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2F0yn5Nk2peArCkw6Cnajl%2Ftelegram-cloud-photo-size-2-5317003490943416561-y.jpg?alt=media\&token=aa17baa9-0a88-44b1-a451-c224f54e83ed)

### **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 = $('<div id="myDiv">loading...</div>');
  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.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FSbZ0uylx19qm8gMIEJba%2Fimage.png?alt=media\&token=5d1faf14-ddee-4003-87d8-5629eaf9565f)

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:

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FjcvqcojjTiNKwlPcn45y%2Fimage.png?alt=media\&token=0132ab26-40c2-4f81-a992-660f69d8b442)

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.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FYAhhALMqFdyn4FCcPty4%2Fimage.png?alt=media\&token=a2106c40-623e-4bf8-b2bc-268520475d40)

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.

![](https://3071851461-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M4Nnmtk9_gFGWOddsf6%2Fuploads%2FlIBvUkKnSH8S45Y3oZq4%2Fimage.png?alt=media\&token=4663245d-0f59-4b6c-bb01-4fd14d832f01)