HTML Integration

Add the Lingu widget to any static HTML website with just a few lines of code.

Basic Setup

Add this code before the closing </body> tag:

<!-- Lingu Widget Configuration -->
<script>
  window.linguConfig = {
    apiKey: 'your-api-key-here'
  };
</script>

<!-- Lingu Widget Script -->
<script src="https://widget.uselingu.com/widget.js"></script>

Complete Example

Here's a full HTML page with the widget integrated:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>Click the chat button in the bottom-right corner to get help!</p>

  <!-- Lingu Widget Configuration -->
  <script>
    window.linguConfig = {
      apiKey: 'lingu_abc123def456ghi789jkl',
      autoOpen: false
    };
  </script>

  <!-- Lingu Widget Script -->
  <script src="https://widget.uselingu.com/widget.js"></script>
</body>
</html>

WordPress Integration

Option 1: Theme Footer

Add the code to your theme's footer.php file, just before </body>:

<!-- Lingu Widget -->
<script>
  window.linguConfig = {
    apiKey: '<?php echo esc_js(get_option('lingu_api_key')); ?>'
  };
</script>
<script src="https://widget.uselingu.com/widget.js"></script>

Option 2: Plugin

Use a plugin like Insert Headers and Footers or Code Snippets:

1. Install the plugin
2. Go to Settings → Insert Headers and Footers
3. Paste the widget code in the "Footer" section
4. Save changes

Shopify Integration

1. Go to Online Store → Themes → Edit Code
2. Open theme.liquid
3. Find the closing </body> tag
4. Add the widget code just before it
5. Save

<!-- Lingu Widget -->
<script>
  window.linguConfig = {
    apiKey: 'your-api-key-here'
  };
</script>
<script src="https://widget.uselingu.com/widget.js"></script>
</body>
</html>

Async Loading

For better page performance, use async loading:

<script>
  window.linguConfig = {
    apiKey: 'your-api-key-here'
  };
</script>
<script src="https://widget.uselingu.com/widget.js" async></script>

Programmatic Control

Access the widget instance for custom behavior:

<script>
  window.linguConfig = {
    apiKey: 'your-api-key-here'
  };
</script>
<script src="https://widget.uselingu.com/widget.js"></script>

<script>
  // Wait for widget to load
  window.addEventListener('load', function() {
    // Access the widget instance
    const widget = window.LinguWidget;
    
    // You can create additional instances if needed
    // const customWidget = new LinguWidget();
  });
</script>

Troubleshooting

Widget Not Appearing

1. Check your API key - Make sure it's correct and active
2. Check the console - Open Developer Tools (F12) and look for errors
3. Check for conflicts - Some ad blockers may interfere with the widget
4. Verify script URL - Ensure https://widget.uselingu.com/widget.js is accessible

Styling Conflicts

The widget uses isolated styles with high specificity. If you experience conflicts:

1. Check for global CSS reset rules
2. Avoid using !important on elements that might overlap
3. The widget container has z-index: 999999

TIP

The widget automatically handles its own styling and won't affect your page's CSS.