HubSpot CMS: Implementing a High-Converting "Rich CTA" Module with Shine Effects

Purpose and Benefits

The primary goal of this module is to capture user attention and reduce the psychological barrier to clicking.

Key Benefits:

• Attention-Grabbing: A "Shine" animation runs across the button every 4 seconds, naturally drawing the eye to the conversion point.
• Information Density: You can include a thumbnail image, top text (microcopy), and main text. This tells the user exactly what they are getting (e.g., a PDF cover) before they click.
• Hybrid Operation: You can switch between "HubSpot CTA Mode" (for tracking views/clicks via HubSpot tools) and "Custom Mode" (for full design freedom within the page editor).
• No-Code Styling: Colors for the default state, hover state, and borders can be customized directly in the editor to match your brand.

Use Cases

This design is ideal for high-priority actions where you want to stand out:

• Whitepaper/E-book Downloads
  • Thumbnail: PDF Cover Image
  • Top Text: "Free Guide"
  • Main Text: "Download the 2024 Report"
• Webinar Registration
  • Thumbnail: Speaker's Photo
  • Top Text: "Live on Oct 10th"
  • Main Text: "Reserve Your Seat"
• Product Demos
  • Thumbnail: Product Logo
  • Top Text: "30-Day Free Trial"
  • Main Text: "Get Started Now"

How to Use in HubSpot CMS

Once implemented in the Design Manager, here is how to use it in the Page Editor:

1. Select Button Type

First, choose how you want to manage the button:

• Custom (Use module fields): Recommended. You set the image, text, and link directly in this module.
• HubSpot CTA (Select existing): Select a CTA created in HubSpot's Marketing > Lead Capture > CTAs tool.
  • Note: Even if you select a native HubSpot CTA, the "Shine" and "Hover" CSS effects defined in this module will still apply to it.

2. Configure Content (If "Custom" is selected)

If you chose "Custom", the following fields will appear:

• Link: Set the destination URL (External, Content, File, Email, etc.).
• Thumbnail Image: Select the image to appear on the left side (e.g., document cover).
• Top Text: Small text above the main label (e.g., "Limited Time").
• Main Text: The primary button label.

3. Adjust Styles

In the "Styles" group, you can customize the look without coding:

• Colors: Set Base and Hover colors for both the background and text.
• Border: Adjust the border color and thickness.
• Text Size: Independently adjust the font size for the Top Text and Main Text.

Module Source Code

Create a new module in the HubSpot Design Manager and paste the following code into the respective files.

1. fields.json

This file uses the visibility property to show/hide fields based on the "Button Type" selection, keeping the editor clean.

[
 {
  "choices": [
   [
    "custom",
    "Custom (Use module fields)"
   ],
   [
    "cta",
    "HubSpot CTA (Select existing)"
   ]
  ],
  "display": "select",
  "display_width": null,
  "id": "86abe95d-12cc-4468-0761-41f0be18f1d6",
  "label": "Button Type",
  "locked": false,
  "multiple": false,
  "name": "button_type",
  "preset": null,
  "reordering_enabled": true,
  "required": false,
  "type": "choice"
 },
 {
  "display_width": null,
  "id": "de5d23b2-d299-d748-e214-c43db3a1526b",
  "label": "Select CTA",
  "locked": false,
  "name": "cta_field",
  "required": false,
  "type": "cta",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "cta",
   "operator": "EQUAL"
  }
 },
 {
  "default": {
   "url": {
    "content_id": null,
    "type": "EXTERNAL",
    "href": ""
   },
   "open_in_new_tab": false,
   "no_follow": false
  },
  "display_width": null,
  "id": "4ed2abf9-80f9-3a59-7029-e2ff4b992b2f",
  "label": "Link",
  "locked": false,
  "name": "link_field",
  "required": false,
  "show_advanced_rel_options": false,
  "supported_types": [
   "EXTERNAL",
   "CONTENT",
   "FILE",
   "EMAIL_ADDRESS",
   "BLOG",
   "CALL_TO_ACTION",
   "PHONE_NUMBER",
   "WHATSAPP_NUMBER",
   "PAYMENT"
  ],
  "type": "link",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "custom",
   "operator": "EQUAL"
  }
 },
 {
  "default": {
   "size_type": "auto",
   "src": "",
   "alt": null,
   "loading": "lazy"
  },
  "display_width": null,
  "id": "5fb752e9-691e-7b11-a612-94cac8189962",
  "label": "Thumbnail Image",
  "locked": false,
  "name": "thumbnail",
  "required": false,
  "resizable": true,
  "responsive": true,
  "show_loading": false,
  "type": "image",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "custom",
   "operator": "EQUAL"
  }
 },
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "0726cb7f-8436-4243-dcec-36ba8bcfb6b1",
  "label": "Top Text (Microcopy)",
  "locked": false,
  "name": "top_text",
  "required": false,
  "type": "text",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "custom",
   "operator": "EQUAL"
  }
 },
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "85113087-5591-64c7-c052-2d9720c1ab49",
  "label": "Main Button Text",
  "locked": false,
  "name": "main_text",
  "required": false,
  "type": "text",
  "visibility": {
   "controlling_field_path": "button_type",
   "controlling_value_regex": "custom",
   "operator": "EQUAL"
  }
 },
 {
  "children": [
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "a757c310-1dc8-9f7f-5f73-20dc89173b3e",
    "label": "Base Background Color",
    "locked": false,
    "name": "base_bg_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "44209241-2b72-bb28-b166-ef57a7222a8e",
    "label": "Hover Background Color",
    "locked": false,
    "name": "hover_bg_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "d4f266ca-e938-b1b0-1d3d-4c0a027fe887",
    "label": "Base Text Color",
    "locked": false,
    "name": "base_text_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "64278894-20a7-cf1e-52c9-966217d6d4fb",
    "label": "Hover Text Color",
    "locked": false,
    "name": "hover_text_color",
    "required": false,
    "type": "color"
   },
   {
    "default": {
     "color": null,
     "opacity": null
    },
    "display_width": null,
    "id": "5c01e696-9336-1fcf-e5e4-1987e32d44f4",
    "label": "Border Color",
    "locked": false,
    "name": "border_color",
    "required": false,
    "type": "color"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "a3f5c61a-7ed6-4e17-386b-5550214aca9d",
    "label": "Border Size (px)",
    "locked": false,
    "name": "border_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "6fb4ebf9-4b2d-c15b-0177-0a8594cacbd1",
    "label": "Top Text Size (px)",
    "locked": false,
    "name": "top_text_size",
    "required": false,
    "step": 1,
    "type": "number"
   },
   {
    "display": "text",
    "display_width": null,
    "id": "81d85724-0b11-31dd-c5e6-937e2270b8c3",
    "label": "Main Text Size (px)",
    "locked": false,
    "name": "main_text_size",
    "required": false,
    "step": 1,
    "type": "number"
   }
  ],
  "default": {
   "base_bg_color": {
    "color": null,
    "opacity": null
   },
   "hover_bg_color": {
    "color": null,
    "opacity": null
   },
   "base_text_color": {
    "color": null,
    "opacity": null
   },
   "hover_text_color": {
    "color": null,
    "opacity": null
   },
   "border_color": {
    "color": null,
    "opacity": null
   }
  },
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "cf5f24f0-39f9-9be6-2158-e2fb915743ad",
  "label": "Styles",
  "locked": false,
  "name": "styles",
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 }
]

‍