React Native Configuration

LovinaChatConfig

The LovinaChatConfig interface defines all configuration options for the chat widget.

const config: LovinaChatConfig = {
  websiteToken: 'your-website-token',
  baseUrl: 'https://chat-prod.ailovina.com',
  locale: 'en',
  colorScheme: 'auto',
  user: undefined,
  theme: undefined,
  branding: undefined,
  texts: undefined,
  features: undefined,
};

Fields

Parameter	Type	Default	Required	Description
websiteToken	string	--	Yes	Your Lovina website token for this agent. Obtained from the Lovina dashboard -- each agent has its own token.
baseUrl	string	--	Yes	Base URL of your Lovina instance (e.g., https://chat-prod.ailovina.com).
locale	string	"id"	No	Widget locale code. Supported values include "id", "en", "ar".
colorScheme	'light' | 'dark' | 'auto'	"auto"	No	Dark mode preference for the widget. "auto" follows the system theme.
user	LovinaChatUser	undefined	No	Pre-identified user to associate with the conversation. See below.
theme	LovinaChatTheme	undefined	No	Theme color, typography, and sizing overrides. Only primaryColor is required in practice -- see Theming.
branding	LovinaChatBranding	undefined	No	White-label branding overrides (logo, brand name, "powered by" footer).
texts	Record<string, unknown>	undefined	No	UI string overrides, keyed by translation key.
features	Partial<LovinaFeatureFlags>	undefined	No	Feature-flag overrides.
hideKeyboardAccessoryBar	boolean	true	No	iOS only. Suppress WebKit's keyboard form-assistant bar while the chat widget's WebView is focused. Scoped to this widget's WebView instance only.

Theming

Only theme.primaryColor is required in practice -- every other color is auto-generated by the widget to meet WCAG AA contrast:

const config: LovinaChatConfig = {
  websiteToken: 'your-website-token',
  baseUrl: 'https://chat-prod.ailovina.com',
  theme: {
    primaryColor: '#6366F1',
    fontFamily: 'Inter, sans-serif',
    bubbleRadius: 16,
  },
  branding: {
    brandName: 'Acme Support',
    poweredBy: false,
  },
};

LovinaChatUser

The LovinaChatUser interface represents a pre-identified user.

Parameter	Type	Required	Description
identifier	string	Yes	Unique user ID in your system.
name	string	No	Display name.
email	string	No	Email address.
avatarUrl	string	No	URL to the user's avatar image.
identifierHash	string	No	HMAC hash for identity verification. Generate server-side.
phoneNumber	string	No	Phone number (E.164 format recommended).
customAttributes	Record<string, unknown>	No	Arbitrary key-value metadata attached to the contact.

ChatEvent

The ChatEvent type is a discriminated union. Use the type field to determine the event kind.

type ChatEvent =
  | { type: 'loaded'; authToken?: string }
  | { type: 'messageReceived'; message: Record<string, unknown> }
  | { type: 'unreadCountChanged'; count: number }
  | { type: 'closed'; reason?: string }
  | { type: 'error'; code: string; message: string };

LovinaChatWidgetRef

Imperative methods exposed via React.forwardRef:

interface LovinaChatWidgetRef {
  setUser: (identifier: string, user: Partial<Omit<LovinaChatUser, 'identifier'>>) => void;
  setLocale: (locale: string) => void;
  setColorScheme: (mode: 'light' | 'dark' | 'auto') => void;
  toggle: (show: boolean) => void;
  reset: () => void;
  reload: () => void;
}

Example: Full Configuration

import { LovinaChatWidget } from '@lovina/react-native-chat-sdk';

<LovinaChatWidget
  config={{
    websiteToken: 'ws-tok-abc123',
    baseUrl: 'https://chat-prod.ailovina.com',
    locale: 'en',
    colorScheme: 'dark',
    theme: {
      primaryColor: '#6366F1',
    },
    branding: {
      brandName: 'Acme Support',
    },
    user: {
      identifier: 'user-12345',
      name: 'Jane Doe',
      email: 'jane@example.com',
      avatarUrl: 'https://example.com/avatar.png',
      identifierHash: 'hmac-sha256-hash',
      phoneNumber: '+6281234567890',
      customAttributes: {
        plan: 'premium',
        signup_date: '2025-01-15',
      },
    },
  }}
  onEvent={(event) => console.log(event)}
/>