Direct Integration
Promotional messaging
HTML reference

HTML reference

Class (required)

Data typeValueDescription
stringtiptop-promo-widgetDisplays TipTop promotional messaging with an action to open the promotional modal

data-amount (required)

Data typeDescription
intThe product price amount passed to display TipTop price specific messaging. Value in USD cents (e.g. $100 = 10000)

data-page-type (required)

Identifies your promotional messaging so TipTop can apply the necessary customizations based on which page they are displayed

Data typeValueDescription
stringcartCart page
stringpaymentPayment selection page
stringproductProduct description page

Example

HTML
<div class="product-detail">
  <img src="product-image.jpg" alt="Product Image">
  <h1>Product Name</h1>
  <p>Product Description</p>
  <p>Price: $100</p>
 
  <div id="tiptop-promo">
    <p class="tiptop-promo-widget" data-amount="10000" data-page-type="product">See how affordable this can be with TipTop. <button>Learn More</button></p>
  </div>
</div>