APIs & Integrations

JVH1
Contributor

Custom button - Stop Outlook adding space above a line of text?

Hi,

I hope I'm posting in the correct area, apologies if not! I'm creating a module and want to use our own custom button as I find the CTA a little cumbersome to edit and create and save new one each time.


Here's what I'm trying to use - we've used before in our previous ESP with no issues.

<tr>
    <td valign="middle" align="center" style="padding: 15px 0 20px 0;"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; max-height: 40px;">
        <tr>
          <td align="center" valign="middle" style="background-color:{{ module.button_group.button_bg_colour.color }}; text-align: center; padding: 10px 30px; font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif', 'Montserrat'; font-size: 16px; text-transform: uppercase; border-radius: 2px; color: {{ module.button_group.button_text_colour.color }}"><a href="{{ module.button_group.url_button.href }}" target="_blank" style="color:{{ module.button_group.button_text_colour.color }}; text-decoration: none"><strong>{% inline_text field="button_group.button_link_text" value="{{ module.button_group.button_link_text }}" %}</strong></a></td>
        </tr>
      </table></td>
  </tr>

However when using this in a drag and drop template and testing it, Outlook creates extra space within the button like this... 

JVH1_0-1598352433735.png

Is there anyway to combat Hubspot putting this extra spacing in above a line of text?

 

Thanks in advance!

0 Upvotes
6 Replies 6
WendyGoh
HubSpot Employee
HubSpot Employee

Custom button - Stop Outlook adding space above a line of text?

Hey @JVH1,

 

While I would recommend using the CTA as not all CSS styling is supported on outlook (more information here:CSS Support Guide for Email Clients [+Checklist] | Campaign Monitor)

 

Having said that, I'd be happy to look at this further and see if it's possible to remove the additional line. Could you share with me the following:

1. Portal ID

2. Email ID/name

0 Upvotes
JVH1
Contributor

Custom button - Stop Outlook adding space above a line of text?

Hi Wendy,

 

Thanks for coming back on this 🙂

The email is just called "test" - literally just using it to test the module. I can't see an ID anywhere to give you
https://app.hubspot.com/email/7281075/edit-dd/32054367884/content

 

The module is called "Villa Deal"
https://app.hubspot.com/design-manager/7281075/modules/33337896731

Portal ID 7281075

Also, not related to this button query but is there an easy way to add Montserrat webfont to use within the drag and drop email builder? I see in the text style section there are a few Websfonts but nowhere to be able to add another?

Thanks,

Holly

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Custom button - Stop Outlook adding space above a line of text?

Hey @JVH1,

 

Upon further digging, it seems that the code that was adding the extra line above the text is this:

 

{% inline_text field="button_group.button_link_text" value="{{ module.button_group.button_link_text }}" %}

 

If you replace this with normal text, the button should be showing up just fine on outlook. Could you try and see if this works?

0 Upvotes
JVH1
Contributor

Custom button - Stop Outlook adding space above a line of text?

Hi Wendy,

 

I've tried this and it works but with removing that field I can't edit the button text in the drag and drop email builder 😞

 

Without being able to see what the code is in the drag and drop area I can't see a way stop it? Do you have any other ideas?

 

Kind regards,

Holly

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

Custom button - Stop Outlook adding space above a line of text?

Hey @JVH1,

 

Perhaps one other workaround is to set the value on the module itself? i.e.

 

{% inline_text field="button name" value="button name" %}

 

Does this work?

0 Upvotes
JVH1
Contributor

Custom button - Stop Outlook adding space above a line of text?

Hey Wendy,

I'm not 100% if I've understood, do you mean like this? 

 

 <!--Button-->
  <tr>
    <td valign="middle" align="center" style="padding: 15px 0 20px 0;"><table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
        <tr>
          <td align="center" valign="middle" style="background-color:{{ module.button_group.button_bg_colour.color }}; text-align: center; padding: 10px 30px; font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif', 'Montserrat'; font-size: 16px; text-transform: uppercase; border-radius: 2px; color: {{ module.button_group.button_text_colour.color }}"><a href="{{ module.button_group.url_button.href }}" target="_blank" style="color:{{ module.button_group.button_text_colour.color }}; padding: 0 0 0 0; text-decoration: none"><strong>{% inline_text field="button name" value="{{ button name }}" %}</strong></a></td>
        </tr>
      </table></td>
  </tr>

 

 

JVH1_0-1599054240377.png

 

Changing to

{% inline_text field="button name" value="button name" %}

breaks the links to the fields so nothing is visible and can't be edited?

So it's kind of looking like this is not possible to use my own button because Hubspot adds this space in... 😞

 

Kind regards,

Holly

0 Upvotes