Integration for mobile apps

How to integrate with mobile apps:

Once the Product Details Screen is opened you will need to validate the SKU. An API request should be sent to following endpoint:

https://api.tangiblee.com/api/tngimpr?ids=<sku1>&domain=<domain>&activeLocale=en

Where sku1 is the current variation SKU, a domain should be your domain.

Once the user clicks on the PDP, a screen with the WebView component should be opened, pass URL in the following format:

https://cdn.tangiblee.com/widget/index.html?id=sku&domain=<retailer domain>&useCookies=true&price=<price>&currency=<currency symbol>

App Configuration

In case, we need to show AR, camera permissions should be specified.

iOS‍

1. In info.plist, you need to add the following code (right-click and select "View as Source code" to add them):

<key>NSCameraUsageDescription</key>
<string>Camera Access</string>

2. Create a WebView and set the allowsInlineMediaPlayback field in the webConfiguration to true.

Code example:

class ViewController: UIViewController, WKUIDelegate {
var webView: WKWebView!

	override func loadView() {
	    let webConfiguration = WKWebViewConfiguration()
	    webConfiguration.allowsInlineMediaPlayback = true
	    webView = WKWebView(frame: .zero, configuration: webConfiguration)
	    webView.uiDelegate = self
	    view = webView
	}
	
	override func viewDidLoad() {
	    super.viewDidLoad()         
	    let myURL = URL(string:"https://cdn.tangiblee.com/widget/index.html?id=th1791880&domain=titan.co.in&useCookies=true&price=13495.00&currency=₹&version=3.1.1.180")
	    let myRequest = URLRequest(url: myURL!)
	    webView.load(myRequest)
	}
}

Android‍

1. Add to the manifest file:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA" />

2. Add a WebView element to activity_main.xml (or another .xml file)

Code example:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

3. Add the following code to MainActivity.kt (or another .java or .kt file):

class MainActivity : AppCompatActivity() {
    val PERMISSION_CAMERA_REQUEST_CODE = 200
    lateinit var webView: WebView;

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        requestPermissions(this, arrayOf(Manifest.permission.CAMERA), PERMISSION_CAMERA_REQUEST_CODE)

        webView = findViewById(R.id.webview)
        webView.setWebChromeClient(object : WebChromeClient() {
            override fun onPermissionRequest(request: PermissionRequest) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    request.grant(request.resources)
                }
            }
        })

        webView.loadUrl("https://cdn.tangiblee.com/widget/index.html?id=th1791880&domain=titan.co.in&useCookies=true&price=13495.00¤cy=₹&version=3.1.1.180")
        webView.settings.javaScriptEnabled = true
    }
}

‍

Removing “Close” and ATC buttons for your App

By default, the Tangiblee widget includes “Close” and Add-to-Cart buttons.

ATC and Close buttons in our regular widget send the postMessage() from Tangiblee iFrame to the integration script on the PDP, which accomplish adding item to the cart or closing the overlay.

However, this relation between Tangiblee iFrame and integration script using postMessage() is not available within the App. As a result, we recommend removing these Tangiblee buttons from your App for the optimal user experience.

How to remove ATC and “Close” buttons from your App:

1. For removing Tangiblee ATC button:
   1. delete the price, currency, and discount parameters from the WebView’s URL.
2. Fore removing Tangiblee "Close" button:
   1. add the &externalClasses=mobile-app parameter to the WebView’s URL.

Before:

https://cdn.tangiblee.com/widget/index.html?id=zptxce&domain=www.ldj.com&useCookies=1&price=240.00&currency=$&discount=300.00&wishlist=&outOfStock=0&ifn=default&v=5.1.1

After:

https://cdn.tangiblee.com/widget/index.html?id=zptxce&domain=www.ldj.com&useCookies=1&outOfStock=0&externalClasses=mobile-app

‍

Limitations

Tangiblee does not yet have a mobile SDK. If you wish to add Tangiblee to your mobile App, please let your Account Manager know, and they will be able to provide you with options.

AR on iOS is supported from the v14.3.  On older versions than this, the Tangiblee CTA needs to be hidden.

‍