Skip to content

Web SDK - Theming

The Cardlytics Web SDK makes it easy to customize the default theme of the SDK to match your custom branding.

Customizations to the Cardlytics Offers Program are made through the use of a JSON file. This file is controlled by you and can be hosted anywhere accessible by the application/web pages in which the Cardlytics Web SDK is included. Theme customizations such as colors, fonts, corner radius, and application verbiage are available.

In the event that a theme property or a copy value is not provided, or an incorrect value type is used for that property, the default theme will take the place of all variables with an indication of the invalid properties and/or values.

We will first break down the various configuration options by category (color, font, radius, layout, etc.). We will provide a full Web SDK configuration file example that is identical to the file you will use within your application to configure various aspects of the Web SDK.

Fonts and Colors

The Web SDK uses font family names defined in your current CSS. The following code sample snippets demonstrate how to set these properties in the Web SDK JSON configuration.

1
2
3
4
5
6
"font": {
  "nameBold": "Circular Std Bold",
  "nameMedium": "Circular Std Medium",
  "nameRegular": "Circular Std Book",
  "nameLight": "Circular Std Light"
}

For colors, the configuation properties accept standard CSS hex or color values.

1
2
3
4
5
6
"color": {
  "primary": "#0072DC",
  "interactive": "#0072DC",
  "interactiveHover": "#024a8e",
  "header": "#262626"
}

The corner radius of Buttons and Ad Tiles may also be set.

1
2
3
4
5
6
"radius": {
  "button": 6,
  "logo": 10,
  "adTile": "6px",
  "adDetail": "17px"
}

Layout

The layout of how Ads are displayed (as a tile or list view) and limiting the number of Ads to display can be controlled through configuration. When Ad Layout is changed this will affect the Widget and the All Offers sections of the Rewards Experience.

1
2
3
4
5
6
7
8
"layout":{
 "adLayout": "list",
  "featuredAdLayout": "tile",
  "widgetAdLimit": 3,
  "hubAdLimit": 10,
  "rewardsHubDetailModal": "page",
  "rewardsHubDetailAlignment": "center"
}

Offer Name

If your program refers to offers as Rewards, you could set that as the program name and it would update the feed title to Rewards. To update the offer name name you can do the following:

1
"offerName": "Rewards",

The text to display in the event that no Ads are available for a customer and the text to display in the event of an error when retrieving Ads can also be customized.

1
2
3
4
5
6
7
8
"error": {
  "title": "Offers not available",
  "copy": "Something's not right. Please refresh or try again later. Sorry about that."
},
"empty": {
  "title": "We're preparing personalized cash back offers just for you",
  "copy": "Your offers will be based on how you shop. The more you use your card, the more relevant offers you'll get."
}

Expiration

The text displayed on Offers for the various states of the offers can be configured.

1
2
3
4
5
6
7
8
"expiration":{
  "today": "last day!",
  "tomorrow": "day remaining",
  "future": "days remaining",
  "hours": "hours remaining",
  "minutes": "minutes remaining",
  "now": "Expiring Now"
}

Various aspects of the 'How it works' page and 'Program Education' can also be customized.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
"howItWorks": {
    "linkText": "How it works",
      "modal": {
        "modalHeader": "How cash back offers work",
        "modalDescription": "Earn extra cash back on everyday spending. It's easy, just activate, shop, and earn!",
        "bullet1": {
          "title": "Activate",
          "message": "View your offers, tap to activate, and that’s it. The offers are activated across all your program's credit and debit cards."
        },
        "bullet2": {
          "title": "Shop",
          "message": "Shop via the method shown on the offer and pay with your program's credit or debit card."
        },
        "bullet3": {
          "title": "Earn cash back",
          "message": "Your cash back is automatically credited within 7-10 business days to your credit or debit card account."
        }
      }
    },
    "programEducation": {
      "step1": {
        "title": "Activate",
        "copy": "View your offers, click to activate and that’s it. It’s ready to use."
      },
      "step2": {
        "title": "Shop",
        "copy": "Shop via the method shown on the offer and pay with your program's credit or debit card."
      },
      "step3": {
        "title": "Earn cash back",
        "copy": "Your cash back is automatically credited within 7-10 business days to your credit or debit card account."
      },
      "hyperLink": {
        "text": "Find out more",
        "linkText": "here",
        "url": "http://cardlytics.com"
      }

The full Web SDK JSON configuration file is shown here containing all of the configuration properties reviewed above can be seen here.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
{
  "theme": {
    "font": {
      "nameBold": string,            //Bold font name
      "nameMedium": string,          //Medium font name
      "nameRegular": string,         //Regular font name
      "nameLight": string            //Light font name
    },
    "color": {
      "primary": string,             //Primary color
      "interactive": string,         //Color while clicking on a link
      "interactiveHover": string,    //Color while hovering over a link
      "header": string               //Header color
    },
    "radius": {
      "button": number || string,    //Radius for corners of buttons
      "logo": number || string,      //Radius for Ad logos
      "adTile": string,              //Radius for corners of Ad Tiles
      "adDetail": string             //Radius for ad details modal
    }
  },
  "layout":{
    "adLayout": string,              //Ad Layout (tile or list, default is tile)
    "featuredAdLayout": string,      //Featured Ad Layout (tile or list, default is list)
    "widgetAdLimit": number,         //Number of Ads to show in widget
    "hubAdLimit": number,            //Number of Ads to show in reward hub
    "rewardsHubDetailModal": string, //Ad details layout (page or modal, default modal in widget and page in reward hub)
  },
  "copy": {
    "offerName": string,             //Name of the Offer (Ad, Offer, Reward, etc.)
    "pluralizedOfferName": string,   // name of multiple offers(Ads, offers, rewards etc.)
    "error": {
      "title": string,               //Title when an error is encountered retrieving Ads
      "copy": string                 //Copy when an error is encountered retrieving Ads
    },
    "empty": {
      "title": string,               //Title when no Ads are available
      "copy": string                 //Copy when no Ads are available
    },
    "expiration":{
      "today": string,               //Text when an Ad expires today
      "tomorrow": string,            //Text when an Ad expires tomorrow
      "future": string,              //Text when an Ad expires more than 1 day in the future
      "hours": string,               //Text when an Ad expires in hours
      "minutes": string,             //Text when an Ad expires in minutes
      "now": string                  //Text when an Ad is expiring now
    },
    "howItWorks": {
      "linkText": string,            //Text for 'How It Works' link
      "modal": {
        "modalHeader": string,       //Text for 'How It Works' modal header
        "modalDescription": string,  //Text for 'How It Works' modal description
        "bullet1": {
          "title": string,           //Text for bullet point 1 of 'How It Works' (ie- 'Activate')
          "message": string          //Text for bullet point 1 message
        },
        "bullet2": {
          "title": string,           //Text for bullet point 2 of 'How It Works' (ie- 'Shop')
          "message": string          //Text for bullet point 2 message
        },
        "bullet3": {
          "title": string,           //Text for bullet point 2 of 'How It Works' (ie- 'Earn cash back')
          "message": string          //Text for bullet point 2 message
        }
      }
    },
    "programEducation": {
      "step1": {
        "title": string,             //Text for step 1 of 'Program Education' (ie- 'Activate')
        "copy": string               //Text for step 1 message
      },
      "step2": {
        "title": string,             //Text for step 2 of 'Program Education' (ie- 'Shop')
        "copy": string               //Text for step 2 message
      },
      "step3": {
        "title": string,             //Text for step 3 of 'Program Education' (ie- 'Earn cash back')
        "copy": string               //Text for step 3 message
      },
      "hyperLink": {
        "text": string,              //Text for more details (ie - Find out more)
        "linkText": string,          //Text for web link (ie - here)
        "url": string                //url for detail page (ex - "http://cardlytics.com") 
      }
    }
  },
  "rewardsHubUrl": string           //url or route for rewardsHub page (/cashback/rewardshub)
}