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:
html
<!-- Lingu Widget Configuration -->
<script>
window.linguConfig = {
apiKey: 'your-api-key-here'
};
</script>
<!-- Lingu Widget Script -->
<script src="https://widget.uselingu.app/widget.js"></script>Complete Example
Here's a full HTML page with the widget integrated:
html
<!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.app/widget.js"></script>
</body>
</html>WordPress Integration
Option 1: Theme Footer
Add the code to your theme's footer.php file, just before </body>:
php
<!-- Lingu Widget -->
<script>
window.linguConfig = {
apiKey: '<?php echo esc_js(get_option('lingu_api_key')); ?>'
};
</script>
<script src="https://widget.uselingu.app/widget.js"></script>Option 2: Plugin
Use a plugin like Insert Headers and Footers or Code Snippets:
- Install the plugin
- Go to Settings → Insert Headers and Footers
- Paste the widget code in the "Footer" section
- Save changes
Shopify Integration
- Go to Online Store → Themes → Edit Code
- Open
theme.liquid - Find the closing
</body>tag - Add the widget code just before it
- Save
html
<!-- Lingu Widget -->
<script>
window.linguConfig = {
apiKey: 'your-api-key-here'
};
</script>
<script src="https://widget.uselingu.app/widget.js"></script>
</body>
</html>Async Loading
For better page performance, use async loading:
html
<script>
window.linguConfig = {
apiKey: 'your-api-key-here'
};
</script>
<script src="https://widget.uselingu.app/widget.js" async></script>Programmatic Control
Access the widget instance for custom behavior:
html
<script>
window.linguConfig = {
apiKey: 'your-api-key-here'
};
</script>
<script src="https://widget.uselingu.app/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
- Check your API key - Make sure it's correct and active
- Check the console - Open Developer Tools (F12) and look for errors
- Check for conflicts - Some ad blockers may interfere with the widget
- Verify script URL - Ensure
https://widget.uselingu.app/widget.jsis accessible
Styling Conflicts
The widget uses isolated styles with high specificity. If you experience conflicts:
- Check for global CSS reset rules
- Avoid using
!importanton elements that might overlap - The widget container has
z-index: 999999
TIP
The widget automatically handles its own styling and won't affect your page's CSS.