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
    }
}

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.