Screenshots

Request a Screenshot

// Get reference to your iframe element
const iframe = document.getElementById('bubblemap-iframe');

// Send screenshot request to the iframe
iframe.contentWindow.postMessage({
  type: "bubblemap_insightx_screenshot_request"
}, "*");

<iframe
  id="bubblemap-iframe"
  src="https://app.insightx.network/bubblemaps/{network}/{token_address}?embed_id=your_embed_id"
  allow="clipboard-write"
  width="100%"
  height="100%"
></iframe>

💡
Recommendation: Add an id to your iframe if you have multiple iframes on the page. This ensures postMessage targets the correct iframe instance. Use document.getElementById('bubblemap-iframe') to get a direct reference.

Response

Listen for the response:

// Add listener for messages from the iframe
window.addEventListener('message', (event) => {
  const response = event.data;
  
  // Verify this is a screenshot response from the InsightX iframe
  if (response.type === 'bubblemap_insightx_screenshot_response') {
    if (response.ok) {
      // Success - use the base64 data URL
      console.log('Screenshot captured:', response.dataUrl);
      // response.dataUrl is a base64 data URL (e.g., data:image/png;base64,...)
    } else {
      // Error - check the error message
      console.error('Screenshot failed:', response.error);
    }
  }
});

Response Fields

Field	Type	Description
`type`	`string`	Always `"bubblemap_insightx_screenshot_response"`
`ok`	`boolean`	`true` if screenshot was captured successfully, `false` if an error occurred
`dataUrl`	`string`	Base64-encoded PNG data URL. Only present when `ok` is `true`.
`error`	`string`	Error message describing the failure. Only present when `ok` is `false`.

Example: Capture and Download Screenshot

This example demonstrates the complete flow: listening for the response, displaying the screenshot, and triggering a download.

const iframe = document.getElementById('bubblemap-iframe');

// Set up listener before sending request
window.addEventListener('message', (event) => {
  const response = event.data;
  
  if (response.type === 'bubblemap_insightx_screenshot_response') {
    if (response.ok) {
      // Display the screenshot in an image element
      const bubblemapImg = document.createElement('img');
      bubblemapImg.src = response.dataUrl;
      document.body.appendChild(bubblemapImg);
      
      // Or download it
      const link = document.createElement('a');
      link.href = response.dataUrl;
      link.download = 'bubblemap-screenshot.png';
      link.click();
    } else {
      console.error('Failed to capture screenshot:', response.error);
    }
  }
});

// Send the screenshot request
iframe.contentWindow.postMessage({
  type: 'bubblemap_insightx_screenshot_request'
}, '*');

What's Next

Web Implementation

Learn how to embed InsightX Bubblemaps in your web application

Bubblemaps API

Access bubblemap data programmatically via REST API