What is Dock Mode?
Dock Mode is an alternative display option for the Qualimero web chat. It creates a sticky search bar that:
Stays fixed to your page bottom
Provides instant access to your AI Agent
Blends seamlessly into your website design
Works great for help centers, knowledge bases, and support pages
How to Enable Dock Mode
Step 1: Locate Your Configuration Script
Find the Qualimero configuration block in your website's code:
<script> window.qualimeroConfig = { phoneNumber: "xxx", aid: "your-account-id" }; </script> <script defer src="https://cdn.qualimero.com/qualimero-widget-1.0.js"></script>Step 2: Add the mode Parameter
Add mode: "dock" to the configuration object:
<script> window.qualimeroConfig = { mode: "dock", phoneNumber: "xxx", aid: "your-account-id" }; </script> <script defer src="https://cdn.qualimero.com/qualimero-widget-1.0.js"></script>Save your changes and refresh your website – that's it!
Configuration Parameters
Required Parameters
Parameter | Description |
| Set to |
| Your Qualimero account ID |
| Your WhatsApp business number (use |
Optional Style Parameters
You can customize the appearance with additional style options:
<script> window.qualimeroConfig = { mode: "dock", phoneNumber: "xxx", aid: "your-account-id", style: { iconColor: "#ffffff", buttonColor: "#a770ef" } }; </script>Best Use Cases
Dock Mode works particularly well for:
Help Centers – Provide instant search across your support documentation
Knowledge Bases – Let users find answers without leaving the page
Product Documentation – Make technical information easily searchable
FAQ Pages – Offer an intelligent alternative to static lists
Support Portals – Give users a persistent way to ask questions
Dock Mode vs. Standard Chat Bubble
Feature | Dock Mode | Standard Bubble |
Display Type | Sticky search bar | Floating chat icon |
Position | Bottom (full width) | Bottom corner |
Best For | Help centers, knowledge bases, Productsearches |
|
User Experience | Search-focused | Conversation-focused |
Visibility | Always visible | Minimizable |
Complete Implementation Example
<!DOCTYPE html> <html> <head> <title>My Help Center</title> <!-- Qualimero Dock Mode Configuration --> <script> window.qualimeroConfig = { mode: "dock", phoneNumber: "xxx", aid: "your-account-id", style: { iconColor: "#ffffff", buttonColor: "#a770ef" } }; </script> <script defer src="https://cdn.qualimero.com/qualimero-widget-1.0.js"></script> </head> <body> <!-- Your website content --> </body> </html>Questions?
If you have any questions about implementation, reach out to our support team or message us in the chat.