React Native Integration (WebView)

This page provides a high-level overview of how Skin.Chat can be integrated into a React Native application.

Overview

Skin.Chat can be embedded into a React Native app using a WebView-based integration.

In this setup:

• Skin.Chat runs as a web component inside a WebView

• The native app hosts and displays the Skin.Chat UI

• User interactions and events can be forwarded from the WebView to the native layer

Skin.Chat is provided as a UI-based solution and is not available as an API-only integration.

---

Integration Approach (High-Level)

The React Native integration follows these principles:

1. WebView-based rendering Skin.Chat is rendered inside a WebView using an HTML page that loads the Skin.Chat script.

2. Haut.AI–provided setup The exact HTML structure, script URL, and configuration are provided by the Haut.AI team as part of the integration process.

3. Persistent user identification A stable external User ID must be passed from the native app to Skin.Chat to enable long-term memory and conversation continuity.

4. Event forwarding (optional) Key Skin.Chat events can be forwarded from the WebView to the native app if required.

---

Requirements

To integrate Skin.Chat into a React Native app, you will need:

• Access to the SaaS admin panel

• An active Skin.Chat instance (Chat ID)

• A persistent external User ID from your authentication system

• A React Native app that supports WebView rendering

• Camera permissions enabled (for skin analysis)

---

Setup Process

The React Native integration is implemented by following the instructions provided by the Haut.AI team.

These instructions include:

• the WebView configuration

• the HTML structure used inside the WebView

• the correct Skin.Chat script URL

• required platform permissions (iOS / Android)

Due to platform-specific requirements, the implementation details may vary between projects.

---

Long-Term Memory

For long-term memory to work correctly:

• the same external User ID must be passed to Skin.Chat on every session

• changing the User ID will result in Skin.Chat treating the user as new

---

Limitations

• Skin.Chat is embedded as a WebView, not as a native component

• API-only or backend-only integrations are not supported

• Checkout and payments are handled outside of Skin.Chat

• Available features depend on platform capabilities (camera, media permissions)

---

Support

For React Native integration:

• follow the implementation guide provided by the Haut.AI team

• contact your Haut.AI account manager or technical support for assistance

---

React Native integration guide (Full)

1) How to send external_id

SkinChat expects a stable, unique user identifier from your auth system. Pass it via the user attribute (this is the external_id):

<hautai-skinchat chat="YOUR_CHAT_ID" user="EXTERNAL_ID"></hautai-skinchat>

Notes:

• The value must be persistent for the same user across app launches/logins.

• SkinChat uses it to associate sessions and history with a specific user.

• SkinChat does not generate this id on its own.

2) Add SkinChat to a React Native app

2.1 Install WebView

Use react-native-webview.

2.2 Create a React Native wrapper component

This example:

• loads an HTML page (as a string) that embeds SkinChat

• forwards SkinChat events to React Native via postMessage

import { WebView, type WebViewMessageEvent } from "react-native-webview"

const HTML = `PUT THE HTML PAGE CONTENT HERE`

export const SkinChat = ({
  onEvent,
}: {
  onEvent: (name: string, payload?: object) => void
}) => {
  const handleMessage = (event: WebViewMessageEvent) => {
    const message = event.nativeEvent.data
    const { name, payload } = JSON.parse(message)

    onEvent(name, payload)
  }

  return (
    <WebView
      source={{
        html: HTML,
        // `https://` is required to get camera working inside WebView
        baseUrl: "<https://YOUR.DOMAIN.COM>" // or "<https://app.local>"
      }}
      originWhiteList={["*"]}
      mediaPlaybackRequiresUserAction={false}
      allowsInlineMediaPlayback
      onMessage={handleMessage}
      // Set to "grant" to avoid repetitive permission requests, especially on iOS
      mediaCapturePermissionGrantType="grant"
    />
  )
}

2.3 Prepare the HTML page for the WebView

Replace:

• SOURCE_URL_PROVIDED_BY_HAUT.AI/skinchat.js with the CDN URL provided by Haut.AI

• YOUR_CHAT_ID with your chat instance id (from Haut.AI SaaS)

• USER_ID with your app’s external_id

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
    <script type="module" src="SOURCE_URL_PROVIDED_BY_HAUT.AI/skinchat.js"></script>
  </head>
  <body>
    <hautai-skinchat chat="YOUR_CHAT_ID" user="USER_ID"></hautai-skinchat>

    <script>
      const skinchat = document.querySelector("hautai-skinchat")

      /* Event forwarding */
      skinchat.addEventListener("cartadd", ({ detail }) => postMessage("cartadd", detail))
      skinchat.addEventListener("favorite", ({ detail }) => postMessage("favorite", detail))
      skinchat.addEventListener("headeraction", ({ detail }) => postMessage("headeraction", detail))

      /* Utils */
      function postMessage(name, payload) {
        const NativeApp =
          window.ReactNativeWebView /* React Native WebView */ ||
          window.NativeApp /* Android WebView */ ||
          window.webkit.messageHandlers.NativeApp /* iOS Webview */

        NativeApp.postMessage(JSON.stringify({ name, payload }))
      }
    </script>
  </body>
</html>

2.4 Events you can handle in React Native

SkinChat can send these events:

product recommendation 

3) Expo camera permissions (if using Expo)

Update app.json / app.config.js:

{
  "expo": {
    "plugins": [
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera"
        }
      ]
    ]
  }
}

Helpful code snippets:

• Make skin analysis tool fullscreen only on mobile devices

  function updateSkinAnalysisToolContainer(sc) {
    const mediaQuery = window.matchMedia('(min-width: 48rem)');
  
    function updateCameraSelector(mq) {
      if (mq.matches) sc.removeAttribute('camera-selector');
      else sc.setAttribute('camera-selector', 'body');
    }
  
    updateCameraSelector(mediaQuery);
  
    mediaQuery.addEventListener('change', updateCameraSelector);
  }