API Introduction
Tangiblee API enables customized Tangiblee UX and controls the results tracking implemented on your website.
Design Principles
- Small footprint - Minimize the size of the script, download time, and execution time.
- Stand-alone - Tangiblee doesn't rely on any external dependencies like javascript libraries.
- Cross-browser - API supports all popular browsers such as Chrome, Safari, Firefox, IE, Edge, and Opera and all platforms such as iOS, Windows, and Android.
- Asynchronous download - The script is downloaded asynchronously and doesn't block the download or the rendering of any other script.
- Lazy Loading - If Tangiblee CDN is temporarily slow, it doesn't block the onLoad event from triggering until after our site responds.
- Events preserving - Any events used are not overriding any events on the customer’s site. Minimal impact.
- No namespace pollution - Tangiblee doesn't use global variables that might conflict with existing javascript.
How to Use It?
Tangiblee integration with a PDP consists of two logical blocks, the Tangiblee API and the mapper.js that tailors the API to the specific PDP structure. Below is a detailed explanation for each of the blocks.
1. Tangiblee API
An abstraction layer to all the front-end functionalities and capabilities supported by Tangiblee's Platform that can be used on a web-page. Every integration of Tangiblee into a web-page is using Tangiblee API to access Tangiblee, load the CTA and launch the Tangiblee experience. The code that wraps the Tangiblee API and activates it is called the Mapping Code.
In the case of Self-Service Integration, the client’s IT team will write the mapper.js that calls Tangiblee API; however, in the case of Managed Integration, the Tangiblee API is called from the Mapping Code that is provided by Tangiblee.
2. tangiblee-mapper.js
This layer binds the web-page or PDP to Tangiblee API by acting as a mapper for the information that exists on the web-page and restructures that information to fit Tangiblee API. The tangiblee-mapper.js is unique for each particular type of PDP and for each client website.
tangiblee-mapper.js can be created, maintained, and hosted by either the client or by Tangiblee. PDPs continuously change and evolve over time so maintaining the tangiblee-mapper.js is critical to ensure the Tangiblee Platform can run without errors.
Recap:
The main data points that the tangiblee-mapper.js logic binds to the Tangiblee API are:
- CTA Code: Manipulate the CTA that triggers Tangiblee and defines the logic for actions such as create, show/hide, remove, and render.
- SKU Code: Map the current SKU list and active SKU/s information from the web-page to the Tangiblee Platform. This part is essential to load the correct visual assets from the Tangiblee back-end and deliver the correct experience to the user.
Advanced Features: localization, show/hide add-to-cart button, show/hide price & currency, Google Analytics tracking customization, order, and revenue tracking.
