Skip to main content

Quick Start: Web

Get the Lovina chat widget running on your website in under 5 minutes.

Step 1: Add the Embed Snippet​

Paste the following code before the closing </body> tag of your HTML page:

<!-- 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>

Step 2: Configure​

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.

Customize the widget by editing window.lovinaSettings:

window.lovinaSettings = {
  position: 'right',                    // 'right' or 'left'
  displayMode: 'popup',                 // 'popup', 'sidebar', or 'fullscreen'
  colorScheme: 'auto',                  // 'light', 'dark', or 'auto'
  locale: 'en',                         // 3 languages supported

  branding: {
    brandName: 'Acme Support',           // Header title
    logoUrl: '/logo.svg',                // Custom logo
    bubbleIconUrl: '/icon.svg',          // Custom bubble icon
    poweredBy: false,                    // Hide "Powered by Lovina"
  },

  theme: {
    primaryColor: '#1B2E1F',             // One color generates a full palette
  },
};

Step 3: See It Working​

Open your page in a browser. You should see a chat bubble in the bottom-right corner. Click it to open the chat panel.

Verify from the console:

// Open the chat programmatically
window.$lovina.toggle('open');

// Check if the widget has loaded
console.log(window.$lovina.hasLoaded); // true

Alternative: npm Package​

For projects using a JavaScript bundler (Webpack, Vite, esbuild), install from Lovina's private Nexus npm registry. Point the @lovina scope at the registry in your .npmrc and authenticate first:

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

--auth-type=legacy is required on npm 9+. See the web installation guide for CI and Yarn Berry setup.

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

JavaScript API​

Once loaded, control the widget programmatically via window.$lovina:

window.$lovina.toggle('open');           // Open chat
window.$lovina.toggle('close');          // Close chat
window.$lovina.setUser('id', { name: 'Jane', email: 'j@x.com' });
window.$lovina.setLocale('id');          // Switch language
window.$lovina.setColorScheme('dark');   // Dark mode
window.$lovina.reset();                  // Clear session
window.$lovina.destroy();               // Remove SDK completely

Events​

Listen for widget events on the window object:

window.addEventListener('lovina:ready', () => { /* SDK loaded */ });
window.addEventListener('lovina:on-message', (e) => { /* New message */ });
window.addEventListener('lovina:opened', () => { /* Chat opened */ });
window.addEventListener('lovina:closed', () => { /* Chat closed */ });

Next Steps​