The Dock
The Dock is the floating widget that appears in the corner of your website and product, providing users easy access to Chat and Help Center features.
What is the Dock?
The Dock is a small, customizable button that floats in the bottom-right corner of your pages. When clicked, it expands to show:
- Chat — Start a conversation with your team
- Help Center — Search and browse your knowledge base
Enabling the Dock
The Dock appears automatically when you enable at least one of its features in Project Settings:
- Go to Project Settings
- Find the Dock section
- Enable one or both:
- Chat — Display the chat support widget
- Help Center — Display the knowledge base widget
If both are enabled, the Dock serves as a unified entry point for both tools.
Customizing Appearance
Match the Dock to your brand in Project Settings:
Colors
In the Customize Dock colors section:
- Primary Color — Main button and header color
- Secondary Color — Accent and hover states
Enter colors as hex codes (e.g., #144b40).
Preview
The preview pane shows a real-time example of your Dock with the selected colors.
Controlling the Dock with JavaScript
You can programmatically control the Dock:
Open the Dock
overcentric.openDock();Close the Dock
overcentric.closeDock();Open to a Specific View
// Open directly to chat
overcentric.openDock('chat');
// Open directly to help center
overcentric.openDock('help-center');Hide the Dock
To hide the Dock on specific pages:
overcentric.hideDock();Show the Dock
overcentric.showDock();Integration Settings
The Project Settings page also controls core integration features:
| Setting | Description |
|---|---|
| Debug Mode | Log messages to browser console |
| Auto Track | Automatically track user events |
| Replay Recording | Capture session replays |
| Error Capture | Track JavaScript errors |
Toggle these settings to customize Overcentric’s behavior for your project.
Best Practices
- Match Your Brand — Use colors consistent with your site design
- Enable Both Features — Chat + Help Center provides the best user experience
- Position Consideration — The Dock appears bottom-right by default; ensure it doesn’t overlap important UI elements
- Test on Mobile — Verify the Dock works well on smaller screens