Integration für mobile Apps

So integrieren Sie mobile Apps:

Sobald der Bildschirm mit den Produktdetails geöffnet ist, müssen Sie die SKU validieren. Eine API-Anfrage sollte an den folgenden Endpunkt gesendet werden:

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

Wo Artikelnummer 1 ist die aktuelle Variations-SKU, eine Domain sollte Ihre Domain sein.

Sobald der Benutzer auf das PDP klickt, sollte ein Bildschirm mit der WebView-Komponente geöffnet werden. Übergeben Sie die URL im folgenden Format:

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

Konfiguration der App

Falls wir AR zeigen müssen, sollten Kameraberechtigungen angegeben werden.

iOS‍

1. In info.plist müssen Sie den folgenden Code hinzufügen (klicken Sie mit der rechten Maustaste und wählen Sie „Als Quellcode anzeigen“, um ihn hinzuzufügen):

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

2. Erstellen Sie ein WebView und setzen Sie das Feld allowsInlineMediaPlayback in der WebConfiguration auf true.

Code-Beispiel:

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. Zur Manifestdatei hinzufügen:

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

2. Fügen Sie ein WebView-Element zu activity_main.xml (oder einer anderen XML-Datei) hinzu

Code-Beispiel:

<?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. Fügen Sie den folgenden Code zu MainActivity.kt (oder einer anderen .java- oder .kt-Datei) hinzu:

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

Einschränkungen

Tangiblee hat noch kein SDK für Mobilgeräte. Wenn Sie Tangiblee zu Ihrer mobilen App hinzufügen möchten, teilen Sie dies bitte Ihrem Account Manager mit, damit er Ihnen Optionen anbieten kann.

AR auf iOS wird ab Version 14.3 unterstützt. In älteren Versionen als dieser muss der Tangiblee-CTA versteckt werden.