Quick Start

This tutorial explains how to initialize and render Tipser Script on your page. You are required to have a publisher account created in order to get the posId, as well as have some collections created in your shop managed here.

If you're all set up, follow the three steps below to install Tipser Script on your site!


Installation of Tipser Script

To include Tipser Script on your site, use the following script element. It exposes a global tipserScript variable that can be used to initialize and configure Tipser Script. Learn more about Tipser Script versioning.

<script src="https://cdn.tipser.com/tipser-script/v3/tipser-script.min.js"></script>

📘

Make sure that Tipser Script is loaded only once on your page. Additionally, for the best performance it is recommended to put the script element at the end of the body element on your page.


Inserting Tipser Store

Insert this HTML tag on your page in the place where you want the store to appear. For a good effect you may want to put it on a dedicated subpage, as larger stores may occupy a significant space on the page.

<div data-tipser-store></div>

📘

Tipser Script works by scanning your HTML and replacing special tags with shoppable elements - even if these special tags are added dynamically, thanks to the usage of MutationObserver API


Initializing Tipser Script

Finally, to initialise Tipser Script, run the following line of JS code:

tipserScript.initialize("YOUR_POS_ID");

Make sure that the YOUR_POS_ID is replaced with the actual id corresponding to your account.

If you need to pass custom settings (see: Configuration), you can pass an options object as the second argument.

tipserScript.initialize("YOUR_POS_ID", options);

A complete working example could look like below:

<!DOCTYPE html>
<html>
  <body>
    <div data-tipser-store></div>
    <script src="https://cdn.tipser.com/tipser-script/v3/tipser-script.min.js"></script>
    <script>
      tipserScript.initialize("YOUR_POS_ID", {lang: "en-US"});
    </script>
  </body>
</html>

If everything was done correctly, you should see the Store element populated with all your store collections in place of the <div data-tipser-store></div> tag.

Open this snippet on Code Pen

👍

Congratulations! You have successfully integrated and setup Tipser Script on your site.