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:

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-asrequired stringDisplays monthly payment messaging with educational product modal
affirm-site-modalrequired stringDisplays educational site modal
affirm-product-modalrequired stringDisplays educational product modal
data-amountoptional integerThe loan amount passed to display price specific messaging. Value in USD cents (e.g. $100 = 10000)
data-page-typerequired stringIdentifies 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-typeoptional stringSets the Affirm logo type. Default displays Affirm logo image. Possible values:

text
symbol
data-affirm-color optional stringSets the Affirm logo color. Default displays blue Affirm logo. Possible value:

black
white
data-category optional stringIdentifies the product category associated with the messaging for analytics tracking (e.g., electronics, furniture).
data-brand optional stringIdentifies the brand category associated with the messaging for analytics tracking (e.g., Samsung, Goodyear).
data-sku optional stringIdentifies the SKU associated with the messaging for analytics tracking (e.g., ABC123, SMSNG-50-TV).
data-promo-idoptional stringCustomizes the messaging with different styling, copy, or loan terms. Overrides customizations provided by data-page-type.
data-learnmore-showoptional stringShows 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