Skip to main content

Customizing Wallet UI Guide

Customize the Accrue wallet frontend to match your brand identity. We support customization of content and styling elements to create a seamless brand experience.

Customization Areas​

Branding Elements
Customize logos, images, and value proposition content to maintain consistent brand identity.
Color & Style Options
Adjust colors, corner radiuses, and UI component styles to match your brand guidelines.

Branding Elements​

Your logo appears throughout the wallet frontend. Recommended dimensions: 90x30px. For best results, provide a resizable PNG or vector file.

Logo Customization Example

Two key images are used:

  • Intro Image: 400x150px, shown during onboarding
  • Cover Image: 400x340px, displayed throughout the savings journey
Cover Image Customization Example

Value Propositions​

Customize the onboarding value proposition screen:

  • Heading: Your brand message and call to action
  • Value Proposition: Savings opportunity in your brand voice
Text Customization Example

Color and Style Options​

Configure colors and styles for all UI components to match your brand identity.

Call-to-Action Buttons​

Customize button colors and border radius to match your brand styling.

CTA Customization Example

CTA Style Examples​

{
  ctaColor: '#000000',
  ctaTextColor: '#ffffff',
  ctaBorderRadius: '50px'
}
CTA Example 1
{
  ctaColor: '#0133A0',
  ctaTextColor: '#ffffff',
  ctaBorderRadius: '14px'
}
CTA Example 2
{
  ctaColor: '#5DBEA3',
  ctaTextColor: '#000000',
  ctaBorderRadius: '0px'
}
CTA Example 3

Form Input Styling​

Input fields can be customized with different border radiuses to match your form styling.

Input Style Examples​

{
  inputBorderRadius: "8px"
}
Input Border Radius Example 1
{
  inputBorderRadius: "0px"
}
Input Border Radius Example 2
{
  inputBorderRadius: "100px"
}
Input Border Radius Example 3

UI Component Colors​

Several UI components can have customized colors to match your brand palette:

Icons​

{
  iconColor: '#CB3939'
}
Icon Color Example 1
{
  iconColor: '#1C1178'
}
Icon Color Example 2

Loading Bar​

{
  loadingBarColor: "#36DD2D"
}
Loading Bar Example 1
{
  loadingBarColor: "#9B23AB"
}
Loading Bar Example 2

Savings Goal Progress Bar​

{
  progressBarColor: "#CB3939"
}
Progress Bar Example 1
{
  progressBarColor: "#29BE23"
}
Progress Bar Example 2

Date Selector​

{
  dateSelectorColor: "#69DBBD"
}
Date Selector Example 1
{
  dateSelectorColor: "#C25ECF"
}
Date Selector Example 2

Implementation​

Apply customizations through a simple configuration object:

window.accrueEmbedConfig = {
  merchantId: "your-merchant-id",
  customizations: {
    logoUrl: "https://your-domain.com/logo.png",
    ctaColor: "#0133A0",
    ctaTextColor: "#FFFFFF",
    iconColor: "#1C1178",
    loadingBarColor: "#36DD2D",
    progressBarColor: "#29BE23",
    dateSelectorColor: "#69DBBD",
    ctaBorderRadius: "14px",
    inputBorderRadius: "8px"
  }
};

We offer design consultation, configuration assistance, testing support, and ongoing maintenance. Contact your Accrue representative for help with customizations.