HTML & JavaScript Integration

Add the LILA widget to any website. This guide shows you how to integrate LILA using pure HTML and JavaScript. No frameworks required. Works with any website, including React, Vue, and Angular applications.

Installation

Add the widget script to your page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>

  <!-- Load LILA widget -->
  <script type="module" src="https://embed.getlila.one/loader.js"></script>
</head>
<body>
  <h1>Welcome to My Site</h1>

  <!-- Minimal widget setup -->
  <lila-widget
    api-key="your-api-key"
    jwt-token="your-jwt-token">
  </lila-widget>
</body>
</html>

The widget will appear as a launcher icon in the bottom-right corner (default position).

Basic Integration Examples

Development Setup (Basic Auth)

For testing and development environments:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LILA Widget Demo</title>
  <script type="module" src="https://embed.getlila.one/loader.js"></script>
</head>
<body>
  <header>
    <h1>My Dashboard</h1>
  </header>

  <main>
    <p>Click the chat icon to ask questions about your data.</p>
  </main>

  <!-- Widget with user details -->
  <lila-widget
    api-key="your-api-key"
    user-id="demo-user"
    user-role="customer"
    user-email="[email protected]"
    user-name="Demo User">
  </lila-widget>
</body>
</html>

Production Setup (JWT Auth)

For production with authenticated users, generate JWT tokens server-side:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <script type="module" src="https://embed.getlila.one/loader.js"></script>
</head>
<body>
  <h1>Dashboard</h1>

  <!-- Widget with JWT authentication -->
  <lila-widget
    api-key="your-api-key"
    jwt-token="<?php echo $jwtToken; ?>">
  </lila-widget>
</body>
</html>

The JWT token should contain user information:

{
  "user_id": "user_12345",
  "user_role": "customer",
  "user_email": "[email protected]",
  "user_name": "John Doe"
}

See JWT Authentication Guide for token generation examples.

Customization Options

Widget Position

Control where the launcher appears:

<!-- Widget on left side -->
<lila-widget
  api-key="your-api-key"
  user-id="user-123"
  position="left">
</lila-widget>

<!-- Widget on right side (default) -->
<lila-widget
  api-key="your-api-key"
  user-id="user-123"
  position="right">
</lila-widget>

Drawer Behavior

Control where the sessions drawer slides from:

<!-- Drawer from bottom (mobile-like) -->
<lila-widget
  api-key="your-api-key"
  user-id="user-123"
  drawer-mode="bottom">
</lila-widget>

<!-- Drawer from left side -->
<lila-widget
  api-key="your-api-key"
  user-id="user-123"
  position="left"
  drawer-mode="left">
</lila-widget>

<!-- Drawer from right side -->
<lila-widget
  api-key="your-api-key"
  user-id="user-123"
  position="right"
  drawer-mode="right">
</lila-widget>

Theme Customization

<!-- Light theme -->
<lila-widget
  api-key="your-api-key"
  user-id="user-123"
  theme="light">
</lila-widget>

<!-- Dark theme -->
<lila-widget
  api-key="your-api-key"
  user-id="user-123"
  theme="dark">
</lila-widget>

If not specified, the widget auto-detects theme from system preference.

Custom Size

<lila-widget
  api-key="your-api-key"
  user-id="user-123"
  width="500px"
  height="80vh">
</lila-widget>

Dynamic Configuration

Show the widget only to logged-in users by loading it conditionally.

Loading Widget Conditionally

Load widget only for authenticated users:

<div id="widget-container"></div>

<script>
  // Check if user is logged in
  if (isUserLoggedIn()) {
    const widget = document.createElement('lila-widget');
    widget.setAttribute('api-key', 'your-api-key');
    widget.setAttribute('user-id', getCurrentUserId());
    widget.setAttribute('user-role', getUserRole());

    document.getElementById('widget-container').appendChild(widget);
  }
</script>

Single Page Applications (SPA)

Use LILA with React, Vue, or Angular apps using vanilla JavaScript:

<!-- In your index.html -->
<head>
  <script type="module" src="https://embed.getlila.one/loader.js"></script>
</head>

<!-- Add widget once, it persists across route changes -->
<body>
  <div id="app"></div>

  <lila-widget
    api-key="your-api-key"
    jwt-token="your-jwt-token">
  </lila-widget>
</body>

The widget remains visible across route changes in SPAs.

Complete Example

Putting it all together with best practices:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>E-commerce Dashboard</title>

  <!-- Preconnect to improve performance -->
  <link rel="preconnect" href="https://embed.getlila.one">

  <!-- Load widget -->
  <script type="module" src="https://embed.getlila.one/loader.js"></script>
</head>
<body>
  <header>
    <h1>Store Analytics</h1>
  </header>

  <main>
    <div id="dashboard">
      <!-- Your dashboard content -->
    </div>
  </main>

  <!-- LILA Widget -->
  <lila-widget
    api-key="your-api-key"
    jwt-token="<?php echo $jwtToken; ?>"
    position="right"
    drawer-mode="right"
    theme="light"
    width="450px"
    height="90vh">
  </lila-widget>
</body>
</html>

Important Notes

Widget Behavior

  • Session Persistence: Chat sessions are stored server-side and persist across page reloads (same user_id).

Security

Troubleshooting

LILA widget troubleshooting. Check these common issues.

Widget Not Appearing

  1. Check browser console for errors
  2. Verify script loaded: Look for https://embed.getlila.one/loader.js in Network tab
  3. Verify element exists: Run document.querySelector('lila-widget') in console
  4. Check attributes are set correctly (api-key, jwt-token or user-id)

WebSocket Connection Errors

  1. Verify domain is whitelisted in Project Settings
  2. Check browser console for WebSocket errors
  3. Verify API key is correct

Sessions Not Persisting

  1. Ensure user-id is consistent across page loads
  2. Check browser isn’t blocking cookies/localStorage
  3. Verify same api-key is used

Theme Not Applying

  1. Verify theme attribute is set: theme="light" or theme="dark"
  2. Clear browser cache and reload

Next Steps