CMS Development

dit
Participante

Creating a text link CTA, not an image of text

resolver

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 Soluciones aceptada
MFrankJohnson
Solución
Líder intelectual

Creating a text link CTA, not an image of text

resolver

_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

Ver la solución en mensaje original publicado

18 Respuestas 18
Lucie_L
Participante

Creating a text link CTA, not an image of text

resolver

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 Me gusta
Bürobert
Colaborador

Creating a text link CTA, not an image of text

resolver

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
Participante | Partner nivel Diamond
Participante | Partner nivel Diamond

Creating a text link CTA, not an image of text

resolver

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
Participante

Creating a text link CTA, not an image of text

resolver

Upvoting this. 

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

RHabegger
Participante

Creating a text link CTA, not an image of text

resolver

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
Participante

Creating a text link CTA, not an image of text

resolver

Same, it's really annoying 😐

 

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

0 Me gusta
JGUO5
Participante

Creating a text link CTA, not an image of text

resolver

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
Participante

Creating a text link CTA, not an image of text

resolver

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
Participante

Creating a text link CTA, not an image of text

resolver

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
Colaborador líder

Creating a text link CTA, not an image of text

resolver

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
Solución
Líder intelectual

Creating a text link CTA, not an image of text

resolver

_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
Participante

Creating a text link CTA, not an image of text

resolver

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
Participante

Creating a text link CTA, not an image of text

resolver

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
Colaborador

Creating a text link CTA, not an image of text

resolver

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
Participante

Creating a text link CTA, not an image of text

resolver

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 Me gusta
MFrankJohnson
Líder intelectual

Creating a text link CTA, not an image of text

resolver

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 Me gusta
mpenn
Participante

Creating a text link CTA, not an image of text

resolver

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 Me gusta
dit
Participante

Creating a text link CTA, not an image of text

resolver

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 Me gusta