> For the complete documentation index, see [llms.txt](https://docs.transactionlink.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.transactionlink.io/docs/v1/js-api.md).
# Widget
## How to communicate with widget?
You can interact with our widget using java script api in real-time, without the need to develop complex backend integration.
TransactionLink's JS API is available in a global variable named
{% code title="JavaScript" overflow="wrap" lineNumbers="true" %}
```javascript
window.transactionlink
```
{% endcode %}
### How to implement widget communication
To ensure the correct functioning of the widget:
1. Define `` element in the DOM.
2. Define `window.transactionlink_ready` method. It is called when the widget and widget API are ready to use.
```javascript
window.transactionlink_ready = () => {
transactionlink.setOptions({ token })
transactionlink.open()
}
```
3. Link `https://widget.transactionlink.io/transactionlink-widget.umd.js` to the file:
* It should be located at the end of the file
* Or added dynamically after completing points 1 and 2.
```javascript
// Create a script element
const script = document.createElement('script');
// Set the source attribute to the URL of the script
script.src = 'https://widget.transactionlink.io/transactionlink-widget.umd.js';
// Append the script element to the document's head
document.head.appendChild(script);
```
#### Simple code example:
```html
Verification
```
#### Advanced code example:
```html
Add Widget on Button Click
```
## Content Security Policy
To enhance security, include the following Content Security Policy (CSP) directive headers in the `index.html` file, within the tag:
```
Content-Security-Policy default-src 'self' *.transactionlink.io;
connect-src 'self' *.transactionlink.io wss://*.transactionlink.io *.sentry.io;
script-src 'self' *.transactionlink.io;
img-src blob: 'self' *.transactionlink.io data:;
frame-src 'self' *.transactionlink.io;
style-src 'self' *.transactionlink.io fonts.googleapis.com;
font-src 'self' *.transactionlink.io fonts.gstatic.com data:
```