Skip to main content

Theme

Fluid allows for customisation of the wallet to match the brand’s visual identity.

The following aspects of the wallet can be customised:

  • Options
  • Colours
  • Step Icons
  • Success Sound
  • Bonus Image
  • Font Weight

Options

Button Style

Choose from three distinct button styles:

  • Pill

Screenshot of Success Screen setup

  • Rounded

Screenshot of Success Screen setup

  • Square

Screenshot of Success Screen setup

Gradient Direction

In the Color Button section, you can define a value for Color Button Base Stop (and Color Button Hover Stop). When set, the primary button is rendered with a gradient going from Color Button to Color Button Base Stop (and from Color Button Hover to Color Button Hover Stop on hover).

The gradient direction is controlled by the Gradient Direction dropdown, which offers two options:

  • Vertical (default) — gradient runs top to bottom
  • Horizontal — gradient runs left to right

Inline Quick Deposit Border Radius

You can set a pixel value for the border radius of the Inline Quick Deposit widget. The value by default is 12px.

Colours

Customize the colors for up to 12 wallet components:

  • Backgrounds
  • Text
  • Primary - Used for links, info text, radio inputs, active input fields, selected state border on payment selector
  • Button
  • Pill - Amount selector
  • Status
  • Overlay - For popups, modals and background when wallet is open on desktop.
  • Input
  • Progress Bar
  • Icon
  • Borders/Dividers
  • Card Input

Step Icons

Icons can be configured for the following steps:

  • Amount
  • Bonus
  • Payment Method
  • Secure
  • Checking Details

Bonus Image

Set a default image as a placeholder for any bonus that lacks a specific image.

Sound

Set a custom sound to be played for successful transactions.

Font Weight

While the font itself is inherited from the website, the font weight has a default value.

  • Default value:
  • Medium: 400
  • Semi-bold: 600
  • Bold: 700

However, these values can be modified to match the brand’s own values.