SDKWebJavaScript SDK

Appearance and SPA

Card appearance and component lifecycle integration.

Appearance

setAppearance()

ads.setAppearance({
  colorScheme: "dark",
  surface: "inline",
  bodyFontSize: 14,
  mediaHeight: 130
});

Parameter	Values	Default
`colorScheme`	`auto`, `light`, `dark`	`auto`
`surface`	`card` / `inline`	`card`

Dimensions, px

Parameter	Default	Range	Description
`bodyFontSize`	14	13–16	Body font size
`bodyLineHeight`	20	18–26	Body line height
`brandFontSize`	14	13–16	Brand font size
`metaFontSize`	11	11–12	Disclosure font size
`mediaHeight`	130	100–200	Media height
`buttonFontSize`	14	13–15	Button font size
`buttonMinHeight`	32	32–40	Minimum button height
`buttonHorizontalPadding`	12	10–16	Horizontal button padding
`contentPadding`	8	6–16	Card padding
`cornerRadius`	12	8–20	Card corner radius
`blockSpacing`	6	4–10	Block spacing
`logoSize`	18	16–24	Logo size

Out-of-range values are clamped. In inline mode, corner radius is 0 and padding ranges from 0 to 16 px. Line height is at least 1.35 times the body font size; brand font size is at least bodyFontSize − 1.

The app container sets width; height follows the content. Card styles are isolated from page CSS.

React

Pass the existing ads client to the component. Call unmount() when removing its container.

Request an ad after the response is complete and question and answer no longer change. Repeated calls with the same requestId must use the same parameters.

AdSlot.jsx

function AdSlot({ ads, messageId, question, answer }) {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const target = ref.current;
    void ads.requestAd({
      target,
      requestId: messageId,
      context: { question, answer }
    });
    return () => ads.unmount(target);
  }, [ads, messageId, question, answer]);

  return <div ref={ref} style={{ maxWidth: 480 }} />;
}

Lifecycle

Event	Action
Message rerender	Keep the client, requestId and request parameters.
Screen hidden	`ads.setScreenActive(false)`
Screen shown	`ads.setScreenActive(true)`
Container removed	`ads.unmount(target)`
App shutdown	`ads.dispose()`