Settings

The platform renders Save/Cancel outside your iframe, so don't add your own. Your job is to load saved settings into the form, then validate and persist them when the model clicks Save. In the snippets, ext is your createExtHelper() instance. For the concept and manifest setup, see Extension Settings.

Build a model settings form

A complete settings.html component. Keep the settings in state: load them on mount, hand them to your own form, and answer the platform's save request. Here the model configures the spin price and the list of actions viewers can win.

import { useEffect, useState } from 'react';
import { createExtHelper } from '@stripchatdev/ext-helper';

const ext = createExtHelper();

type TSettings = {
  actions: string[];
  priceTokens: number;
};

const DEFAULT_SETTINGS: TSettings = {
  actions: [],
  priceTokens: 25,
};

function SettingsForm() {
  const [settings, setSettings] = useState<TSettings>(DEFAULT_SETTINGS);

  // load saved settings on mount
  useEffect(() => {
    const init = async () => {
      const res = await ext.makeRequest('v1.model.ext.settings.get', null);
      setSettings(yourToSettings(res.settings)); // narrow the unknown value to TSettings
    };
    void init();
  }, []);

  // answer the platform's Save request with the current state
  useEffect(() => {
    const onSave = () =>
      ext.makeRequest('v1.model.ext.settings.set', {
        settings,
        isError: settings.actions.length < 2, // true → the modal stays open
      });

    ext.subscribe('v1.model.ext.settings.set.requested', onSave);
    return () => ext.unsubscribe('v1.model.ext.settings.set.requested', onSave);
  }, [settings]);

  // your own controlled form — no Save/Cancel buttons, the platform renders them
  return <YourSettingsForm value={settings} onChange={setSettings} />;
}

Two helpers are yours to implement:

• <YourSettingsForm> — a controlled form that renders the inputs and reports edits back through onChange, so the current values always live in settings.
• yourToSettings — narrows the unknown saved value into a valid TSettings, filling defaults for missing or malformed fields.

TIP

Keep validation in your settings iframe — the platform only reads the isError flag and never inspects the settings object. Return isError: true (as above, until there are at least two actions) to keep the modal open.

Read settings at runtime

Any slot can read the current values at runtime:

const { settings } = await ext.makeRequest('v1.ext.settings.get', null);
yourApplySettings(settings);

Settings are also passed as the third argument to the resolver, so you can use them to decide which page a slot renders.

React to settings changes

You don't need to propagate settings yourself. After the model saves, the platform reloads your slots with the new settings automatically — for every client (the model and viewers). So the mount-time v1.ext.settings.get above always receives the up-to-date values; there is nothing to subscribe to.