Direct Integration
Promotional messaging
Integrate promotional messaging

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:

  1. Locate the head section of your global page template.
  2. Paste the following embed code within the head section:
HTML
<script>
  var _tiptop_config = {
    public_api_key: "YOUR_PUBLIC_API_KEY",
    script: "https://cdn.tiptop.com/js/v1/tiptop.js",
  };
 
  !(function (t, e) {
    var n = t.tiptop || {},
      c = document.createElement("script");
    (c.async = !0), (c.src = e.script);
    var i = document.getElementsByTagName("script")[0];
    i.parentNode?.insertBefore(c, i), (t.tiptop = n);
  })(window, _tiptop_config);
</script>
ℹ️

If your store will only use tiptop.js for promotional messaging (e.g. a headless Shopify store), then you may supply an empty API key. Only the payments portion of tiptop.js requires the API key.

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>
    <script>
      var _tiptop_config = {
        public_api_key: "YOUR_PUBLIC_API_KEY",
        script: "https://cdn.tiptop.com/js/v1/tiptop.js",
      };
 
      !(function (t, e) {
        var n = t.tiptop || {},
          c = document.createElement("script");
        c.async = true;
        c.src = e.script;
        var i = document.getElementsByTagName("script")[0];
        i.parentNode.insertBefore(c, i);
        t.tiptop = n;
      })(window, _tiptop_config);
    </script>
  </head>
 
  <body>
    <main>
      <div class="product-detail">
        <h1>Product Name</h1>
        <div class="product-description">Product description.</div>
        <p>$100</p>
        <div
          class="tiptop-promo-widget"
          data-page-type="product"
          data-amount="1000"
        ></div>
        <div class="checkout-buttons">
          <button class="cart-button">+ Add to cart</button>
          <button class="buy-now-button">Buy it now</button>
        </div>
      </div>
    </main>
  </body>
</html>
IntroductionHTML reference