Supersimple

Appearance

Embedding Explorations ​

You can embed Supersimple explorations directly into your own applications, internal tools, or backoffice systems using iframes. This allows your team to view live data without leaving their existing workflows.

Basic Embedding ​

To embed an exploration, add ?embed=true to any exploration URL and load it in an iframe:

html
<iframe
  src="https://app.supersimple.io/your-account/explore/exploration-id?embed=true"
  width="100%"
  height="800"
  frameborder="0"
  allowfullscreen
></iframe>

When embed mode is enabled:

  • The sidebar and navigation are hidden
  • Block editing controls are hidden
  • The view is optimized for read-only consumption
  • Users can still interact with filters and visualizations

Passing Variables via URL ​

If your exploration uses variables (e.g., a "Country" filter), you can pre-set their values via the URL. This is useful for dynamically filtering data based on context in your application.

Variables are passed in the URL hash using the params key. The value must be JSON-encoded and compressed using lz-string.

URL Format ​

https://app.supersimple.io/{account}/explore/{explorationId}?embed=true#params={compressed-json}

Encoding Parameters ​

Use the lz-string library to encode your parameters:

javascript
import lzstring from 'lz-string';

// Create an object where keys are variable names (must match exactly)
const params = {
  'Country filter': 'United Kingdom'
};

// Compress and encode for URL
const encoded = lzstring.compressToEncodedURIComponent(JSON.stringify(params));

// Build the full URL
const embedUrl = `https://app.supersimple.io/acme/explore/abc123?embed=true#params=${encoded}`;

Complete Example ​

Here's a complete example embedding an exploration with a country filter:

html
<!DOCTYPE html>
<html>
<head>
  <title>Sales Dashboard</title>
  <script src="https://cdn.jsdelivr.net/npm/lz-string@1.5.0/libs/lz-string.min.js"></script>
  <style>
    .embed-container {
      max-width: 1400px;
      margin: 0 auto;
    }
    iframe {
      width: 100%;
      height: 800px;
      border: none;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="embed-container">
    <iframe id="supersimple-embed" allowfullscreen></iframe>
  </div>

  <script>
    const accountSlug = 'your-account';
    const explorationId = 'your-exploration-id';

    // Set variable values dynamically
    const params = {
      'Country': 'United Kingdom'
    };

    const encoded = LZString.compressToEncodedURIComponent(JSON.stringify(params));
    const embedUrl = `https://app.supersimple.io/${accountSlug}/explore/${explorationId}?embed=true#params=${encoded}`;

    document.getElementById('supersimple-embed').src = embedUrl;
  </script>
</body>
</html>

Authentication ​

Embedded explorations require users to be authenticated with Supersimple. Users viewing the embed must:

  1. Have a Supersimple account with access to your workspace
  2. Be logged in (or will be redirected to log in)

TIP

For public or unauthenticated embedding, contact us about our enterprise embedding options.

Style customization ​

Custom styling options for embedded explorations – such as matching your brand colors, fonts, or hiding specific UI elements – are available for enterprise customers. Contact support or your account manager to learn more.