Click to Dial Pro CMS Module

Overview

Click to Dial Pro is the full-featured version with multi-agent support, automatic availability scheduling by timezone, callback forms, team directories with search, and 9 bubble styles with 14 popup animations.

What's Different from the Standard Version?

Feature	Standard	Pro
Agents	1	Up to 20
Agent mode	Single only	Single or Directory
Availability	Manual toggle	Automatic timezone-based scheduling
Callback form	—	HubSpot form for offline callback requests
Directory view	—	Searchable team list with filters
Bubble styles	1	9 styles
Popup animations	1	14 animations
Auto-show popup	—	Automatically open after X seconds
Custom CSS	—	Inject custom styles

Getting Started

Open any page in the HubSpot editor.
Search for Click to Dial Pro in the module panel.
Drag it onto your page and configure agents.

Pro-Only Fields

Mode & General

Field	What it does
Agent Mode	Single — show one agent at a time. Directory — show a searchable team list.
Routing Mode	Visitor Chooses — visitor picks an agent. Automatic — routes to the first available agent.
Directory Title	Heading for the team directory. Default: "Our Team"
Enable Search	Show a search bar to filter agents by name.
Auto-show Popup	Automatically open the popup after a delay.
Auto-show Delay	Seconds to wait before auto-opening. Default: 3.

Agents (Repeater — up to 20)

Field	What it does
Timezone	The agent's timezone (e.g. "America/New_York"). Used for automatic availability.
Availability Schedule	JSON-based day/hour schedule. Define available hours for each day of the week.
Online Text	Custom text when agent is available. Default: "Available Now"
Offline Text	Custom text when agent is unavailable. Default: "Currently Offline"

Availability Schedule Format

Use this JSON format to define working hours per day. Set a day to null to mark it as unavailable. Times are in 24-hour format in the agent's timezone.

{"mon":{"start":"09:00","end":"17:00"},"tue":{"start":"09:00","end":"17:00"},"wed":{"start":"09:00","end":"17:00"},"thu":{"start":"09:00","end":"17:00"},"fri":{"start":"09:00","end":"17:00"},"sat":null,"sun":null}

Content (Pro additions)

Field	What it does
Offline Message	The message shown when all agents are offline.
Callback Form	Select a HubSpot form for visitors to request a callback when no agents are available.

Bubble & Popup (Pro additions)

Field	What it does
Bubble Style	9 options: Circle, Square, Rounded Square, Pill, Stadium, Minimal, Floating Card, Gradient, and Outline.
Icon Animation	Continuous animation: None, Pulse, Shake, Bounce, Ring, or Glow.
Popup Animation	14 entrance animations: Slide Up, Slide Down, Slide Left, Slide Right, Fade, Scale, Flip, Rotate, Bounce In, Elastic, and more.
Device Visibility	Show on All devices, Mobile Only, or Desktop Only.

Example: Sales Team Directory

Agent	Role	Phone	Timezone	Hours
Sarah Chen	Enterprise Sales	+14155551234	America/Los_Angeles	Mon-Fri 8am-6pm
James Wilson	Mid-Market Sales	+12125551234	America/New_York	Mon-Fri 9am-5pm
Emma Fischer	EMEA Sales	+442071234567	Europe/London	Mon-Fri 9am-5pm
Raj Patel	APAC Sales	+6512345678	Asia/Singapore	Mon-Fri 9am-6pm

Tips

Timezone-aware: The module checks the current time against each agent's timezone automatically — no manual toggling needed.
Callback workflows: Connect the callback form to a HubSpot workflow that creates a task for the agent and sends a confirmation email to the visitor.
Auto-show: Use the auto-show feature on high-intent pages (pricing, demo request) to proactively offer a call after 3–5 seconds.