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',
      },
    },
    "*"
  );
}