Personalizing the OnRamp Widget: Maximizing Your Possibilities

In this guide, we will explore how to personalize the OnRamp widget to align with your brand and style. You will learn about customizing the appearance and content to maximize the widget's functionality.

Description of Theme Fields

Before you start, familiarize yourself with the fields that can be used to customize the theme of the OnRamp widget:

{
  "tone": "dark",
  "headerLogoUrl": "https://example.com/your-logo.svg",
  "footerPartnerLogoUrl": "https://example.com/your-footer-logo.svg",
  "color": {
    "backgroundPrimary": "#000000",
    "backgroundSecondary": "#000000",
    "backgroundSecondaryBackdrop": "#000000",
    "surfacePrimary": "#000000",
    "surfaceSecondary": "#000000",
    "surfaceTertiary": "#000000",
    "borderRest": "#000000",
    "borderActivated": "#000000",
    "borderFocused": "#000000",
    "borderInactive": "#000000",
    "borderHover": "#000000",
    "borderDisabled": "#000000",
    "borderError": "#000000",
    "borderAlert": "#000000",
    "textPrimary": "#FFFFFF",
    "textSecondary": "#FFFFFF",
    "textTertiary": "#FFFFFF",
    "textWarning": "#FF0000",
    "textRest": "#FFFFFF",
    "textBrandPrimary": "#FFFFFF",
    "textBrandSecondary": "#FFFFFF",
    "textButtonDefault": "#FFFFFF",
    "textButtonHover": "#FFFFFF",
    "textButtonPressed": "#FFFFFF",
    "textButtonDisabled": "#000000",
    "textButtonWarning": "#FF0000",
    "iconBrand": "#FFFFFF",
    "iconPrimary": "#FFFFFF",
    "iconSecondary": "#FFFFFF",
    "iconAlert": "#FFFF00",
    "statusCompleted": "#00FF00",
    "statusProcessing": "#FFA500",
    "statusDeclined": "#FF0000",
    "buttonPrimaryDefault": "#FFFFFF",
    "buttonPrimaryHover": "#FFFFFF",
    "buttonPrimaryPressed": "#FFFFFF",
    "buttonPrimaryDisabled": "#000000",
    "buttonSecondaryDefault": "#000000",
    "buttonSecondaryHover": "#000000",
    "buttonSecondaryPressed": "#000000",
    "buttonSecondaryDisabled": "#000000",
    "buttonTextDefault": "#000000",
    "buttonTextHover": "#FFFFFF",
    "buttonTextPressed": "#FFFFFF",
    "buttonTextDisabled": "#000000",
    "linkDefault": "#FFFFFF",
    "linkHover": "#FFFFFF",
    "linkPressed": "#FFFFFF",
    "controlsSelectedDefault": "#FFFFFF",
    "controlsSelectedHover": "#FFFFFF",
    "controlsSelectedFocused": "#FFFFFF",
    "controlsSelectedPressed": "#FFFFFF",
    "controlsSelectedDisabled": "#000000",
    "controlsUnselectedDefault": "#FFFFFF",
    "controlsUnselectedHover": "#FFFFFF",
    "controlsUnselectedFocused": "#FFFFFF",
    "controlsUnselectedPressed": "#FFFFFF",
    "controlsUnselectedDisabled": "#000000",
    "toggleToggleOffDefault": "#FFFFFF",
    "toggleSwitchOffDefault": "#FFFFFF",
    "toggleToggleOffPressed": "#FFFFFF",
    "toggleSwitchOffPressed": "#FFFFFF",
    "toggleToggleOffDisabled": "#FFFFFF",
    "toggleSwitchOffDisabled": "#FFFFFF",
    "toggleToggleOnDefault": "#FFFFFF",
    "toggleSwitchOnDefault": "#000000",
    "toggleToggleOnPressed": "#FFFFFF",
    "toggleSwitchOnPressed": "#FFFFFF",
    "toggleToggleOnDisabled": "#FFFFFF",
    "toggleSwitchOnDisabled": "#FFFFFF",
    "buttonSocialGoogleBorderDefault": "#FFFFFF",
    "buttonSocialGoogleBorderHover": "#FFFFFF",
    "buttonSocialGoogleBorderPressed": "#FFFFFF",
    "buttonSocialGoogleBorderDisabled": "#000000",
    "buttonSocialGoogleShapeHover": "#000000",
    "buttonSocialGoogleTextDefault": "#FFFFFF",
    "buttonSocialGoogleTextHover": "#FFFFFF",
    "buttonSocialGoogleTextPressed": "#FFFFFF",
    "buttonSocialGoogleTextDisabled": "#000000",
    "buttonSocialAppleBorderDefault": "#FFFFFF",
    "buttonSocialAppleBorderHover": "#FFFFFF",
    "buttonSocialAppleBorderPressed": "#FFFFFF",
    "buttonSocialAppleBorderDisabled": "#000000",
    "buttonSocialAppleShapeHover": "#000000",
    "buttonSocialAppleTextDefault": "#FFFFFF",
    "buttonSocialAppleTextHover": "#FFFFFF",
    "buttonSocialAppleTextPressed": "#FFFFFF",
    "buttonSocialAppleTextDisabled": "#000000",
    "shadowModal": "#00000033",
    "primaryCounter": "#FFFFFF",
    "secondaryCounter": "#000000",
    "skeletonBackground": "linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%)"
  }
}

Logo Settings

Adding logos to the widget is the first step in personalization. Your company logo can be inserted at the top of the widget or added at the bottom, creating a unique appearance.

Example:

"headerLogoUrl": "https://example.com/your-logo.svg",
"footerPartnerLogoUrl": "https://example.com/your-footer-logo.svg"

Interface Customization

OnRamp allows for detailed customization of the interface, including:

Button and Link Styles: Change the shape, colors, and hover effects for buttons and links. You can customize how active and inactive states look.
Use of Custom Fonts: Select fonts that match your brand identity.
Adding Animations: Create dynamic elements using animations on hover or click.

Instructions for Customization

For theme customization within a specific integration, please reach out to the support team using the communication channels available at dashboard.kunacore.io or through your personal integration manager.

After creating a theme, it will be assigned a unique identifier. This identifier must be included in the URL when loading the widget to apply the pre-created theme. For example, you can use a link like this:

https://core-onramp-widget.anuk.tech/?institutionId=4a6c0f57-2a5f-40c6-bb0c-1e56734a44ab&themeID=12345678-9abc-def0-1234-56789abcdef0