iFrame Integration

Introduction

iFrame integration allows you to embed the Innerworks SDK in your application without modifying your existing codebase significantly. It provides a simple way to start collecting data and detecting VPNs and fingerprinting without deep integration.

This guide will walk you through the steps to set up iFrame integration, including importing the iFrame, sending data, and handling responses.

iFrame Integration

Importing and Sending Data

To collect start sending data to Innerworks, simply import the iFrame into your page as shown.

<iframe
  id="innerworks_sdk"
  src="https://sdk.prod.innerworks.me?projectId=project_id"
  style="display: none;"
></iframe>

Adding a socialID

We use a socialID to associate data with a user on your platform. This is typically a UUID that you have access too. Examples include Web3 Wallet Addresses, Email Addresses and Usernames.

To add a socialID, include it in the src as shown below.

<iframe
  id="innerworks_sdk"
  style="display: none;"
  src=""
></iframe>

// Configure iframe when user ID is available
const iframe = document.getElementById("innerworks_sdk");
if (iframe instanceof HTMLIFrameElement) {
  iframe.src = "https://sdk.prod.innerworks.me?projectId=project_id&social_id=social_id";
}

Note

If you see console errors relating to content security policies, you should ensure 'https://sdk.prod.innerworks.me' is added to your CSP

Getting a Response

To initialise getting responses..

// script.js
function iframeCallback(response) {
  // Include logic here to indicate the page is now free to be
  // destroyed. We also recommend including a timeout in case the
  // callback fails to be sent for some reason or takes too long.


}
    
window.addEventListener("message", (event) => {
  const response = event.data;

  if (
    response
    && response.source === "innerworks"
    && response.data.result
  ) {
    iframeCallback(response.data);
  }
});

Again, only live responses...

Fingerprinting

function iframeCallback(response) {
  //... rest of code

  // Get request ID for fingerprint
  const requestId = response.requestId;
  console.log('Fingerprint request ID:', requestId);
}

VPN Detection

function iframeCallback(response) {
  //... rest of code

  // Decode JWT for VPN detection
  const jwt = response.detectionResultJwt;
  const [headerB64, payloadB64, signature] = jwt.split('.');

  // Decode payload
  const payload = JSON.parse(atob(payloadB64));
  const vpnIsEnabled = payload.detectionResult.vpn.vpnIsEnabled;
  console.log('VPN detection result:', vpnIsEnabled);
}