Skip to content
English
  • There are no suggestions because the search field is empty.

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

  1. Open any page in the HubSpot editor.
  2. Search for Click to Dial in the module panel.
  3. Drag it onto your page.
  4. 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

  1. A floating bubble appears in the bottom corner of the page.
  2. Clicking the bubble opens the agent card with photo, name, status, and greeting.
  3. Clicking "Call Now" triggers a tel: link — on mobile this opens the dialer, on desktop it opens the default calling app.
  4. 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.