Marketing Banner
- 10 Nov 2022
- 1 Minute to read
- DarkLight
Marketing Banner
- Updated on 10 Nov 2022
- 1 Minute to read
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback!
Overview
The Marketing Banner is an HTML component that provides the estimated offer information in addition to a button to open an informational modal that educates the agent on the Uplift Pay Monthly payment method. Some of the different configurations of the Marketing Banner is as shown below.
The Marketing Banner is composed of 3 required elements as shown in the image below.
- Marketing Message
- Brand Logo
- Marketing Image
Configuration
📘The Marketing Banner must always accompany the Pay Monthly iFrame defined in Step 5 on the checkout page or it will result in an error. Our recommendation is placing it somewhere above the Pay Monthly iFrame and payment selectors. If placed elsewhere, ensure it is placed in an area that the agent would see before the payment selectors and the Pay Monthly iFrame.
On the checkout page, the Uplift Agent Library will scan the DOM to determine where the marketing banner will be appended. In order to attach the iFrame, there must be an HTML element containing the data attribute data-up-marketing which contains a stringified JSON object of the marketing banner configuration. An example of the Marketing Banner configuration can be seen as shown below.
//Marketing Banner Configuration
const marketingBannerConfiguration = {
orientation: 'horizontal',
showLogo: true,
imagePlacement: 'left'
};
//Marketing Banner HTML Component
<div data-up-marketing={JSON.stringify(marketingBannerConfiguration)}></div>As can be seen above, the Marketing Banner configuration has certain keys in bold that need to be defined to configure the presentation of the banner. Details regarding each key, their value type, allowed values and description are provided below.
| Key | Type | Allowed Values | Description |
|---|---|---|---|
| orientation (required) | String |
| Determines the layout orientation of the banner |
| showLogo (optional) | Boolean |
| Determines whether company logo is shown |
| imagePlacement (optional) | String |
| Determines where the marketing image is shown. Note: when orientation is vertical (left/right does not make a change) |
📘 Do not attach more than one of these containers, as only the first detected node will be used.
Was this article helpful?