# 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:
```
---
# 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://docs.transactionlink.io/docs/v1/js-api.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.