Self-Service Integration
[.bad]NOTE: Self-Service integration is not recommended except for very specific use-cases.[.bad]
Tangiblee recommends managed integration for 95% of our clients. Through managed integration, Tangiblee runs QA and is responsible for ensuring that Tangiblee CTA and modal adhere to clients' ongoing changes and deployments. However, it is important to note that you should notify Tangiblee (success@tangiblee.com) if you have an ongoing product layout page or replatforming changes to take place that we should be aware of. If not, we will only see that change on the page after it is deployed to production and the Tangiblee CTA will not appear until we update our mapping to reflect these changes.
What is a possible use case for Self-Service Integration?
If you take advantage of a Progressive Web Application that is running on top of your existing e-commerce platform, then it might be advised to utilize self-service integration. However, we would recommend a conversation outlining all potential integration options with the Tangiblee engineering team.
In the case of a Self-Service Integration, the client implements its own mapping code (tangiblee-mapper.js) and has full control of its logic.
Self-Serviced integration consists of two code blocks:
- Mapping Code (tangiblee-mapper.js)
- Tangiblee API code (tangiblee.min.js)
Tangiblee recommends to place that tag in the same place where the other Javascript tags are added to the page - it may be the end of the <head> or <body> section. If Tangiblee tags are added via Google Tag Manager (GTM) then GTM manages that automatically.
For example, if a client needs two versions of the Snippet to support two different environments like PRD and STD, it may be done by using two separate tangiblee-mapper.js files for the PRD and STG environments.
Typical Self-Service Integration
The tangiblee-mapper.js is similar to Managed Integration Production PDP version example but now written by the client and hosted on the PDP directly instead of loading it from Tangiblee CDN.
[.good]Only generic Tangiblee API calls are made to the Tangiblee CDN equaling one less round trip to load the mapper.js from the Tangiblee CDN.[.good]
- One SKU on a PDP
- One active Locale
- No Price/Currency/ATC in-widget
- No Order Tracking
*`<!-- tangiblee-mapper.js code placed in a <script> tag -->`*
`<script>`
*`// helper function containing the code`*
*`// that injects the demo CTA.`*
*`// this code should be replaced with a`*
*`// real CTA injecting for a given PDP`*
**`var** showTangibleeCta = **function**(ctaThumbs) {`
**`var** ctaClassName = 'tangiblee-shopify-cta',`
`ctaContainer = document.getElementById('ProductThumbs'),`
`cta = document.getElementsByClassName(ctaClassName)[0];`
**`if** (cta) {`
`cta.style.display = 'block';`
`} **else** {`
**`if** (ctaContainer) {`
**`var** li = document.createElement('li');`
`li.className = 'grid__item small--one-third medium-up--one-third';`
**`var** btn = document.createElement('button');`
`btn.className = 'product-single__thumbnail ' + ctaClassName;`
`btn.style.border = '1px solid #333';`
`btn.style.padding = '0';`
`btn.style.margin = '0';`
`btn.style.backgroundColor = '#fff';`
`btn.style.width = '76px';`
`btn.style.height = '76px';`
`btn.style.fontSize = '1.4em';`
`btn.style.fontWeight = 'bold';`
`btn.style.lineHeight = '1.1em';`
`btn.style.textAlign = 'center';`
`btn.innerText = 'Will It Fit?';`
`li.appendChild(btn);`
`ctaContainer.appendChild(li);`
`}`
`}`
**`return** ctaClassName;`
`};`
`window.tangiblee =`
`window.tangiblee ||`
**`function**() {`
`(tangiblee.q = tangiblee.q || []).push(arguments);`
`};`
`tangiblee('domain', 'www.example.com');`
`tangiblee('useCookies', true);`
`tangiblee('showCTA', showTangibleeCta);`
`tangiblee('startOnSKUs', ['2275915']);`
`</script>`
*`<!-- generic Tangiblee API - tangiblee.min.js - code placed in a <script> tag -->`*
`<script async src="https://cdn.tangiblee.com/integration/3.1/tangiblee.min.js"></script>`
### Multi SKU Multi Locale Self-Service Integration
Advanced Self-Service Integration example: [Advanced Self-Service Integration Sample Link.](https://tngsandbox.myshopify.com/products/andre-sofa-bed)
Same as in the previous example, also in the Advanced example, the Mapping Code is written by the client and hosted on the client's PDP.
This example shows how to use Tangiblee on:
1. Multiple SKUs on a PDP (in this case two).
2. Multiple locales
3. *Price/Currency/ATC in-widget*
4. *Order Tracking on Thank You Page*
*`<!-- tangiblee-mapper.js code placed in a <script> tag -->`*
`<script>`
*`// helper function containing the code`*
*`// that injects the demo CTA.`*
*`// this code should be replaced with a`*
*`// real CTA injecting for a given PDP`*
**`var** showCta = **function** (ctaThumbs) {`
**`var** ctaClassName = 'tangiblee-cta',`
`cta = document.getElementsByClassName(ctaClassName)[0];`
**`if** (!cta && window.thumbsCarousel) {`
**`var** existingThumb = document.querySelector('.thumbsCarousel img');`
**`var** wrapper = document.createElement('div');`
`wrapper.style.position = 'relative';`
`wrapper.style.width = existingThumb.width + 'px';`
`wrapper.style.height = existingThumb.height + 'px';`
**`var** btn = document.createElement('button');`
`btn.style.position = 'absolute';`
`btn.style.top = '50%';`
`btn.style.left = '50%';`
`btn.style.display = 'block';`
`btn.style.margin = '-38px 0 0 -38px';`
`btn.className = ctaClassName;`
`btn.style.border = '1px solid #333';`
`btn.style.padding = '0';`
`btn.style.backgroundColor = '#fff';`
`btn.style.width = '76px';`
`btn.style.height = '76px';`
`btn.style.fontSize = '1.4em';`
`btn.style.fontWeight = 'bold';`
`btn.style.lineHeight = '1.1em';`
`btn.style.textAlign = 'center';`
`btn.innerText = 'Will It Fit?';`
`wrapper.appendChild(btn);`
`window.thumbsCarousel.append(wrapper);`
`}`
**`return** ctaClassName;`
`};`
*`// helper function containing the code`*
*`// that hides the demo CTA.`*
*`// this code should be replaced with a`*
*`// real CTA hiding for a given PDP`*
**`var** hideCTA = **function** (activeSKU) {`
**`var** cta = document.getElementsByClassName('tangiblee-cta')[0];`
**`if** (cta) {`
`cta.parentNode.removeChild(cta);`
`}`
`};`
*`// helper function containing the code`*
*`// that listens for the SKU change on the page and calls`*
*`// tangiblee('activeSKU', activeSku);`*
*`// when the value of active SKU is changed.`*
*`// this code should be replaced with a`*
*`// real SKU change detection for a given PDP`*
**`var** skuChangingElement = document.getElementsByClassName('single-option-selector')[0];`
`skuChangingElement.addEventListener('change', **function** () {`
**`var** activeSku,`
`selectedValue = document.getElementsByClassName('single-option-selector')[0].value;`
**`for** (**var** i = 0; i < meta.product.variants.length; i = i + 1) {`
**`if** (meta`
`.product`
`.variants[i]`
`.public_title === selectedValue) {`
`activeSku = meta.product.variants[i].sku;`
**`break**;`
`}`
`}`
**`if** (activeSku) {`
`tangiblee('activeSKU', activeSku);`
`}`
`});`
`});`
`window.tangiblee = window.tangiblee || **function** () {`
`(tangiblee.q = tangiblee.q || []).push(arguments);`
`};`
`tangiblee('domain', 'www.tangiblee-integration.com');`
`tangiblee('activeLocale', 'en-US');`
`tangiblee('useCookies', true);`
`tangiblee('useEnhancedEcommerce', true);`
`tangiblee('showCTA', showCta);`
`tangiblee('hideCTA', hideCTA);`
`tangiblee('activeCurrency', '$');`
`tangiblee('activeATC', '.btn-cart');`
`tangiblee('onSKUsValidated', **function** (atLeastOneSKUIsValid) {`
`console.log('At least one SKU is valid: ' + JSON.stringify(atLeastOneSKUIsValid));`
`});`
`tangiblee('onCTAFirstShown', **function** () {`
`console.log('Tangiblee CTA first shown!');`
`});`
`tangiblee('onCtaClicked', **function** () {`
`console.log('Tangiblee CTA clicked!');`
`});`
`tangiblee('onModalOpened', **function** () {`
`console.log('Tangiblee modal opened!');`
`});`
`tangiblee('onIframeLoaded', **function** () {`
`console.log('Tangiblee iframe loaded!');`
`});`
`tangiblee('onModalClosed', **function** () {`
`console.log('Tangiblee modal closed!');`
`});`
`tangiblee('activeSKU', 'F123356');`
`tangiblee('startOnSKUs', ['F123356', 'F125170']);`
`tangiblee('activePrice', '350');`
`</script>`
*`<!-- generic Tangiblee API - tangiblee.min.js - code placed in a <script> tag -->`*
`<script async src="https://cdn.tangiblee.com/integration/3.1/tangiblee.min.js"></script>`Multi SKU Multi Locale Self-Service Integration
Advanced Self-Service Integration example: Advanced Self-Service Integration Sample Link.
Same as in the previous example, also in the Advanced example, the Mapping Code is written by the client and hosted on the client's PDP.
This example shows how to use Tangiblee on:
- Multiple SKUs on a PDP (in this case two).
- Multiple locales
- Price/Currency/ATC in-widget
- Order Tracking on Thank You Page
*`<!-- tangiblee-mapper.js code placed in a <script> tag -->`*
`<script>`
*`// helper function containing the code`*
*`// that injects the demo CTA.`*
*`// this code should be replaced with a`*
*`// real CTA injecting for a given PDP`*
**`var** showCta = **function** (ctaThumbs) {`
**`var** ctaClassName = 'tangiblee-cta',`
`cta = document.getElementsByClassName(ctaClassName)[0];`
**`if** (!cta && window.thumbsCarousel) {`
**`var** existingThumb = document.querySelector('.thumbsCarousel img');`
**`var** wrapper = document.createElement('div');`
`wrapper.style.position = 'relative';`
`wrapper.style.width = existingThumb.width + 'px';`
`wrapper.style.height = existingThumb.height + 'px';`
**`var** btn = document.createElement('button');`
`btn.style.position = 'absolute';`
`btn.style.top = '50%';`
`btn.style.left = '50%';`
`btn.style.display = 'block';`
`btn.style.margin = '-38px 0 0 -38px';`
`btn.className = ctaClassName;`
`btn.style.border = '1px solid #333';`
`btn.style.padding = '0';`
`btn.style.backgroundColor = '#fff';`
`btn.style.width = '76px';`
`btn.style.height = '76px';`
`btn.style.fontSize = '1.4em';`
`btn.style.fontWeight = 'bold';`
`btn.style.lineHeight = '1.1em';`
`btn.style.textAlign = 'center';`
`btn.innerText = 'Will It Fit?';`
`wrapper.appendChild(btn);`
`window.thumbsCarousel.append(wrapper);`
`}`
**`return** ctaClassName;`
`};`
*`// helper function containing the code`*
*`// that hides the demo CTA.`*
*`// this code should be replaced with a`*
*`// real CTA hiding for a given PDP`*
**`var** hideCTA = **function** (activeSKU) {`
**`var** cta = document.getElementsByClassName('tangiblee-cta')[0];`
**`if** (cta) {`
`cta.parentNode.removeChild(cta);`
`}`
`};`
*`// helper function containing the code`*
*`// that listens for the SKU change on the page and calls`*
*`// tangiblee('activeSKU', activeSku);`*
*`// when the value of active SKU is changed.`*
*`// this code should be replaced with a`*
*`// real SKU change detection for a given PDP`*
**`var** skuChangingElement = document.getElementsByClassName('single-option-selector')[0];`
`skuChangingElement.addEventListener('change', **function** () {`
**`var** activeSku,`
`selectedValue = document.getElementsByClassName('single-option-selector')[0].value;`
**`for** (**var** i = 0; i < meta.product.variants.length; i = i + 1) {`
**`if** (meta`
`.product`
`.variants[i]`
`.public_title === selectedValue) {`
`activeSku = meta.product.variants[i].sku;`
**`break**;`
`}`
`}`
**`if** (activeSku) {`
`tangiblee('activeSKU', activeSku);`
`}`
`});`
`});`
`window.tangiblee = window.tangiblee || **function** () {`
`(tangiblee.q = tangiblee.q || []).push(arguments);`
`};`
`tangiblee('domain', 'www.tangiblee-integration.com');`
`tangiblee('activeLocale', 'en-US');`
`tangiblee('useCookies', true);`
`tangiblee('useEnhancedEcommerce', true);`
`tangiblee('showCTA', showCta);`
`tangiblee('hideCTA', hideCTA);`
`tangiblee('activeCurrency', '$');`
`tangiblee('activeATC', '.btn-cart');`
`tangiblee('onSKUsValidated', **function** (atLeastOneSKUIsValid) {`
`console.log('At least one SKU is valid: ' + JSON.stringify(atLeastOneSKUIsValid));`
`});`
`tangiblee('onCTAFirstShown', **function** () {`
`console.log('Tangiblee CTA first shown!');`
`});`
`tangiblee('onCtaClicked', **function** () {`
`console.log('Tangiblee CTA clicked!');`
`});`
`tangiblee('onModalOpened', **function** () {`
`console.log('Tangiblee modal opened!');`
`});`
`tangiblee('onIframeLoaded', **function** () {`
`console.log('Tangiblee iframe loaded!');`
`});`
`tangiblee('onModalClosed', **function** () {`
`console.log('Tangiblee modal closed!');`
`});`
`tangiblee('activeSKU', 'F123356');`
`tangiblee('startOnSKUs', ['F123356', 'F125170']);`
`tangiblee('activePrice', '350');`
`</script>`
*`<!-- generic Tangiblee API - tangiblee.min.js - code placed in a <script> tag -->`*
`<script async src="https://cdn.tangiblee.com/integration/3.1/tangiblee.min.js"></script>`