---
updatedAt: 2026-01-26T18:08:42.000Z
agentTools:
  siteIndex: https://docs.affirm.com/llms.txt
  projectIndex: https://docs.affirm.com/payments/llms.txt
---

# HTML Reference for Promotional Messaging

Add an HTML element to your category, product, cart, and payment pages to display promotional messaging across your site. Explore the HTML reference for promotional messaging components.

<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;
    color: black;
  }

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

<Table align={["left","left","left","left"]}>
  <thead>
    <tr>
      <th style={{ textAlign: "left" }}>
        Type
      </th>

      <th style={{ textAlign: "left" }}>
        Data type
      </th>

      <th style={{ textAlign: "left" }}>
        Value
      </th>

      <th style={{ textAlign: "left" }}>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td style={{ textAlign: "left" }}>
        **Class** <span style={{ color: "crimson" }}>required</span>
      </td>

      <td style={{ textAlign: "left" }}>
        _string_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        These classes determine the Affirm promotional messaging component to display.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `affirm-as-low-as`
      </td>

      <td style={{ textAlign: "left" }}>
        Displays monthly payment messaging with educational product modal.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `affirm-product-modal`
      </td>

      <td style={{ textAlign: "left" }}>
        Displays educational product modal.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>
        **data-amount** <span style={{ color: "crimson" }}>required</span>
      </td>

      <td style={{ textAlign: "left" }}>
        _integer_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        The product price amount passed to display loan price specific messaging. Value in USD cents (e.g. $100 = 10000).
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>
        **data-promo-id** _optional_
      </td>

      <td style={{ textAlign: "left" }}>
        _string_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        Calls a specific promotional messaging template and/or financing program.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>
        **data-page-type** <span style={{ color: "crimson" }}>required</span>
      </td>

      <td style={{ textAlign: "left" }}>
        _string_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        Identifies your promotional messaging so Affirm can apply the necessary customizations based on which page they are displayed.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `homepage`
      </td>

      <td style={{ textAlign: "left" }}>
        Your site's homepage.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `landing`
      </td>

      <td style={{ textAlign: "left" }}>
        A landing page that describes Affirm.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `search`
      </td>

      <td style={{ textAlign: "left" }}>
        Your site's search results page.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `category`
      </td>

      <td style={{ textAlign: "left" }}>
        Your site's category page.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `product`
      </td>

      <td style={{ textAlign: "left" }}>
        A product description page.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `cart`
      </td>

      <td style={{ textAlign: "left" }}>
        Your site's cart page.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `payment`
      </td>

      <td style={{ textAlign: "left" }}>
        The payment selection page.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `banner`
      </td>

      <td style={{ textAlign: "left" }}>
        A banner image (use for any promotional messaging triggered by your banner or image regardless of page location).
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `marketplace`
      </td>

      <td style={{ textAlign: "left" }}>
        The marketplace landing page.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>
        **data-affirm-type**  
        _optional_
      </td>

      <td style={{ textAlign: "left" }}>
        _string_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        Sets the Affirm logo type. Default displays Affirm logo image.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `text`
      </td>

      <td style={{ textAlign: "left" }}>
        Displays Affirm logo in plain text.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `symbol`
      </td>

      <td style={{ textAlign: "left" }}>
        Displays Affirm logo as a symbol.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>
        **data-affirm-color**  
        _optional_
      </td>

      <td style={{ textAlign: "left" }}>
        _string_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        Sets the Affirm logo color. Default displays the primary (indigo) Affirm logo.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `black`
      </td>

      <td style={{ textAlign: "left" }}>
        Displays black color Affirm logo.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `white`
      </td>

      <td style={{ textAlign: "left" }}>
        Displays white color Affirm logo.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>
        **data-category**  
        _optional_
      </td>

      <td style={{ textAlign: "left" }}>
        _string_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        Identifies the product category associated with the messaging for analytics tracking (e.g., electronics, furniture).
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>
        **data-brand**  
        _optional_
      </td>

      <td style={{ textAlign: "left" }}>
        _string_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        Identifies the brand category associated with the messaging for analytics tracking (e.g., Samsung, Goodyear).
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>
        **data-sku**  
        _optional_
      </td>

      <td style={{ textAlign: "left" }}>
        _string_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        Identifies the SKU associated for promotional financing on select products only and analytics tracking(e.g., ABC123, SMSNG-50-TV).
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>
        **data-learnmore-show**  
        _optional_
      </td>

      <td style={{ textAlign: "left" }}>
        _string_
      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        Shows or suppresses the link to the modal.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `false`
      </td>

      <td style={{ textAlign: "left" }}>
        Suppresses the link and hyperlinks the entire promo.
      </td>
    </tr>

    <tr>
      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>

      </td>

      <td style={{ textAlign: "left" }}>
        `true`
      </td>

      <td style={{ textAlign: "left" }}>
        Shows the link.
      </td>
    </tr>
  </tbody>
</Table>