Skip to main content

Customization (iframe)

Theme (inside embed JSON)​

Set appearance via the theme object on your embed config (see Configuration): mode, primaryColor, backgroundColor, textColorPrimary, textColorSecondary, modalColor, cardBorderRadius, buttonBorderRadius.

Pass the whole config on the swap URL as ?config= + encodeURIComponent(JSON.stringify(embedConfig)) so nested theme fields stay valid JSON.

iframe dimensions​

Router recommends keeping a similar aspect ratio to the default 420×610 layout. You can change width and height on the <iframe> element, or use a responsive wrapper (see Examples).

Outer container styling​

The iframe is a separate document; your site styles the frame and its wrapper:

  • border: none for a flush embed
  • border-radius and box-shadow on the iframe or a wrapping div
  • max-width and margin: auto to center on the page

Widget Playground​

The Widget Playground helps you validate theme and other fields before you copy the JSON into your iframe src builder.

Next steps​