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

Last updated

Was this helpful?