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-prod.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-prod.ailovina.com',
});

Version Pinning​

To pin a specific version of the SDK via CDN, include the version number in the script URL:

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

With npm, 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');

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​