HomeStatusSign in ->

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

JavaScript
window.transactionlink

How to implement widget communication

To ensure the correct functioning of the widget:

  1. Define <transactionlink-widget /> element in the DOM.

  2. Define window.transactionlink_ready method. It is called when the widget and widget API are ready to use.

    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.

      // 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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verification</title>
  </head>
  <body>
    <div id="transactionlink-widget"/>

    <script>
        window.transactionlink_ready = () => {
            transactionlink.setOptions({ token })
            transactionlink.open()
        }
    </script>

    <script type="text/javascript" src="https://widget.transactionlink.io/transactionlink-widget.umd.js"></script>
  </body>
</html>

Advanced code example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Widget on Button Click</title>
</head>
<body>

<!-- Button to trigger the addition of the widget -->
<button id="open-widget">Open Widget</button>

<transactionlink-widget />

<script>
let transactionLinkReady = false

function openWidget() {
    if (!transactionLinkReady) {
        window.transactionlink_ready = () => {
            transactionLinkReady = true
            transactionlink.setOptions({ token })
            transactionlink.open()
        }

        const script = document.createElement('script');
        script.src = 'https://widget.transactionlink.io/transactionlink-widget.umd.js';
        document.head.appendChild(script);
    } else {
        transactionlink.setOptions({ token })
        transactionlink.open()
    }
}

// Get the button element
const addButton = document.getElementById('open-widget');

// Add a click event listener to the button
addButton.addEventListener('click', openWidget);
</script>

</body>
</html>

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:

PreviousProduction setupNextMethods

Last updated

Was this helpful?