How to Embed the Web Chat on Your Website

This guide explains how to embed the Qualimero web chat directly into your website using a custom container and script integration. This method gives you full control over where and how the chat appears on your page.

📦 Step 1: Create a Container

First, you need to create a container element where the chat will be embedded. Add the following HTML element to your page where you want the chat to appear:

<div id="qualimero-chat-client"></div>

This container will hold the entire chat interface. You can style it with CSS to control its dimensions and positioning.

⚙️ Step 2: Add the Configuration Script

Next, add the Qualimero configuration script to your website's header or footer. This script initializes the chat with your specific settings:

<!-- AI driven agents by www.qualimero.com -->
<script>
  window.qualimeroConfig = {
    phoneNumber: "xxx",
    aid: "xxx",
    // Optional
    style: {
      iconColor: "#ffffff",
      buttonColor: "#a770ef"
    }
  };
</script>
<script defer src="https://cdn.qualimero.com/qualimero-embedded-1.0.js"></script>

🔧 Configuration Parameters

Required Parameters:

aid: Your account ID (provided by Qualimero)
phoneNumber: Your WhatsApp business number (if WhatsApp is active), otherwise leave as "xxx"

Optional Style Parameters:

iconColor: The color of icons inside the chat (hex code)
buttonColor: The primary button color matching your brand (hex code)

Customize these colors to match your corporate identity and brand guidelines.

📋 Complete Example

Here's a complete working example:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  
  <!-- Qualimero Configuration -->
  <script>
    window.qualimeroConfig = {
      phoneNumber: "+49123456789",
      aid: "your-account-id-here",
      style: {
        iconColor: "#ffffff",
        buttonColor: "#a770ef"
      }
    };
  </script>
  <script defer src="https://cdn.qualimero.com/qualimero-embedded-1.0.js"></script>
</head>
<body>
  
  <!-- Your page content -->
  <h1>Welcome to our website</h1>
  
  <!-- Chat Container -->
  <div id="qualimero-chat-client"></div>
  
</body>
</html>

⚠️ Important: Avoid Widget Conflicts

Make sure you do not have the Qualimero Web Widget installed on pages where you use the embedded chat. Running both simultaneously will cause display errors and conflicts.

Choose one integration method per page:

Use the Web Widget for floating chat bubbles
Use the Embedded Chat for inline, page-integrated chat experiences

🎨 Styling Tips

You can apply custom CSS to the container to control its appearance:

#qualimero-chat-client {
  width: 100%;
  max-width: 500px;
  height: 600px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

✅ Checklist

Before going live, make sure you've completed these steps:

✓ Added the container <div id="qualimero-chat-client"></div>
✓ Inserted the configuration script with your correct aid
✓ Set the phoneNumber if using WhatsApp
✓ Customized brand colors in the style object
✓ Verified that the Web Widget is not active on the same page
✓ Tested the chat on desktop and mobile devices

🚀 Next Steps

Once embedded, the chat will automatically connect to your configured AI Agent and start serving your users. You can track engagement through your Qualimero dashboard and optimize based on conversation data.

📞 Need Help?

If you're experiencing issues with the embedded chat or need assistance with custom implementations, reach out to our support team. We're here to help you get set up quickly.