Integración para aplicaciones móviles

Cómo integrarse con aplicaciones móviles:

Una vez que se abra la pantalla de detalles del producto, tendrás que validar el SKU. Se debe enviar una solicitud de API al siguiente punto final:

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

Dónde SKU 1 es la SKU de la variante actual, un dominio debe ser tu dominio.

Una vez que el usuario haga clic en el PDP, se abrirá una pantalla con el componente WebView y pase la URL en el siguiente formato:

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

Configuración de la aplicación

En caso de que necesitemos mostrar AR, se deben especificar los permisos de la cámara.

iOS‍

1. En info.plist, debes añadir el siguiente código (haz clic con el botón derecho y selecciona «Ver como código fuente» para añadirlo):

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

2. Cree un WebView y defina el campo AllowsInlineMediaPlayback de la configuración web en true.

Ejemplo de código:

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. Agregue al archivo de manifiesto:

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

2. Agregue un elemento WebView a activity_main.xml (u otro archivo.xml)

Ejemplo de código:

<?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. Añada el siguiente código a MainActivity.kt (u otro archivo .java o .kt):

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

Limitaciones

Tangiblee aún no tiene un SDK móvil. Si deseas agregar Tangiblee a tu aplicación móvil, comunícaselo a tu administrador de cuentas y él podrá ofrecerte opciones.

AR en iOS es compatible con la versión 14.3. En versiones anteriores a esta, la CTA de Tangiblee debe estar oculta.