Update promotional messaging attributes
Overview
You may have implemented promotional messaging with an incorrect or invalid data-promo-id value. This displays incorrect terms in Affirm modal and messaging. This guide will review Affirm promotional messaging and provide instructions on how to update the data-attributes.
Instructions
Upgrade steps are:
- Make sure all Promotional Messaging is now updated to use data-page-type
- Reach out to Affirm staff to add any existing customizations to the messaging
- Test and set live
Recommended: Sandbox
Perform this upgrade in your development environment connected to our sandbox. To connect your development environment to our sandbox, do the following:
- Retrieve your sandbox API keys at https://sandbox.affirm.com/dashboard/#/apikeys to use in the
Affirm.jsembed code - Use the script URL https://cdn1-sandbox.affirm.com in the
Affirm.jsembed code
Update Affirm promotional messaging attributes
There may be HTML elements on your page for our 'as low as' promotional messaging that resembles this:
<p class="affirm-as-low-as" data-promo-id="XXXXXXXXXXXXXX"...>
You may also have banners that are similar to this:
<p class="affirm-product-modal" data-promo-id="XXXXXXXXXXXXXX"...>
<p class="affirm-site-modal" data-promo-id="XXXXXXXXXXXXXX"...>
You will need to remove the data-promo-id attribute from the above HTML elements on your site and replace it with data-page-type attributes.
In each HTML element, include the new data-page-type attribute corresponding to the page where that promotional messaging component is placed. The data-page-type attribute allows you to customize messaging in the future without development work. By default, promotional messaging on product pages have prequalification enabled, but you can work with your Client Success Manager to change this and configure additional customizations
Required attributes
Classes
These classes determine the Affirm promotional messaging component to display.
| affirm-as-low-as | required string | Displays monthly payment messaging with educational product modal |
| affirm-site-modal | required string | Displays educational site modal |
| affirm-product-modal | required string | Displays educational product modal |
| data-amount | optional integer | The loan amount passed to display price specific messaging. Value in USD cents (e.g. $100 = 10000) |
| data-page-type | required string | Identifies your promotional messaging so Affirm can apply the necessary customizations based on which page they are displayed. Possible values are: homepage landing search category product cart payment banner |
| data-affirm-type | optional string | Sets the Affirm logo type. Default displays Affirm logo image. Possible values: text symbol |
| data-affirm-color | optional string | Sets the Affirm logo color. Default displays blue Affirm logo. Possible value: black white |
| data-category | optional string | Identifies the product category associated with the messaging for analytics tracking (e.g., electronics, furniture). |
| data-brand | optional string | Identifies the brand category associated with the messaging for analytics tracking (e.g., Samsung, Goodyear). |
| data-sku | optional string | Identifies the SKU associated with the messaging for analytics tracking (e.g., ABC123, SMSNG-50-TV). |
| data-promo-id | optional string | Customizes the messaging with different styling, copy, or loan terms. Overrides customizations provided by data-page-type. |
| data-learnmore-show | optional string | Shows or suppresses the link to the modal. Possible values: false true |
Monthly payment messaging (affirm-as-low-as) usually display price-specific information (requires data-amount) and are typically used with the following data-page-types:
- category
- product
- cart
- payment
Since site modals (affirm-site-modal) do not display price-specific information, they are typically used with the following data-page-types:
- homepage
- banner
- landing
- search
If you don't pass data-page-type, the component will use a default setting.
Before setting these changes live, you'll need to work with your Client Success Manager to ensure all the existing customizations are moved over to use data-page-type attributes.
Test and set live
Confirm that all of your Affirm promotional messaging components display as expected.
After testing everything, update the script parameter in the Affirm.js embed code to point to our live environment at https://cdn1.affirm.com and replace the public_api_key parameter with your live public API key found at https://affirm.com/dashboard/#/apikeys.
After you've connected to our live environment, you're ready to deploy to your production environment
Updated 8 months ago