---
updatedAt: 2026-04-28T22:52:56.000Z
agentTools:
  siteIndex: https://docs.affirm.com/llms.txt
  projectIndex: https://docs.affirm.com/developers/llms.txt
---

# Manage Promotional Messaging Components

Learn how you can use promotional messaging components to show customers how they can use Affirm to finance their purchases. This guide explains the different types of promotional messaging components, including HTML references and examples to help you implement components seamlessly.

<HTMLBlock>{`
<style>
  .dropdown-menu {
    font-family: Arial, sans-serif;
    max-width: 250px;
    margin-left: auto; /* Align to the right */
  	margin-right: 0; /* Ensure it's flush to the right */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background: #4A4AF4;
    overflow: hidden; /* Ensure the container grows with content */
  }

  .dropdown-item {
    margin-bottom: 10px;
  }

  .dropdown-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
  }

  .dropdown-toggle:hover {
    background: #f0f0f0;
  }

  .dropdown-content {
    display: none;
    margin-top: 5px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .dropdown-item.open .dropdown-content {
    display: block;
  }

  .flag-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  .product-item {
    margin-bottom: 5px;
  }

  .product-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  
  .country-title {
    font-family: Arial, sans-serif;
    font-size:20px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
  } 

</style>
  <div class="dropdown-menu">
    <p class="country-title" alt="Countries where this product is available">Country Availability</p>

    <div class="dropdown-item">
      <button class="dropdown-toggle" onclick="toggleDropdown(event)" alt="Drop down menu displaying the available countries for this product">
        <b>Country List</b> ⬇️
      </button>
      <div class="dropdown-content">
        <div class="product-item">
          <img src="https://files.readme.io/a4c8b3d6596d943e2b93c82cb1d432a2edaf6998667835c2e97ef4a31d460c7e-us-circle-01.png" alt="USA" class="flag-icon">
          USA
        </div>
        <div class="product-item">
          <img src="https://files.readme.io/3ca294a1b4b8b8506c3ff32876abc6e3e33d0e65a509dab81398915094bdbc5c-61TcZ33ZrJL._AC_UY1000_.jpg" alt="Canada" class="flag-icon">
          Canada
        </div>
        <div class="product-item">
          <img src="https://files.readme.io/db98461fef617df7c9970e98f01150f067fcee1fc823a450f09056138b9f70be-united-kingdom-flag-rounded-icon-uk-flag-union-jack-vector.jpg" alt="UK" class="flag-icon">
          UK
        </div>
      </div>
    </div>

  </div>
`}</HTMLBlock>

## About Promotional Messaging Components

You can choose from three types of components to highlight Affirm’s financing offerings:

* As-Low-As (ALA)
* Product Modal

For marketing compliance information, see the [Marketing](https://businesshub.affirm.com/hc/en-us/categories/4411551384852) section in the Business Resource Hub.

### As-Low-As

As-Low-As (ALA) components are specific HTML tags that render as-low-as promotional messaging on your site. You can add the tags to your site based on where you want to display the promotional messaging. For details, see the [HTML Reference](https://docs.affirm.com/payments/docs/html-reference).

<Image align="center" alt="As low as #32 per month with Affirm on Apple Pay. Learn more. " border={true} src="https://files.readme.io/0abe48013e0eff003b2348b535302c1e859604741211ee0bba9bc11650ee2a04-ebeda585361b65efedb96c9ae886d44b03f8c3a493b6de2b01e517eae12080aa-Promotional_Messaging_Images_1.svg" className="border" />

**ALA JSFiddle**:

<HTMLBlock>{`
<iframe width="100%" height="300" src="//jsfiddle.net/zvp0tuy4/embedded/result/" frameborder="0" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
`}</HTMLBlock>

**ALA HTML**:

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

### Product Modal

A product modal is a pop-up that displays detailed information about a specific product, particularly its pricing details. Product modals are often located on product detail pages since they provide users with comprehensive pricing and product information, helping them with their purchasing decision. Typically, a user can open a product modal by clicking the call-to-action in an As-Low-As promotional message, such as “Learn more.”

<Image align="center" alt="As low as $26 per month with Affirm. Learn more." border={true} src="https://files.readme.io/3489045963b6978c9eae5927d09aef24e24482a68da5b682198ac54938dd8515-Copy_of_UX_Flow_U.S.__Prequalification___Updated_5.6.2025_2.png" className="border" />

For details on adding a product modal, see the HTML Reference.

**Product Modal HTML:**

```html Product Modal HTML 1
<div id="prices">
    <p class="affirm-as-low-as" data-page-type="product" data-amount=50000></p>
</div>
```

```html Product Modal HTML 2
<div id="prices">
     <button class="affirm-product-modal" data-page-type="product" data-amount=30000>
           Learn More</button>
</div>
```

**Product Modal JSFiddle:**

<HTMLBlock>{`
<iframe width="100%" height="300" src="//jsfiddle.net/28sc7k6o/embedded/result/" frameborder="0" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
`}</HTMLBlock>

<br />

## Managing Promotional Messaging Components

### Create a Component

The `affirm.ui.components.create` import creates an Affirm component in the background to be rendered on-demand on your website, drastically reducing the impact of loading time.

<Callout icon="📘" theme="info">
  Promotional messaging components help reduce latency and offer you more flexibility.
</Callout>

```javascript
const promoComponent = affirm.ui.components.create(‘promo’, options)
```

#### Method Arguments

| Attribute                                                            | Type     | Description                |
| :------------------------------------------------------------------- | :------- | :------------------------- |
| **componentType** <span style={{ color: "Crimson" }}>required</span> | *string* | Only `promo` is available. |
| **options**\ <span style={{ color: "crimson" }}>required</span>      | *object* | See Options object.        |

#### Options Properties

<Table align={["left","left","left"]}>
  <thead>
    <tr>
      <th>
        Attribute
      </th>

      <th>
        Type
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        **amount**
      </td>

      <td>
        _integer_
      </td>

      <td>
        The loan amount passed to display price specific messaging. The amount must be in cents.
      </td>
    </tr>

    <tr>
      <td>
        **pageType**\ <span style={{ color: "crimson" }}>required</span>
      </td>

      <td>
        _string_
      </td>

      <td>
        The page type of the page the promo/messaging is on:

        * `product` (default)
        * TBD
      </td>
    </tr>

    <tr>
      <td>
        **affirmLogoType**
      </td>

      <td>
        _string_
      </td>

      <td>
        Sets the Affirm logo type. Default displays Affirm logo image:

        * `logo` (default): The standard Affirm logo.
        * `symbol`: Displays the Affirm logo as a symbol.
        * `text`: Displays Affirm Logo in plain text.
      </td>
    </tr>

    <tr>
      <td>
        **affirmLogoColor**
      </td>

      <td>
        _string_
      </td>

      <td>
        Set the color on the Affirm logo:

        * `black`
        * `blue` (default)
        * `white`
      </td>
    </tr>

    <tr>
      <td>
        **category**
      </td>

      <td>
        _string_
      </td>

      <td>
        Identifies the product category associated with the messaging for analytics tracking (e.g., electronics, furniture).
      </td>
    </tr>

    <tr>
      <td>
        **brand**
      </td>

      <td>
        _string_
      </td>

      <td>
        Identifies the brand category associated with the messaging for analytics tracking (e.g., Samsung, Goodyear).
      </td>
    </tr>

    <tr>
      <td>
        **sku**
      </td>

      <td>
        _string_
      </td>

      <td>
        Identifies the SKU associated with the messaging for analytics tracking.
      </td>
    </tr>

    <tr>
      <td>
        **promoId**
      </td>

      <td>
        _string_
      </td>

      <td>
        Allows the merchant to select a specific promo id that they want to display. This will override the `pageType` supplied.
      </td>
    </tr>

    <tr>
      <td>
        **learnMoreShow**
      </td>

      <td>
        _boolean_
      </td>

      <td>
        Whether to show or suppress the modal link:

        * `true` (default): Shows the modal link.
        * `false`: Suppresses CTA link and hyperlinks entire promo.
      </td>
    </tr>
  </tbody>
</Table>

### Render a Component

Render a component to improve promotional messaging latency on your website:

1. Call the render function, `affirm.ui.components.render("#css-selector")`, for an existing component at any time.
   1. The render function accepts the CSS selector for the DOM element where you want to display the promotional messaging. We recommend using an `id` for a single element as the CSS selector.
   2. The render function uses `document.querySelector` to locate the element on the page. If you pass a class, only the first matching element is transformed into the rendered component.

### Update a Component

You can update a component to help reduce latency and increase flexibility on your site.

For promotional messaging components, the update function:

* Makes another call to the Promos API with updated `options`.
* Re-renders the promotional messaging if it's rendered on the page.

## Related Topics

* [HTML Reference: Promotional Messaging](https://docs.affirm.com/developers/docs/html-reference-promotional-messaging)

# Sibling pages

* [About Promotional Messaging and Prequalification](https://docs.affirm.com/developers/docs/about-promotional-messaging-and-prequalification.md)
* [Set Up Promotional Messaging](https://docs.affirm.com/developers/docs/set-up-promotional-messaging.md)
* [HTML Reference: Promotional Messaging](https://docs.affirm.com/developers/docs/html-reference-promotional-messaging.md)
* [About Google Tag Manager](https://docs.affirm.com/developers/docs/google-tag-manager.md)
* [Set Up Google Tag Manager](https://docs.affirm.com/developers/docs/set-up-google-tag-manager.md)
* [Marketing and Compliance](https://docs.affirm.com/developers/docs/email-marketing.md)