Embed the wall.
Make it yours.

Install on your website

1. Open the theme editor, choose your colors and layout, and copy the embed code.
2. Paste it into a custom HTML or embed block in your website builder.
3. Publish your page. Profile updates appear automatically.

<script async
  src="https://streamerstatistics.com/embed.js"
  data-creator-wall
  data-src="https://streamerstatistics.com/embed?limit=9&columns=3"></script>

The script creates an iframe and adjusts its height for the content and screen size. Multiple walls can appear on the same page.

If your website removes script tags

<iframe
  src="https://streamerstatistics.com/embed?theme=light&limit=9"
  title="Community creators" width="100%" height="1800"
  loading="lazy" style="border:0;border-radius:12px"
  referrerpolicy="strict-origin-when-cross-origin"></iframe>

Adjust the fixed height in your website editor. A plain iframe uses the theme settings in its URL. Use the auto sizing script for host CSS variables and the JavaScript API.

Use your website's theme

Put CSS variables on the script or its surrounding element. Each wall inherits its own wrapper's settings. Use --creatorwall- followed by the setting name in kebab-case: supportBackground becomes --creatorwall-support-background.

<style>
  .community-wall {
    --brand-primary: #9144ff;
    --creatorwall-background: transparent;
    --creatorwall-surface: #ffffff;
    --creatorwall-text: #182030;
    --creatorwall-support-background: var(--brand-primary);
    --creatorwall-support-text: white;
    --creatorwall-support-hover-background: rgb(96, 38, 200);
    --creatorwall-youtube-background: #ff0033;
    --creatorwall-card-radius: 16px;
  }
  [data-site-theme="dark"] .community-wall {
    --creatorwall-surface: #20212a;
    --creatorwall-text: #ffffff;
  }
  @media (prefers-color-scheme: dark) {
    .community-wall {
      --creatorwall-card-border: #565867;
    }
  }
</style>
<section class="community-wall">
  <script async src="https://streamerstatistics.com/embed.js"
    data-creator-wall data-src="https://streamerstatistics.com/embed?limit=9"></script>
</section>

Replace the dark-mode selector with the one your website uses. Ancestor class, style and theme-attribute changes, stylesheet changes, viewport changes and OS color-scheme changes are observed. Updates refresh that wall's iframe after a short debounce.

CSS colors accept hex, RGB, HSL, named colors, alpha and resolved brand variables. Numeric sizes accept numbers or pixels. Use unquoted plain text for labels, true/false for visibility, and the supported font options below. CSS on unrelated elements does not affect a wall.

To give two walls different themes, put them in separate wrappers with different variables. Styles never change the creator's channel or support destination.

Pass a theme as JSON

In the editor, open Import, export & reset to download a theme. You can import it into the editor later or place it in the loader's data-theme attribute. Both raw settings and a versioned export are accepted, up to 64 KB. Escape quotes and other HTML-sensitive characters when generating attributes in your CMS.

<script id="our-creator-wall" async
  src="https://streamerstatistics.com/embed.js"
  data-creator-wall
  data-theme='{"version":1,"config":{"supportBackground":"#9144ff","cardRadius":16}}'></script>

JSON and URL colors accept six/eight-digit hex or transparent. URL values must be URL-encoded; for example, accent=%239144ff. Changing data-theme after initialization updates the wall.

Update a wall with JavaScript

Register a listener before loading an async embed script, or check the script's creatorWall property if it has already loaded. Each instance has its own API.

function configure(wall) {
  wall.setTheme({
    supportBackground: "#9144ff",
    showFooter: false
  });
}

// Register before an async embed can finish loading.
document.addEventListener("creatorwall:ready", event => {
  if (event.target.id === "our-creator-wall") configure(event.detail);
});

// Also handle a script that has already initialized.
const script = document.getElementById("our-creator-wall");
if (script?.creatorWall) configure(script.creatorWall);

// Available once initialized:
// script.creatorWall.setTheme({ supportBackground: null });
// script.creatorWall.resetTheme();
// script.creatorWall.refreshTheme();

• setTheme(settings) merges presentation overrides. A null value removes that runtime override.
• resetTheme() clears runtime overrides and keeps the underlying CSS, JSON and URL settings.
• refreshTheme() rereads host CSS and JSON. Call it after CSSOM changes such as stylesheet.insertRule().
• frame gives access to this instance's iframe element.

Precedence, lowest to highest: embed URL → theme JSON → inherited host CSS variables → JavaScript overrides. Removing an override reveals the lower layer. For a complete preset switch, use a full exported theme; changing only the preset name keeps other explicitly supplied settings.

Settings reference

Use camelCase names in JSON, JavaScript and URLs. Use the corresponding kebab-case variable in host CSS. Unknown settings are ignored, numeric values are bounded, and only supported font and style options are accepted.

Directory & layout

Troubleshooting & security

• The wall is blank: use an HTTPS website and allow the service origin in your website's frame-src policy. Localhost and 127.0.0.1 are supported for development.
• The script does not run: allow this origin in script-src, or use the plain iframe option if your website builder strips scripts.
• CSS colors do not change: use the auto sizing loader and put variables on an ancestor of the script. Check for a higher-priority runtime override. Plain iframe themes use URL settings.
• Content is cut off: the script resizes automatically up to 60,000 pixels. Increase the height manually when using a plain iframe.
• A custom font is ignored: use a supported font option. Arbitrary font URLs, custom CSS, HTML and JavaScript are not accepted as theme values.

https://streamerstatistics.com is the origin to allow in your site's policy. The loader only frames this service's public renderer. It checks the origin and iframe window for resize messages. The public embed exposes no account details, business contacts, application evidence or staff notes. Visitors can browse without signing in; social and support links open in a new tab.

Embedding displays the public creator directory. It does not grant access to member-only discounts or staff pages.