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