gtateth-react-native-sdk

Official React Native SDK and native UI components for g-tateth chat widget integration.

Features

• Typed client for /api/widget/* endpoints
• Session initialization and token handling
• Send/fetch messages
• Socket.IO realtime support
• Ready-to-use React Native chat widget
• In-app chat widget customization (Appearance, Behavior, Chatbot)
• Local customization persistence with AsyncStorage

Install

npm install gtateth-react-native-sdk axios socket.io-client @react-native-async-storage/async-storage uuid

Quick Start

import React from "react";
import { SafeAreaView } from "react-native";
import { GtatethChatWidget, WidgetClientConfig } from "gtateth-react-native-sdk";

const config: WidgetClientConfig = {
  baseUrl: "https://api.g-tateth.com",
  tenantDomain: "your-domain"
};

export function SupportScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <GtatethChatWidget
        config={config}
        customer={{
          firstName: "John",
          lastName: "Doe",
          email: "[email protected]"
        }}
        allowInAppCustomization
      />
    </SafeAreaView>
  );
}

Customization

You can pass initial widget settings and theme:

<GtatethChatWidget
  config={config}
  settings={{
    title: "Support Chat",
    chatbotEnabled: true,
    chatbotShowsOnline: true
  }}
  theme={{
    headerColor: "#0A4FCF",
    customerBubbleColor: "#0A4FCF"
  }}
/>

To allow runtime in-app editing:

<GtatethChatWidget
  config={config}
  allowInAppCustomization
  persistInAppCustomization
  onSettingsChanged={(settings) => {
    // Optional: sync to backend
  }}
/>

Settings Load Priority

1. Local defaults
2. Tenant settings from /api/widget/settings when useTenantSettings is true
3. Persisted in-app customization (if enabled)

Low-level API

import { WidgetClient } from "gtateth-react-native-sdk";

const client = new WidgetClient({
  baseUrl: "https://api.g-tateth.com",
  tenantDomain: "your-domain"
});

const session = await client.initSession({ sessionId: "device-session-id" });
const messages = await client.getMessages({
  conversationId: session.conversationId,
  bearerToken: session.token
});