Qonek Chat Widget Integration Guide

This guide explains how to embed the Qonek Chat Widget into your website using a simple HTML script.

🧩 1. Add a Container Element

Add a container element with a specific ID where the widget will be mounted.

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

Replace your-container-id with any ID you prefer.

📥 2. Insert the Widget Script

Paste the following script into your main HTML file, ideally right before the closing </body> tag. This ensures the widget loads properly.

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/chat-widget-qonek@latest/dist/chat-widget.umd.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    ChatWidget.init({
      containerId: 'your-container-id', // Change to match your HTML element ID
      buttonWidth: 100, // Customize button width
      buttonHeight: 100, // Customize button height
      idWidget: 'YOUR_WIDGET_ID',
      groupId: 'YOUR_GROUP_ID'
    });
  });
</script>

Replace:

• YOUR_WIDGET_ID with your actual widget ID
• YOUR_GROUP_ID with your Qonek groupId

💾 3. Save Your File

After editing your HTML file, save and refresh your website.

✅ 4. Verify Widget is Working

Open your website and ensure the Qonek Chat Widget appears as expected.

If everything is configured correctly, the widget should load instantly.

📌 Notes

• Make sure the scripts are placed after the container element in the HTML structure.
• If you're using a modern framework like Next.js, React, or Vue, placement may differ.

Need help? Feel free to reach out!