Promotional Messaging Components

Aperçu

This guide overviews the Promotional Messaging components, complete with HTML references and examples to help you implement them seamlessly. Each component uniquely highlights the Affirm financing offerings and consists of these three options:

As Low As (ALA)
Site Modal
Product Modal

As Low As

As Low As (ALAs) are specific HTML tags you can insert into your site where you want promotional messaging displayed.

These tags are responsible for rendering the messaging. See our HTML reference for more details. The following example displays promotional messaging with the text:

As low as {payment}/mo with [affirm_logo]. Learn more.

ALA JSFiddle

ALA HTML

<div id="prices">
    <p class="affirm-as-low-as" data-page-type="product" data-amount=50000></p>
</div>

Site Modal

A site modal is a type of pop-up that can be activated independently by various call-to-action (CTA) buttons. It is used primarily to present example financing options to the user.

Site modals are especially useful on financing pages, where they offer explanations about the available financing plans, helping consumers understand their payment possibilities before making purchases.

Refer to our HTML reference for more information.

Site Modal HTML

<div id="prices">
    <button class="affirm-site-modal" data-page-type="landing">Learn more about Affirm</button>
</div>

Site Modal JSFiddle

Product Modal

A product modal is a pop-up that provides detailed information specifically about the product, including its pricing details.

This type of modal is typically displayed on a product detail page. Product modals are typically opened by ALAs to give users comprehensive pricing and product information, helping them in their purchasing decision. Refer to our HTML reference for more information.

Product Modal HTML

<div id="prices">
    <p class="affirm-as-low-as" data-page-type="product" data-amount=50000></p>
</div>

<div id="prices">
     <button class="affirm-product-modal" data-page-type="product" data-amount=30000>
           Learn More</button>
</div>