Stripchat Extension Platform

Appearance

Slots Layout ​

Each slot renders inside its own iframe. The HTML page loaded into the iframe is determined by the resolver script. This page describes how the platform sizes the iframe and what CSS conventions your page must follow.

How Sizing Works ​

The platform controls the iframe dimensions from the parent side:

  1. Width — always 100% of the slot container. The container width depends on the slot type and the current viewport (see Extension Slots for slot placement details).
  2. Height — the platform reads the <body> scroll height inside the iframe and applies it to the iframe element. This happens automatically via a ResizeObserver.

Because the parent sets the iframe height to match the body content, two scenarios emerge:

ScenarioWhat happens
Body content is shorter than the slot container<html> stretches to fill the slot container because it has height: 100%. Your content can center-align or fill the available space.
Body content is taller than the slot containerThe parent sets the iframe height to the body's scroll height. The parent page scrolls — not the iframe.

The Parent Is the Viewport ​

The slot container on the parent page acts as the effective viewport for your iframe. The actual iframe dimensions (width and height) are set by the parent — not by the browser window.

This means that CSS media queries based on viewport size (@media (max-width: ...), @media (min-width: ...)) will not work as expected inside the extension iframe. They reference the iframe's own dimensions, which are controlled by the parent and do not correspond to the user's browser window size.

DANGER

Do not rely on @media viewport queries for responsive layouts. They will produce unpredictable results because the iframe viewport is the slot container, not the browser window. Use flexible CSS techniques instead — percentage widths, flexbox, grid, clamp(), min() / max(), and container-relative units.

Scrolling ​

Scrolling is handled by the parent page. Your extension should not manage its own scroll — do not set overflow: auto or overflow: scroll on <html> or <body>. If the content exceeds the visible area, the parent page will scroll the iframe into view.

Adaptive Width ​

The iframe always takes 100% width of its slot container. The container width can change at any time on the Stripchat side — for example when the chat panel opens/closes, the viewport resizes, or the layout shifts between mobile and desktop.

Your layout must be fully responsive in width. Never rely on a fixed pixel width — always use relative units (%, fr) or CSS techniques like flexbox / grid that adapt to the available space.

WARNING

Stripchat may change slot container widths without notice. Always test your extension at multiple widths to make sure the layout does not break. See the Design Guidelines for general UI recommendations.

Basic Slot Template ​

Every HTML page loaded into a slot should include the following base CSS reset:

css
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}
RulePurpose
* { box-sizing: border-box }Prevents padding and borders from breaking width calculations.
html { height: 100% }Makes <html> act as a container that stretches to at least 100% of the iframe viewport. When the body content is small, the html element fills the slot container so background colors and layouts render correctly.

The <body> element acts as the content height marker — the platform reads body.scrollHeight to size the iframe. Let it grow naturally with your content; do not set a fixed height on it.

Add this CSS to every HTML page in your archive. For SDK initialization and the full page setup flow, see Quick Start.

Background Color ​

Since <html> stretches to fill the slot container, it acts as the background container for your extension page.

Every slot (except EXTENSION_SLOT_RIGHT_OVERLAY) has a default background provided by the platform. If you need to override it, set the background on the <html> element — not on <body>, because the body height equals the content height and will not cover the full slot area when the content is shorter than the container.

To support both dark and light themes, define a CSS variable with a default value and override it for the light theme using the data-theme attribute (see Theming for how it is set):

css
:root {
  --frame-bg: #1c1c1c;
}

html[data-theme='light'] {
  --frame-bg: #f7f7f7;
}

html {
  height: 100%;
  background-color: var(--frame-bg);
}

TIP

The platform Color System provides recommended background and text values for both themes. Using them keeps your extension visually consistent with the rest of the interface.

Summary ​

ConcernHow to handle
WidthAlways 100%. Build a responsive layout.
HeightSet html { height: 100% }. Let the body grow naturally with content. The platform reads body.scrollHeight and sizes the iframe.
Media queriesDo not use viewport-based @media queries — the iframe viewport is the slot container, not the browser window. Use flexible CSS instead.
ScrollingDo nothing — the parent page handles scrolling. Do not set overflow on html or body.
BackgroundSet on <html> to cover the full slot area. Use theme tokens for dark/light support.