Adding button.module with cta.module to a custom HTML email template

SOLVE
RolandKing
Participant

Hi all,

 

New to Hubspot and new to the forums, so I hope I’m posting this in the right place.

 

Problem Overview:
Looking for a little guidance here. I am building a new HTML email template with specific modules to control how it will be implemented by non-tech users. As part of the template, I have two button designs in HTML/CSS.


Rather than creating my own, I was looking to use the existing Hubspot button module; however, I am noticing that the button.module available is different from the more complex/robust one that is available on generic Hubspot templates. In particular, I would like the button to include the cta.module as part of the “Link to:” dropdown option.


TLDR Request for Help:

  1. Is there a separate button.module somewhere I am missing that gives my template the same functionality as generic Hubspot ones?
  2. If not, I would love for someone to share with me the syntax to reproduce that generic template button module.

 

Problem 1: Adding cta.module
I have added cta.module directly to the template, and that does work. However, there is no visual prompt that the module exists in the email template. It would be nice to have a better selector option visually in the template so people know where to click. I could clone the cta.module and wrap it in some styles, but then that would be inherited in all emails.


Problem 2: Creating a custom module
I created my own CTA button module using the “link” and “text” fields. This also works and allows for template styling; however, this does not offer the option of using the cta.module, which is what my company wants to use for tracking purposes.


Problem 3: Adding button.module
I added the button.module to my template, and I know I am able to give the ID for this some style overrides so the default button looks the way I want it to. However, as stated in the custom button module solution, I am unable to have CTA as one of the “link to” options to use.


A Note about the CTA Module:
As others have mentioned in previous posts, the challenge with using the cta.module is that it automatically converts your styles to an image. So, while a lot of people recommend setting the button style to “Link (no style)” and adding a custom CSS class under advanced, this doesn’t work. It cannot override any styles because the CTA module converts it to an image before placing it in the email and applying the class to the container.


I assume the only way to get around this is to create a CTA module button “template” which has the CSS added directly to the code pane and is applied prior to converting to an image. I would then instruct marketers to make a copy of that CTA button template each time, rename it, and change the button text in the editor.

 

Thoughts? I welcome any advice on this matter, as it has been super frustrating to try to solve on my own.

0 Upvotes
1 Accepted solution
Teun
Solution
Key Advisor | Diamond Partner

Hi @RolandKing ,

 

I'll share our solution for this. It is quite complex, but we created some macro's to make this a bit easier. The trick is, that we always use custom HTML and CSS for our buttons, and if the user selects a CTA, we will add that as an overlay with position: absolute and opacity: 0; We have a dropdown field for people to select the right styling. The only requirement is that people select a CTA with the style 'No style'. So it will be a plain link.

fields.json:

{
  "name": "button",
  "label": "Button (or CTA)",
  "sortable": false,
  "required": false,
  "locked": false,
  "children": [
    {
      "name": "content",
      "label": "Content for the button or CTA",
      "sortable": false,
      "required": false,
      "locked": false,
      "validation_regex": "",
      "allow_new_line": false,
      "show_emoji_picker": false,
      "type": "text",
      "default": "Catchy CTA"
    },
    {
      "name": "link",
      "label": "Link for button (fill this if no CTA is required)",
      "required": false,
      "locked": false,
      "supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG"],
      "type": "link",
      "inline_help_text": "",
      "help_text": "",
      "default": {
        "url": {
          "content_id": null,
          "type": "EXTERNAL",
          "href": ""
        },
        "open_in_new_tab": false,
        "no_follow": false
      }
    },
    {
      "name": "hs_cta",
      "label": "Hubspot CTA (Custom Button + Button Style: Link (No Style))",
      "type": "cta",
      "default": null
    },
    {
      "name": "style",
      "label": "Button style",
      "sortable": false,
      "required": false,
      "locked": false,
      "display": "select",
      "choices": [
        ["primary", "Primary"],
        ["secondary", "Secondary"],
        ["tertiary", "Tertiary"]
      ],
      "type": "choice",
      "placerholder": "",
      "default": "primary"
    }
  ],
  "type": "group",
  "default": {
    "content": "",
    "href": ""
  }
}

 

Button macro:

{% macro render(button, additionalClass) %}
{% set aClass = additionalClass ? additionalClass : '' %}

{% if button.hs_cta %}
  <div class="c-button c-button--{{ style }} {{aClass}}">
    <span class="c-button__content">{{content}}</span>
    {{ cta(id) }}
  </div>
{% elif button.link.url.href %}
  {% set url = button.link.url.type == 'EMAIL_ADDRESS' ? 'mailto:'~button.link.url.href : button.link.url.href %}
  {% set target = button.link.open_in_new_tab ? (button.link.no_follow ? 'target="_blank" rel="noopener nofollow"' : 'target="_blank" rel="noopener"') : (button.link.no_follow ? 'rel="nofollow"' : '') %}
  <a href="{{url}}" class="c-button c-button--{{style}} {{aClass}}" {{target}}>
    <span class="c-button__content">{{content}}</span>
  </a>
{% endif %}
{% endmacro %}

 

SCSS:

.c-button {
   position: relative;
   // add additional styling here  
}

.c-button__content {
    position: relative;
    z-index: 2;
}

.c-button .hs-cta-wrapper,
.c-button .hs-cta-node,
.c-button a {
    vertical-align: baseline;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 3;
}

Hope this helps!

  



Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

2 Replies 2
Teun
Solution
Key Advisor | Diamond Partner

Hi @RolandKing ,

 

I'll share our solution for this. It is quite complex, but we created some macro's to make this a bit easier. The trick is, that we always use custom HTML and CSS for our buttons, and if the user selects a CTA, we will add that as an overlay with position: absolute and opacity: 0; We have a dropdown field for people to select the right styling. The only requirement is that people select a CTA with the style 'No style'. So it will be a plain link.

fields.json:

{
  "name": "button",
  "label": "Button (or CTA)",
  "sortable": false,
  "required": false,
  "locked": false,
  "children": [
    {
      "name": "content",
      "label": "Content for the button or CTA",
      "sortable": false,
      "required": false,
      "locked": false,
      "validation_regex": "",
      "allow_new_line": false,
      "show_emoji_picker": false,
      "type": "text",
      "default": "Catchy CTA"
    },
    {
      "name": "link",
      "label": "Link for button (fill this if no CTA is required)",
      "required": false,
      "locked": false,
      "supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG"],
      "type": "link",
      "inline_help_text": "",
      "help_text": "",
      "default": {
        "url": {
          "content_id": null,
          "type": "EXTERNAL",
          "href": ""
        },
        "open_in_new_tab": false,
        "no_follow": false
      }
    },
    {
      "name": "hs_cta",
      "label": "Hubspot CTA (Custom Button + Button Style: Link (No Style))",
      "type": "cta",
      "default": null
    },
    {
      "name": "style",
      "label": "Button style",
      "sortable": false,
      "required": false,
      "locked": false,
      "display": "select",
      "choices": [
        ["primary", "Primary"],
        ["secondary", "Secondary"],
        ["tertiary", "Tertiary"]
      ],
      "type": "choice",
      "placerholder": "",
      "default": "primary"
    }
  ],
  "type": "group",
  "default": {
    "content": "",
    "href": ""
  }
}

 

Button macro:

{% macro render(button, additionalClass) %}
{% set aClass = additionalClass ? additionalClass : '' %}

{% if button.hs_cta %}
  <div class="c-button c-button--{{ style }} {{aClass}}">
    <span class="c-button__content">{{content}}</span>
    {{ cta(id) }}
  </div>
{% elif button.link.url.href %}
  {% set url = button.link.url.type == 'EMAIL_ADDRESS' ? 'mailto:'~button.link.url.href : button.link.url.href %}
  {% set target = button.link.open_in_new_tab ? (button.link.no_follow ? 'target="_blank" rel="noopener nofollow"' : 'target="_blank" rel="noopener"') : (button.link.no_follow ? 'rel="nofollow"' : '') %}
  <a href="{{url}}" class="c-button c-button--{{style}} {{aClass}}" {{target}}>
    <span class="c-button__content">{{content}}</span>
  </a>
{% endif %}
{% endmacro %}

 

SCSS:

.c-button {
   position: relative;
   // add additional styling here  
}

.c-button__content {
    position: relative;
    z-index: 2;
}

.c-button .hs-cta-wrapper,
.c-button .hs-cta-node,
.c-button a {
    vertical-align: baseline;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 3;
}

Hope this helps!

  



Did my answer solve your issue? Help the community by marking it as the solution.
RolandKing
Participant

@Teun Thanks so much for your quick and thorough response! A lot of your solution is over my head so will take some time for me to unpack. I'm still new to the system and need to spend some time understanding how to replicate your customized solution. However, it sounds like it's just what I need!

 

In the interim, I am probably going to stylize a <div> in the module for the button container and apply styles to the link within the CTA button builder (not ideal, I know, but all I can see as a quick solution at this point).

 

One more question I have for you: Do you have any idea where the "Custom CSS class" calls the style? Is there a global CSS file in a Hubspot account that it references? I have to assume that this class option is so that it applies a style BEFORE the backend system converts it to an image -- otherwise, what is the point of offering class as an option?

 

If there is, then at least I can give my link style a class so that all people have to do when they build a CTA is remember the class name I defined and place it in there, instead of providing them with the full css element style attributes to copy/paste...