Click to Dial HubSpot CMS Module
Setup & Configuration Guide
Overview
The Click to Dial module adds a floating call button to your HubSpot pages. Visitors see an agent card with photo, name, and availability status — then tap to call directly from their phone or click to initiate a call on desktop.
Best for: Sales pages, contact pages, support centres, local business sites, and any page where you want to make it effortless for visitors to call.
Getting Started
- Open any page in the HubSpot editor.
- Search for Click to Dial in the module panel.
- Drag it onto your page.
- Enter a phone number and customise the agent card.
Field Reference
Agent Setup
| Field | What it does |
|---|---|
| Agent Name | Display name shown on the call card. Default: "Sales Team" |
| Agent Designation | Job title or role shown below the name. Default: "Sales Representative" |
| Agent Photo | Upload a headshot from the File Manager. Shows a placeholder if empty. |
| Phone Number | The phone number visitors will call. Include country code (e.g. +1234567890). Required. |
| Is Available | Toggle the agent's online/offline status. When OFF, shows the offline message. |
Content
| Field | What it does |
|---|---|
| Greeting Message | The message shown when the popup opens. |
| Call Button Text | The CTA button label. Default: "Call Now" |
| Offline Text | Message shown when the agent is marked offline. |
| Bubble Text | Short text shown next to the floating bubble. Default: "Call Us" |
Layout & Display
| Field | What it does |
|---|---|
| Bubble Style | Shape of the floating button: Circle or other styles. |
| Popup Animation | How the card appears: Slide Up or other animations. |
| Position | Left or Right side of the screen. |
| Show on Mobile | Toggle mobile visibility. Default: ON. |
| Theme | Light or Dark appearance. |
HubSpot Integration
| Field | What it does |
|---|---|
| Enable Calling SDK | Use HubSpot's native calling SDK for CRM-tracked calls (requires Sales Hub). |
| Call Source Label | The label attached to calls in HubSpot CRM. Default: "Click-to-Dial Widget" |
| Enable Tracking Event | Fire a HubSpot tracking event when a call is initiated. Default: ON. |
How It Works
- A floating bubble appears in the bottom corner of the page.
- Clicking the bubble opens the agent card with photo, name, status, and greeting.
- Clicking "Call Now" triggers a tel: link — on mobile this opens the dialer, on desktop it opens the default calling app.
- If HubSpot tracking is enabled, a custom event is logged for conversion attribution.
Tips
- Phone format: Always include the country code with + prefix (e.g. +44 for UK, +1 for US).
- Availability: Manually toggle "Is Available" to show/hide the offline message. For automatic scheduling, upgrade to Pro.
- Tracking: Enable tracking events and create a HubSpot workflow triggered by the "Click-to-Dial Widget" event for automated follow-up.
Upgrading to Pro
Need multiple agents, automatic availability scheduling, callback forms, search/directory views, or advanced animations? See the Click to Dial Pro module.