Skip to content

Web Experience - Integration

The Powered by Cardlytics Web Experience provides a technology agnostic way to quickly and easily integrate our comprehensive rewards experience into your existing web application.

The integration point between your application and our technology is a dynamically built URL, which your application can use to initialize and present the Powered by Cardlytics Web Experience to your consumer.

Prior to integrating

Before starting your integration with the Powered by Cardlytics Web Experience your marketplace will have to be configured on Cardlytics's end. During this process Cardlytics will need a theme configuration object (more details can be found in our theming page) and a redirect URL that we will used as a 404 redirect. This will be used when a user navigates directly to your partner page but hasn't been authenticated. This URL could be your registration/authentication page, a marketing page detailing your rewards offers or a link to your home page.

Getting Started

Your custom rewards experience will live on a Powered By Cardlytics partner URL. Once your marketplace has been configured within our systems, the experience will have a dedicated namespace in the format:

1
https://poweredby.dosh.com/partners/<marketplace>/

1. Verifying your marketplace

Once Cardlytics has provisioned your marketplace and enabled access to the web experience, an integration checklist will be accessible and can be used to verify the status of your setup. That checklist can be reviewed at

1
https://poweredby.dosh.com/partners/<marketplace>/checklist

To get more information about our integration checklist you can visit the documentation on debugging.

Info

It's natural for the checklist to be initially incomplete. As your work through the integration process and implement the necessary authentication parameters, this list will help reflect that progress. If the checklist redirects to a 404 page, that means your marketplace namespace has not been provisioned yet.

2. Presenting the Rewards Experience

Presenting the web rewards experience is done by linking from your current web experience over to the Powered by Cardlytics rewards experience in a new tab. Cardlytics will provide the URL to your marketplace's instance of the rewards experience. However, in order for that URL to load content, an encoded payload containing authentication context will need to be provided in the path. This context authenticates your marketplace as well as the specific user for which to load rewards.

2a. Building the encoded payload

In order to see offers, you will need to provide the proper authentication when redirecting to the web rewards experience. That authorization between your existing experience and Cardlytics is coordinated by providing a token that is signed with a secret key that we both share. For full documentation on the format of the authorization token, please see User Experience - Authentication.

Once a valid JWT has been generated for the respective user, it should be added as a 'jwt' attribute within a stringified JSON object (format shown in javascript example below). That object should then be base64 encoded.

Optional payload attributes:

The encoded payload also accepts the following optional attributes

Key Data Type Description
userDisplayName string The user's display name, used where user info is displayed
userProfileImageUrl string The user's profile image, used where user info is displayed
rewardsSummaryInfo string A message to override the rewards summary message in the account summary page
callbackUrls key/value pair A key value pair mapping used by the Powered by Cardlytics rewards experience to know where a specific SDK callback should redirect a user to
contentOverrides key/value pair A key value pair mapping used by the Powered by Cardlytics rewards experience to override certain content keys 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
const base64encode = btoa;
const payloadString = JSON.stringify({
  jwt: 'example-jwt',
  userDisplayName: 'John Smith', // optional
  userProfileImageUrl: 'http://.....', // optional
  rewardsSummaryInfo: 'example message', //optional
  callbackUrls: { // optional
    example: 'www.google.com'
  },
  contentOverrides: { // optional
    example: 'go to google'
  },
});

const encodedPayload = base64encode(payloadString);
console.log(encodedPayload); // prints out "eyJqd3QiOiJleGFtcGxlLWp3dCJ9"

2b. Adding Authentication to the URL Path

After base64 encoding the authentication payload containing the user's valid JWT, you are ready to construct the full entry point URL. The full URL should adhere to the following format where ${encodedPayload} would be replaced with the payload you generated in step 2a.

1
https://poweredby.dosh.com/partners/<marketplace>/setup/${encodedPayload}

Using the full URL format outlined above, create an action within your existing web experience to open that URL in a new tab.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const rewardsLinkSrc = `https://poweredby.dosh.com/partners/<marketplace>/setup/${encodedPayload}`;

return (
  <div>
    ...
    <a href={rewardsLinkSrc} target="_blank">
      View Rewards
    </a>
    ...
  </div>
)

Versioning

The Powered By Web Experience is not versioned independently per marketplace. Cardlytics will always serve the latest version of the platform when you request it. With that said, all major updates and releases will be communicated via your account manager prior to release.