Documentation
HomeSupportStatusSign in ->
  • Developer guide
  • How it works?
  • Integration Quick Guide
    • Link Flow
    • Embedded Flow
    • Running Workflow
  • Production setup
  • Webhooks
  • Widget
    • Methods
    • Inline mode
  • Postman Collection
  • Changelog
  • Records
    • Introduction
    • Migration Guide: Migrating from Cases to Records
  • TRANSACTIONLINK API
    • API Reference
      • Authentication
      • Cases (deprecated)
      • Resources
      • Parameters
      • Token
      • Link
      • Workflows
      • Records
        • Attachments
    • API Changelog
    • API Versioning
  • Integrations
    • AIS
      • Data fields availability across banks
      • Testing data
    • Autopay
    • BIG Info Monitor
      • Company Report
      • Personal Report
      • Entrepreneur Report
      • Plus Sco Plus CR3 Report
    • BankID
      • 🇳🇴Norway
      • 🇩🇰Denmark
    • CEIDG
      • Get company
      • List companies
    • Companies House
      • Public Data Api
        • Exemptions
        • Persons with significant Control
        • UK Establishments
        • Filing History
        • Registers
        • Registered Office Address
        • Company Profile
        • Officers
        • Insolvency
        • Charges
      • Documents Api
    • ComplyAdvantage
    • ComplyCube
      • Identity Verification
        • Document Check
        • Proof of Address Check
        • Identity Check
      • Document Check
      • AML Screening Check
      • Face Authentication Check
    • Data Ninja
      • Labeling
      • Profiling
      • Scoring
    • eDO App
    • GUS
    • IAML
    • KRD
      • Company Report
      • Personal Report
      • Identity Card Verification
    • mObywatel
      • CitizenDetails
      • CitizenNationality
    • OnDato
    • Polish VAT Whitelist
    • Przelewy 24
    • PWG
    • QARD
    • Rejestr.io
    • Registru Centras
      • Get company
      • List documents
      • Get document
    • Smart-ID
    • SMS API
    • Twilio
    • MojeId
    • Veriff
      • Supported Browsers
    • VIES (Vat Validation)
      • vies
    • Zoho Sign
      • Adding document fields automatically using text tags
    • Idenfy
    • GBG
      • IDScan
      • Verifications
    • Visa
    • KYB
      • Company Profile
    • Handelsregister
      • Company profile
        • List companies
        • Get company
        • Get company documents
    • InfoCamere
      • Company profile
        • List companies
        • List persons
        • Get company
        • Get person
        • Get documents
    • CBE - Belgium Company Register
      • Company profile
        • List companies
        • Get company
        • List documents
        • Get document
    • Transparenzregister
      • Beneficial owners
        • List companies
        • List documents
        • Get documents
    • CVR (Danish Central Business Register)
      • Company profile
        • List Companies
        • Get Company
        • Get document
    • Malta Business Registry
      • Company profile
        • List Companies
        • Get Company
Powered by GitBook
On this page
  • How to communicate with widget?
  • How to implement widget communication
  • Content Security Policy

Was this helpful?

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:

PreviousWebhooksNextMethods

Last updated 1 year ago

Was this helpful?