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.lovina.app';
    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.

npm Package

For projects using a JavaScript bundler (Webpack, Vite, esbuild, etc.):

npm install lovina-chat-sdk

Then in your application entry point:

import 'lovina-chat-sdk';

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

window.lovinaChatSDK.run({
  websiteToken: 'YOUR_WEBSITE_TOKEN',
  baseUrl: 'https://chat.lovina.app',
});

Version Pinning

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

<script src="https://chat.lovina.app/sdk/sdk.js?v=1.0.0" async></script>

With npm, specify the version in your package.json:

{
  "dependencies": {
    "lovina-chat-sdk": "1.0.0"
  }
}

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

Platform	Minimum Version	Integration
Web (all modern browsers)	ES2020+	Script tag or npm
Android	API 24 (Android 7.0)	Gradle / JitPack
iOS	iOS 15.0	Swift Package Manager

Next Steps

• Configuration Reference -- customize the widget appearance and behavior.
• JavaScript API -- control the widget programmatically.