Widget theming

Welcome to the widget theme configurator, code-blocks are available below.

Widget Theme

Light

Dark

Bluey

Colors

Primary

#241d1c

Secondary Color

#ffffff

Primary Text

#141519

Secondary Text

#6b6f80

Container

#ffffff

Card

#f6f7f9

Border radius

Element Border radius

Widget Border radius




There are 3 main ways to utilize theming in the widget

  1. Using pre-defined themes (currently: light, dark, bluey)
    <iframe        
        src="https://buy.onramper.com?themeName=light"
        title="Onramper Widget"
        height="630px"
        width="420px"
        allow="accelerometer; autoplay; camera; gyroscope; payment"
    />
  2. Passing additional query parameters with the iframe source
    <iframe        
        src="https://buy.onramper.com/?themeName=light&containerColor=ffffff&primaryColor=241d1c&secondaryColor=ffffff&cardColor=f6f7f9&primaryTextColor=141519&secondaryTextColor=6b6f80&borderRadius=0.5&wgBorderRadius=1"
        title="Onramper Widget"
        height="630px"
        width="420px"
        allow="accelerometer; autoplay; camera; gyroscope; payment"
    />
  3. Posting a message to the iframe

    Mobile users can also post messages to/from webviews. This will change the properties of the widget without having to reload the iframe.

    const iframeRef = useRef<HTMLIFrameElement>(null);
    const iframe = iframeRef.current;
    if (iframe) {
      iframe.contentWindow.postMessage(
        {
          type: "change-theme",
          id: "change-theme",
          theme: {
            primaryColor: '#241d1c',
            secondaryColor: '#ffffff'
            primaryTextColor: '#141519',
            secondaryTextColor: '#6b6f80',
            containerColor: '#ffffff',
            cardColor: '#f6f7f9',
            borderRadius: '0.5rem',
            widgetBorderRadius: '1rem',
          },
        },
        "*"
      );
    }