Skip to main content

Installation

Add the Lovina Chat widget to your website in minutes. Choose the method that fits your project.

Script Tag (CDN)​

The simplest approach. Paste this snippet before the closing </body> tag of your HTML page. The SDK loads asynchronously and will not block page rendering.

<!-- 1. Configure the widget -->
<script>
	window.lovinaSettings = {
		position: "right",
		locale: "en",
		theme: {
			primaryColor: "#1B2E1F",
		},
	};
</script>

<!-- 2. Load and initialize the SDK -->
<script>
	(function (d, t) {
		var BASE_URL = "https://chat.ailovina.com";
		var g = d.createElement(t);
		var s = d.getElementsByTagName(t)[0];
		g.src = BASE_URL + "/sdk/sdk.js";
		g.async = true;
		s.parentNode.insertBefore(g, s);
		g.onload = function () {
			window.lovinaChatSDK.run({
				websiteToken: "YOUR_WEBSITE_TOKEN",
				baseUrl: BASE_URL,
			});
		};
	})(document, "script");
</script>

Replace YOUR_WEBSITE_TOKEN with the token from your Lovina dashboard. The token is scoped to a single agent -- a company running multiple agents (e.g., separate assistants for different products) will have one token per agent.

npm Package​

For projects using a JavaScript bundler (Webpack, Vite, esbuild, etc.), install the package from Lovina's private Nexus npm registry, published under the @lovina scope.

You will need a Nexus account with read access to the npm-releases repository — ask your Lovina administrator, as there is no self-service signup.

First, point the @lovina scope at the registry in your project's .npmrc. This line holds no credentials, so commit it:

@lovina:registry=https://packages.ailovina.com/repository/npm-releases/

Then authenticate. npm writes the resulting token to your user config (~/.npmrc), so it never enters source control:

npm login --scope=@lovina --auth-type=legacy \
  --registry=https://packages.ailovina.com/repository/npm-releases/

--auth-type=legacy is needed because npm 9+ defaults to browser-based OAuth, which Nexus does not implement.

Then install the package:

npm install @lovina/web-chat-sdk

For CI, or if you use Yarn 2+ (which ignores .npmrc), see the React Native installation guide — the registry setup is identical for both packages.

Then in your application entry point:

import "@lovina/web-chat-sdk";

window.lovinaSettings = {
	locale: "en",
	theme: { primaryColor: "#1B2E1F" },
};

window.lovinaChatSDK.run({
	websiteToken: "YOUR_WEBSITE_TOKEN",
	baseUrl: "https://chat.ailovina.com",
});

Version Pinning​

The <script> tag always loads the latest SDK build — there is currently no way to pin the CDN-hosted loader to a specific version. Appending a query string does not change that:

<script src="https://chat.ailovina.com/sdk/sdk.js?v={version}" async></script>

This can still be useful as a cache-buster (for example, to force a browser to fetch a fresh copy after an update), but it does not select or lock in a particular SDK version.

If you need a specific, unchanging version, install the SDK via npm instead — specify the version in your package.json:

{
	"dependencies": {
		"@lovina/web-chat-sdk": "{version}"
	}
}

Verify Installation​

Open your page in a browser. You should see a chat bubble in the bottom-right corner. Click it to open the chat panel, or run this in the browser console:

window.$lovina.toggle("open");
Identity verification

A successful installation does not mean you are done if your channel will use identity verification. Lovina can move a channel's enforcement mode to required; from then on the widget still loads normally, but a visitor without a valid, server-signed identity cannot start a conversation -- their first message fails. Before that switch, set up signing as described in User Identification.

Supported Platforms​

PlatformMinimum VersionIntegration
Web (all modern browsers)ES2020+Script tag or npm
AndroidAPI 24 (Android 7.0)AAR file
iOSiOS 15.0XCFramework

Next Steps​