Customization

Footprint supports visual customization, allowing you to match the design of your product with the appearance option. It's available in all SDKs (javascript, react and react-native).

Customize it

Footprint

Ever Green

javascript

const appearance = {
  theme: 'light',
  publicKey: 'ob_live_NCIvO0m9VVlxPy2p1BwzFf'
};

footprint.open({ appearance, publicKey });

Do you want to see a project example? Go here.

You'll need to pick one theme to extend it. We offer two themes: light and dark. If you don't provide any themes, the light theme will be used by default.

typescript
import footprint from '@onefootprint/footprint-js';

const publicKey = 'ob_test_VMooXd04EUlnu3AvMYKjMW';
const appearance = {
  theme: 'dark',
};

footprint.open({ publicKey, appearance });

The easiest way to create custom themes is by extending the theme variables. Under the hood, they are just CSS variables, so you can inspect the resulting DOM using the DOM explorer in your browser. Scroll down to see the full list of variables.

Properties can be set using the unit that you prefer: pixels, rem, hex, rgb, etc.

typescript
import footprint from '@onefootprint/footprint-js';

const publicKey = 'ob_test_VMooXd04EUlnu3AvMYKjMW';
const appearance = {
  theme: 'dark',
  variables: {
    borderRadius: '0px',
    buttonPrimaryBg: '#315E4C',
    buttonPrimaryHoverBg: '#46866c',
    buttonPrimaryColor: '#FFF',
  },
};

footprint.open({ publicKey, appearance });

As the name says, global variables are the easiest way to set a specific property to all elements. For example, setting borderRadius to 4px is the equivalent of adding the same 4px to the variables dialogBorderRadius, inputBorderRadius, buttonBorderRadius and dropdownBorderRadius.

Links are just regular anchors. One example is the Terms of Service link. If you need to apply more propeties or different states, use custom rules.

The dialog that wraps our flow.

It refers to the native label element, the one that will be used to link with its input field.

This refers to all the inputs in the platform, including Pin Inputs, Phone Inputs and Address Inputs.

The text below the input field, which gives some extra information about the input. It can be used to indicate an error.

It's a variant of of our buttons, but without any backgrounds.

Dropdowns are used with input fields. When it's a phone input, it's used to display the list of countries. When it's an address input, it's used to display the list of results.

If you want to add styles that are not supported by these variables, you can use rules. With rules, you can use CSS to arbitrarily style the elements.

typescript
import footprint from '@onefootprint/footprint-js';

const publicKey = 'ob_test_VMooXd04EUlnu3AvMYKjMW';
const appearance = {
  theme: 'light',
  rules: {
    button: {
      transition: 'all .2s linear',
    },
    `button:hover`: {},
    `button:focus`: {},
    `button:active`: {},
    `input`: {},
    `input:hover`: {},
    `input:focus`: {},
    `input:active`: {},
    `label`: {},
    `hint`: {},
    `link`: {},
    `link:hover`: {},
    `link:active`: {},
  }
};

footprint.open({ publicKey, appearance });