Chatbot Widget Demo

See how the MyNQ AI chatbot widget looks and works when embedded on a website. The chat button will appear in the bottom-right corner.

Live Demo

This page demonstrates the chatbot widget in action. Look for the blue chat button in the bottom-right corner!

💬 Try the Demo Chat

• Click the blue chat button in the bottom-right corner
• Try asking: "Hello", "What is AI?", or "How do chatbots work?"
• The demo bot responds with pre-programmed answers
• Your real chatbots will use your custom content and AI

Widget Features:

✅ Floating chat button
✅ Expandable chat window
✅ Custom colors and branding
✅ Mobile responsive design
✅ Typing indicators
✅ Message history

Customization Options:

🎨 Primary & secondary colors
📝 Custom welcome messages
📍 Position (bottom-right/left)
📏 Custom width and height
🏷️ Custom title and subtitle
💬 Custom placeholder text

Demo Embed Code

Copy this code and paste it into any HTML page to add the demo chatbot

<!-- MyNQ AI Chatbot Widget -->
<div id="mynq-chatbot-demo"></div>
<script>
  (function() {
    const script = document.createElement('script');
    script.src = 'https://your-domain.com/js/chatbot-widget.js';
    script.onload = function() {
      window.MynqChatbot.init({
        chatbotId: 'demo',
        containerId: 'mynq-chatbot-demo',
        primaryColor: '#3b82f6',
        secondaryColor: '#ffffff',
        apiUrl: 'https://your-api-domain.com'
      });
    };
    document.head.appendChild(script);
  })();
</script>

How to use:

Copy the embed code above
Paste it into your HTML page before the closing </body> tag
Replace chatbotId: 'demo' with your actual chatbot ID
Customize colors and other options as needed
Save and publish your page

Integration Examples

Common ways to integrate the chatbot widget into different platforms

📄 Static HTML Website

Add the embed code directly to your HTML files before the closing </body> tag.

🏗️ WordPress

Use a plugin like "Insert Headers and Footers" or add to your theme's footer.php file.

🛒 Shopify

Add to your theme's theme.liquid file before </body> or use theme customizer.

⚡ React/Next.js

Use useEffect hook to load the script dynamically or add to your _document.js file.

Ready to Create Your Own Chatbot?

Build a custom AI chatbot with your own content, documents, and branding