The Dock

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:

  1. Go to Project Settings
  2. Find the Dock section
  3. 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

  1. Match Your Brand — Use colors consistent with your site design
  2. Enable Both Features — Chat + Help Center provides the best user experience
  3. Position Consideration — The Dock appears bottom-right by default; ensure it doesn’t overlap important UI elements
  4. Test on Mobile — Verify the Dock works well on smaller screens