Theme Uniramp Widget

You can customize the widget to match your brand perfectly.

We understand how crucial it is for our partners to maintain brand consistency within their applications. This ensures they can deliver a cohesive and seamless experience. To support this, we developed a theming engine that can adapt to any style or design.

The following properties are customizable:

  • Primary Color
  • Secondary Color
  • Primary Text
  • Secondary Text
  • Container Color
  • Card Color
  • Element Border
  • Container Border

Use the theme builder

We‘ve simplified the theming process. Use the theme builder below to customize the appearance, and once you‘re satisfied, simply copy the code snippet and integrate it into your project.

Widget theme

Black

White

Colors

Primary

#fafafa

Secondary

#27272a

PrimaryText

#ffffff

SecondaryText

#fafafa

Container

#09090b

Card

#09090b

Border Radius

Elemental Border

0.50 rem

Widget Border

1.00 rem

There are 3 main ways to utilize theming in the widget

  1. By utilizing preset themes (currently available: light, dark)
    
      <iframe
        src="https://widget.uniramp.com/?theme_mode=dark"
        title="Onramper Widget"
        height="630px"
        width="420px"
        allow="accelerometer; autoplay; camera; gyroscope; payment; microphone"
      />
  2. Including extra query parameters in the iframe source URL.
    
      <iframe
        src="https://widget.uniramp.com?theme_mode=dark&primary_color=3f319a&secondary_color=ffffff&container_color=ffffff&card_color=f6f7f9&primary_text_color=141519&secondary_text_color=6b6f80&card_border_radius=0.5&wg_border_radius=1"
        title="Onramper Widget"
        height="630px"
        width="420px"
        allow="accelerometer; autoplay; camera; gyroscope; payment; microphone"
      />
  3. Sending a message to the iframe.

    Mobile users can also send and receive messages through webviews, allowing them to modify the widget's properties without reloading the iframe.

    const iframeRef = useRef<HTMLIFrameElement>(null);
    
    const iframeRef = useRef<HTMLIFrameElement>(null);
    const iframe = iframeRef.current;
     if (iframe) {
    iframe.contentWindow.postMessage({
      type: "change-theme",
      id: "change-theme",
      theme: {
        themeName: "dark",
        primaryColor: "3f319a",
        secondaryColor: "ffffff",
        primaryTextColor: "141519",
        secondaryTextColor: "6b6f80",
        containerColor: "ffffff",
        cardColor: "f6f7f9",
        borderRadius: "0.5",
        wgBorderRadius: "1",
      },
    }, "*");
  }