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.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.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.
identity	LovinaChatIdentity	undefined	No	Signed identity proof (HMAC) verifying the session's user. See Identity Verification.
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. See File Uploads.
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.ailovina.com",
	theme: {
		primaryColor: "#6366F1",
		fontFamily: "Inter, sans-serif",
		bubbleRadius: 16,
	},
	branding: {
		brandName: "Acme Support",
		poweredBy: false,
	},
};

Identity Verification (optional)

identity proves a session belongs to a specific user with a server-signed HMAC:

<LovinaChatWidget
	config={{
		websiteToken: "YOUR_TOKEN",
		baseUrl: "https://chat.ailovina.com",
		identity: {
			mode: "user",
			userId: "user-123",
			exp: 1735689600,
			sigHash: "server-computed-hmac-hash",
		},
	}}
/>

Option	Type	Description
mode	'user'	Identity mode. Only 'user' is available today.
userId	string	The same user ID you pass as identifier in LovinaChatUser.
exp	number	Unix timestamp (seconds) after which sigHash expires.
sigHash	string	HMAC signature computed on your server -- never in the app.

See the User Identification guide for how to compute sigHash.

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

File Uploads

File uploads are disabled by default. Enable the composer's attach button with:

<LovinaChatWidget
	config={{
		websiteToken: "your-website-token",
		baseUrl: "https://chat.ailovina.com",
		features: { enable_file_upload: true },
	}}
/>

On iOS, users can also tap "Take Photo or Video" from the file picker. Your app's ios/YourApp/Info.plist must declare NSCameraUsageDescription and NSMicrophoneUsageDescription before enabling this — without them, tapping that option crashes the app.

Example: Full Configuration

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

<LovinaChatWidget
	config={{
		websiteToken: "lvk_live_xxxx",
		baseUrl: "https://chat.ailovina.com",
		locale: "en",
		colorScheme: "dark",
		theme: {
			primaryColor: "#6366F1",
		},
		branding: {
			brandName: "Acme Support",
		},
		identity: {
			mode: "user",
			userId: "user-12345",
			exp: 1735689600,
			sigHash: "server-computed-hmac-hash",
		},
		user: {
			identifier: "user-12345",
			name: "Jane Doe",
			email: "jane@example.com",
			avatarUrl: "https://example.com/avatar.png",
			phoneNumber: "+6281234567890",
			customAttributes: {
				plan: "premium",
				signup_date: "2025-01-15",
			},
		},
	}}
	onEvent={(event) => console.log(event)}
/>;