Integrate promotional messaging

TipTop.js

TipTop.js is a JavaScript library designed to simplify the integration of TipTop's promotional messaging into your website. It facilitates the rendering of promotional content and ensures smooth communication between the HTML tags you add to your site (like data-page-type) and TipTop's servers. By following the integration steps outlined below, you can leverage TipTop.js to effectively showcase TipTop's features to your customers.

Steps of integration

Step 1

The initial step to leveraging TipTop's promotional messaging capabilities involves incorporating the TipTop.js library within your website's global page template. This strategic placement guarantees that the library loads across all your site's pages.

Here's how to include TipTop.js:

Locate the head section of your global page template.
Paste the following embed code within the head section:

HTML

<!-- TipTop -->
<script>
 _tiptop_config = {
   public_api_key:  "YOUR_PUBLIC_KEY",
   script:          "https://cdn.tiptop.com/js/tiptop.js",
   locale:          "en_US",
   country_code:    "USA"
 };
 (function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_tiptop_config,"tiptop","checkout","ui","script","ready");
</script>
<!-- End TipTop -->

Once you've successfully incorporated the TipTop.js library using the provided embed code, a dedicated TipTop instance will be established on your client-side environment. This instance acts as an intermediary between your website and TipTop's servers, facilitating communication and functionality.

Step 2

Following the inclusion of TipTop.js, you'll insert specific HTML tags within your website's code at locations where you desire TipTop's promotional messaging to appear. These designated tags are responsible for rendering (displaying) the messaging content.

For detailed information on the available HTML tags and their functionalities, visit our comprehensive HTML reference.

HTML

<div id="prices">
    <div id="checkout-button">
      Checkout
    </div>
    <div id="total-price">
      $50.00
    </div>
    <p class="tiptop-promo-widget" data-page-type="product" data-amount="1000"></p>
</div>

The data-page-type attribute plays a crucial role in ensuring effective placement and configuration of TipTop's promotional messaging components within your website

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Detail Page</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.tiptop.com/js/tiptop.js"></script>
  </head>
<body>
  <header>
    </header>
  <main>
    <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="prices">
        <div id="checkout-button">
          Checkout
        </div>
        <div id="total-price">
          $50.00
        </div>
        <p class="tiptop-promo-widget" data-page-type="product" data-amount="1000"></p>
      </div>
    </div>
  </main>
  <footer>
    </footer>
</body>
</html>

Introduction HTML reference