Skip to content

Web Experience - Theming

The Powered by Cardlytics Web Experience uses a default theme automatically. You can customize the default theme with overrides to match your company branding. The documentation below outlines how the provided values map to the current experience and demonstrates how to override them.

Theming JSON Object

In order to customize the default web experience theme, you will need to provide a theming JSON object which will define the different brand asset and color attribute overrides. All attributes in the theming object are required. The following is an example of the full theming JSON object.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
  "logo": "https://doshdev-assets.s3.amazonaws.com/marketing/White_RGB_500px.png",
  "colors": {
    "primary": "#683caf",
    "header": "#26176b",
    "interactive": "#4fa3fc"
  },
  "font": {
    "name": "MarkOT",
    "light": "https://devassets.dosh.cash/webapps/fonts/MarkOT-Light.otf",
    "regular": "https://devassets.dosh.cash/webapps/fonts/MarkOT.woff",
    "medium": "https://devassets.dosh.cash/webapps/fonts/MarkOT-Medium.woff",
    "bold": "https://devassets.dosh.cash/webapps/fonts/MarkOT-Bold.woff"
  },
  "buttonRadius": "8px"
}

Your brand logo will primarily be used in the header of the Powered by Cardlytics Web Experience. To ensure optimal performance, please provide a url to a CDN hosted version of your company logo.

1
"logo": "https://doshdev-assets.s3.amazonaws.com/marketing/White_RGB_500px.png"

2. Fonts and Colors

The Powered by Cardlytics Web Experience uses four different font weights (light, regular, medium, and bold) and three main color variations (header, primary, and interactive). The following code samples demonstrate how to override those values. To better understand how those values map to various pieces of the UX, click here to see a visual representation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
"colors": {
  "primary": "#683caf",
  "header": "#26176b",
  "interactive": "#4fa3fc"
},
"font": {
  "name": "MarkOT",
  "light": "https://devassets.dosh.cash/webapps/fonts/MarkOT-Light.otf",
  "regular": "https://devassets.dosh.cash/webapps/fonts/MarkOT.woff",
  "medium": "https://devassets.dosh.cash/webapps/fonts/MarkOT-Medium.woff",
  "bold": "https://devassets.dosh.cash/webapps/fonts/MarkOT-Bold.woff"
}

3. Button Styles

The Powered by Cardlytics Web Experience theme options include an override for button corner radius. Modifying this value will allow you to influence how round or square the buttons feel and can be used to bring these elements more closely inline with your existing brand. In order to set this value, pass in a buttonRadius property which will expect a string with a px, rem, or em value.

1
"buttonRadius": "8px"

Server Size Customization Options

Account Summary in the Offers Feed

The account summary view in the offers feed can be further customized server-side. Since these are not configurable through the SDK, please work with your Partner Manager if you prefer a value other than the default. Configurable fields include:

  • The Last activity on <date> text

  • The Lifetime Rewards and <Year> Rewards text

Account Summary Screen

The Pending Activity and Recent Activity titles on the account summary screen can also be customized server-side. Since these are not configurable through the SDK, please work with your Partner Manager if you prefer a value other than the default.

Section Titles

The section titles in the offers feed can be customized. These fields are configured server-side, so please work with your Partner Manager if you prefer a value other than the default.