CMS Development

dit
Participant

Creating a text link CTA, not an image of text

SOLVE

Is there any way to create a true text link CTA rather than merely an image of some text.

 

Text as an image is bad for accessibility, also not great for RWD. We need our CTAs to work on a different number of backgrounds, as such the style of the CTA needs to be set via the page the CTA is included in, not set in stone in an image. Also, the CTA in an image is in the wrong font. Surely there's a way to do this, I hope I'm just missing something somewhere.

1 Accepted solution
MFrankJohnson
Solution
Thought Leader

Creating a text link CTA, not an image of text

SOLVE

_hubspot-button-accept-as-solution-gif-v00.gif

Help other HubSpot searchers find this post quickly by accepting this solution today.

 

Q: Is there any way to create a true text link CTA rather than merely an image of some text?

 

Short A: Absolutely.

 

Longer A:

(see image)

hubspot-cta-pure-text.png

 

Here's an example page that shows that CTA in use (scroll to bottom).

 

Always happy to help. Reach out anytime if we can be of assistance with HubSpot.

 

Best,
Frank

 


hubspot-solutions-signature-mfrankjohnson-v03.png

www.MFrankJohnson.com

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com

View solution in original post

18 Replies 18
Lucie_L
Participant

Creating a text link CTA, not an image of text

SOLVE

I truly can't believe there's no real way to create a button/CTA in Hubspot's email editor. This is absolutely ridiculous. Nobody in their right mind would images for their CTAs. Pure nonsense. 

0 Upvotes
Bürobert
Contributor

Creating a text link CTA, not an image of text

SOLVE

A true HTML Button style CTA which is responsive in nature would also be essential for drag&drop Marketing Emails! It is kind of hilarious that you can style your CTA using CSS but there is no way to get the it into your emails as an HTML object...

phlp
Participant | Diamond Partner
Participant | Diamond Partner

Creating a text link CTA, not an image of text

SOLVE

Several years later and the HubSpot CTA still renders as an image 🤯

I can guess why HubSpot is doing this, but come on. Give us an option to disable this nonsense.

 

In my tests my dev-account isn't doing it, the clients sandbox isn't doing it, but the live-portal is rendering an image.

The image even gets rendered by HubSpot, not via JavaScript.

To get arround this CTA-image-desaster I fiddled around a bit and came up with this.

(In my module, you choose a CTA via a field. We are not using the Hubspot-CTA-Module, but you can easily adopt it to work with the Hubspot-CTA-Module as well)

 

 

 

<script>
    const cta = document.getElementById('hs-cta-{{data.cta_id}}');
    const img = cta.querySelector('img');
    if (img) {
        img.parentElement.innerHTML = img.getAttribute('alt');
    }
</script>

 

 

 

 

Mihhail_K
Participant

Creating a text link CTA, not an image of text

SOLVE

Upvoting this. 

Even when I select Link (No Style) it renders an image.

RHabegger
Participant

Creating a text link CTA, not an image of text

SOLVE

Hello everyone, I have faced then same issue and I even contacted hubspot support for this problem. I am waiting for,official solution.

I found this trick tha does the job : you cant simply edit the HTML source code generated by hubspot for the CTA. In this case you can delete  the <img/> tag in th <a/> tag and tadaaa you have a wonderful CTA with no image. You can also add the css class you may want to the <a/> tag 😉

RVDev
Participant

Creating a text link CTA, not an image of text

SOLVE

Same, it's really annoying 😐

 

Moreover the Custom CSS class don't even show up in the Embed code...

0 Upvotes
JGUO5
Participant

Creating a text link CTA, not an image of text

SOLVE

Kinda same issue but not exactly.

When trying desperately to optimise our page loading time, we realised there are images of our "link no style" CTAs being loaded that impact heavily our speed. We found this in the "network" sheet of browser inspector.

On a fully loaded page, we see our CTAs are rendered as a normal link, but we would like to know why the images, and how to get rid of them and be a faster page.


KevenL
Participant

Creating a text link CTA, not an image of text

SOLVE

Same issue here. I've selected Link (No Style) and tried adding a Custom CSS class but it's still showing up as an image and the custom class is nowhere to be found. I'm currently testing Hubspot and I'm adding the CTA in a Webflow blog post if that helps. So far it seems like there are many users with this issue so a proper solution would be great.

huntersinclair
Participant

Creating a text link CTA, not an image of text

SOLVE

I am having the same issue as this - the snippet I get even when selecting style of No stlye Plain Link I still get embed code that includes an img.  Sometimes the JS which runs on the page replaces this with Text and sometimes it replaces it with the image.  I even tried removing the IMG tag and putting in Text and the JS still injects an image of the text instead.  This is crazy - not sure why Text would ever be rendered as an image, but this is not good since we can't have text contained in images on our site - other than the fact that we can't use CSS to change the look from our site, it is not accessible.

BB1
Top Contributor

Creating a text link CTA, not an image of text

SOLVE

Hi - I am having the same issue, it is showing up as an image, so not showing up when not showing images. The simple reason is that they want to track who saw it, as someone mentioned here.

 

Is there another way to do this? I think we would just use a regular link URL and have that trigger a workflow if possible. Is it?

MFrankJohnson
Solution
Thought Leader

Creating a text link CTA, not an image of text

SOLVE

_hubspot-button-accept-as-solution-gif-v00.gif

Help other HubSpot searchers find this post quickly by accepting this solution today.

 

Q: Is there any way to create a true text link CTA rather than merely an image of some text?

 

Short A: Absolutely.

 

Longer A:

(see image)

hubspot-cta-pure-text.png

 

Here's an example page that shows that CTA in use (scroll to bottom).

 

Always happy to help. Reach out anytime if we can be of assistance with HubSpot.

 

Best,
Frank

 


hubspot-solutions-signature-mfrankjohnson-v03.png

www.MFrankJohnson.com

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
DelRoss
Participant

Creating a text link CTA, not an image of text

SOLVE

This is NOT a text link.  It is a picture of text that has a link.  Completely different.

 

Would this work:

 - Create a CTA

 - Copy the Test Link URL

 - use this URL as an HTML link in the text of the email

 

I know we would lose the "CTA Views" stat (which likely requires the graphic to be loaded) but I'd still get CTA click tracking.  

 

Right?

SebastianT
Participant

Creating a text link CTA, not an image of text

SOLVE

did this really work out for you? I wonder if the test link is different from a real link and if the tracking would get messed up in the contacts profile.

onvista
Contributor

Creating a text link CTA, not an image of text

SOLVE

Has anyone found a solution for this issue?

Don't understand why an image is inserted instead of a true link.  On mobile phones, it just shrinks the image and a longer CTA link ureadable.

dit
Participant

Creating a text link CTA, not an image of text

SOLVE

Hi Frank, that's exactly what I was doing but then in the embed code I could see a nasty image with alt text. When I added it to our website it displays as a text link though so I'm guessing the JS is doing something to convert it. Seems like a lot of effort to go text -> image -> text.

0 Upvotes
MFrankJohnson
Thought Leader

Creating a text link CTA, not an image of text

SOLVE

Honestly, no idea what wizzardry is used when embedding off HubSpot. That example page we built is a HubSpot landing page. Glad it works/ed for you @dit ...

 

Note: Please search for recent posts as HubSpot evolves to be the #1 CRM platform of choice world-wide.

 

Hope that helps.

 

Be well,
Frank


www.mfrankjohnson.com
0 Upvotes
mpenn
Participant

Creating a text link CTA, not an image of text

SOLVE

Definitely upvoting this! We send out an email that can only really be automated if we can use the dynamic CTA. The other links in this email have contact properties passed in so we know those can't be CTAs. It is really bothersome that the link CTA does not match the standard link color, it often does not match alignment wise with the rest of the text, and it gets pixelated!

0 Upvotes
dit
Participant

Creating a text link CTA, not an image of text

SOLVE

Weirdly, I've noticed that whilst I'm pasting in embed code that clearly contains an image it's actually showing as text on the front-end of our site.

0 Upvotes