Cracking Hubspot CTAs

[#1]

I have managed to crack, hack, and manipulate pretty much every part of Hubspot's core functionality except one thing, CTAs.

I have picked apart the html that is output by the hubl module and it is so full if code it is border line rediculous. There is markup for an image which seams to still output even if an image isn't in use, styling seams to be inline, and there is the default plethera of Hubspot wrappers, but I can't seam to find the part's that make it tick. I have crawled up and down the developer info looking for a url token or something of the like. 

I am asking if anyone has managed to track a link, as a cta, that they have created using html/css. Yes you can customize the css either on the cta editor or in your style sheet using a ton of important tags. The default css is incredible. box-shadow, text-shadow, gradients using background-image, border-radius, paddings, etc, etc, etc. And then you have to overwrite the :hover, the :active, and the :focus (I think). Hubspot should give us a one click solution to shut all of this down and allow us to just output what we want, but they dont. 

I scour the internet everytime I work on a project in hubspot, hoping to avoid the enevitable ritual of overwriting, and there is never anything solution. I'm just wondering if there is something that I am missing. If not then this should really be brought up to Hubspot's people. I don't get why they would inline this default styling anyways, let alone not make it easily customizable. As you can see I'm pretty lit up about this. I would love to hear from other people about how they deal with this issue.

[#2 · Accepted solution]

Have you tried using the "Link (No Style)" option for CTAs? That removes all of the default styling of the CTA.

[#3]

@DaniellePeters, 4 years working in hubspot and I never once caught this or found it mentioned anywhere. I feel like a dumdum because it's so obvious now but this is exactly what I have been wanting. Thanks.

[#4]

I have a somewhat related question. I have a "LET'S TALK" button on our Services page.

I would like to turn it into a Hubspot CTA. (We are using the HS COS.) This article seems to suggest that you can just assign your CTA a regular class by typing the class name into the CSS Class box on the CSS tab of the CTA editor. When I type in the class that was created for our original button, nothing happens. 

HS Support suggested recreating my button with inline styling right in the CTA editor. Huh? If there's no way to assign it a class, then why do they have the CSS Class box? Has anyone made this work? Am I missing something obvious? Thanks!

[#5]

@ericthomas,

The class you add to the editor actually applies to a wrapper to the actual anchor tag. If you use your browsers inspector tool to locate the cta you should be able to find the class name you apply within the cta code. You may need to adjust the css selector for your cta css to account for this.

[#6]

Thanks @Jsum for the info. I will try to make this work. 

[#7]

Thanks again for the information @Jsum. When I inspect the button on our site, it's showing the class as "hs-btn". That's what I type into the CTA editor, and it still isn't styling it correctly. Is this what you're suggesting? I'm probably missing something here.

[#8]

@ericthomas,

The html snippet in your image does not look like the typical cta code. for starters it is linked to a relative url, but also it is missing the typical default wrappers. This has me believing that you aren't using a cta for this link. You should double check that you are using either a cta module or cta code for the button.

Also, based on the styles applied in in the image of your cta dashboard, I don't think you changed the style type of the cta to "no style".  Hubspots cta styles will overwrite of your styles because they are applied to the cta at the point that the cta exists on the page which would be below your stylesheets as it is in the body of the page. Using "no styles" in the dropdown in the cta editor will remove this issue. 

Now, if you can verify that you are actually using a cta, and this cta is set to have no default styles, then you should be able to see the cta code in your inspector, and you should see that your class name was applied to a span tag wrapped around the anchor tag of the cta. I might be wrong about this but I am pretty positive.

If this is the case then targeting the class this way "a.className" wouldn't work because you are telling the css to find an anchor tag with the the class "className" but "className" was actually applied to the wrapper surrounding the achor tag. You can fix this by simply removing "a." from the target, but you might want to target the anchor tag inside the span tag so you would want to change it to something like "span.className a".

[#9]

@Jsum

That worked! I just swapped out the existing non-CTA link with the CTA set to "no style." Thanks for helping me figure this out. The only issue I can see now is that the CTA dashboard isn't reporting any views of the CTA I inserted onto the page, even after I viewed it several times on various devices. I'm guessing there is just a lag in the analytics data. I'll check it again tomorrow.

[#10]

Hello,

I have similar problem.

I have the custom button on my page:

<button class="z">zzzzzzzzzzz</button>

and javascript for it which opens the iframe:

<iframe id="test" src="https://myurl.com"></iframe>

if we click on the button, so I can't use HubSpot CTA because it opens the link in new tab  (i need iframe).

Is it possible to track it somehow with HubSpot, in example by adding something like this:

&hsCtaTracking=ac9qe25d-c647-5313-b549-1y82374a4625c

to my iframe link?

Or other solutions because this one does nor work.