Appearance

Theming

Set the theme object on init for the first render, or update it at runtime to re-theme on the fly. Both accept the same theme tokens.

<script>
  window.koah_init = window.koah_init || {}
  window.koah_init.theme = {
    colorScheme: 'dark',
    presentationMode: 'card',
    accentColor: '#3b82f6',
  }
</script>
<script async src="https://app.koah.ai/js?token=<YOUR_PUBLISHER_ID>"></script>

For the full token list (color scheme, accent, font, width, chrome), see Theme tokens in the reference.

Sizing

Koah ads are fully resizable. Control size using the dimensions argument (maxWidth / maxHeight, in CSS pixels) as needed—each axis is independent, and Koah serves only the formats that fit.

window.koah.requestAd({
  target: document.getElementById('ad-slot'),
  context: { type: 'conversation', question, answer },
  dimensions: { maxWidth: 480, maxHeight: 300 },
})

See Format bounds for the per-variant table and Ad formats for the shared sizing model.

Sizing for mobile and desktop

Set the maximum size of the slot in CSS. Then read that size and send it with the request.

Give the slot a max-width, a max-height, and overflow: hidden. The ad then stays inside the space you give it. Use a media query or a container query to make the slot smaller on a narrow screen. Write both maximums in pixels, because a percentage gives no usable number in JavaScript.

#ad-slot {
  max-width: 768px;
  max-height: 550px;
  overflow: hidden;
}

/* Give mobile web less room. */
@media (max-width: 640px) {
  #ad-slot {
    max-width: 360px;
    max-height: 400px;
  }
}