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

Primary Button Text

#ffffff

Border radius

Element Border

Widget Border




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; microphone"
/>
  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&primaryBtnTextColor=ffffff&borderRadius=0.5&wgBorderRadius=1"
  title="Onramper Widget"
  height="630px"
  width="420px"
  allow="accelerometer; autoplay; camera; gyroscope; payment; microphone"
/>
  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',
        primaryBtnTextColor: '#ffffff',
        borderRadius: '0.5rem',
        widgetBorderRadius: '1rem',
      },
    }, "*");
  }