Skip to content

Web SDK - Integration

The Cardlytics Web SDK makes it quick and easy to build an excellent rewards experience within your existing mobile application.

Getting Started

The Web SDK can be implemented in a few simple steps.

Add the required cdlx.js script and HTML container (usually a <div>) to the web page where you would like to implement Cardlytics Offers. Below is an example of the scripts and custom HTML elements and where they should be placed within your web application.

Place the cdlx.js resource at the bottom of the page(s) to ensure all required HTML elements are rendered to the page before the cdlx.js script is initialized.

An example HTML page integrated with Cardlytics Web SDK. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
  <head>   
  </head>
  <body>
    Your content here
    <div id="cdlx-widget" data-secToken="XXXX"></div>
    Your content here
    <script src="./cdlx.js"></script>
  </body>
</html>
<div id="cdlx-widget" data-secToken="XXXX"></div> or <div id="cdlx-rewards-hub" data-secToken="XXXX"></div> is required. This will be the location the Cardlytics content will appear. There is more information about these modules in the "Optional Modules" section.

After placing the required script and HTML elements on the page, you’ll need make a secure server-to-server call to Ad Server API to retrieve the Security Token needed for the Web SDK to make the necessary API calls. This “token” should be used for the value of the Data attribute “secToken” defined earlier, it will be different for each user.

Rewards Experience

To add the Cardlytics Web SDK Rewards Experience to you page you will need to add the follow code to the area in which you want the Rewards Experience to display.

1
<div  id="cdlx-rewards-hub"  data-secToken="XXXX"  data-theme="http://location of theme.json"></div>

cdlx-rewards-hub - This id is required to be added to the HTML container where you would like to display the Cardlytics Web SDK Offers Widget.

data-secToken – This data attribute will contain the token that is needed to make the required API calls to retrieve offers or any other data specific to the customer.

data-config – This data attribute will contain the URL to the location of the .json file need for customizations to the look and feel, as well as copy modifications of the application. If this attribute is not present or no URL is provided a default theme will be used.

Error Handling

Any failure of an API call will result in a message displayed to the end user, "We are having difficulty retrieving your information. Please try again shortly.". The message is fully configurable and information on how to do so is available in the Theming section.