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-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


Did this page help you?