Blurry CTA's on Desktop and mobile

[JHooiveld]

Hi,

It seems that the described problem is for email and for custom CTA.

I have the same problem with image button cta's. Even if the image is just around 75Kb, it seems Hubspot is reseizing it. Would be great to have an option to avoid the reseizing.

Thanks,

Jens

[Stephanie-OG]

Typically the issue here is that HubSpot converts CTAs to low-quality images on email. 

There is a lot of demand on the Ideas forum to resolve this but, in the meanwhile, one possible solution is to create your own HTML CTAs instead. 

---

Stephanie O'Gay Garcia
HubSpot Design / Development / Automation

Website | Contact

[blinkertoon]

Have added a comment to the idea you mentioned, although the status of this is now 'delivered' (although clearly not), so can't upvote.

Meanwhile, any tips on how to create those HTML CTAs?

Thanks.

[Stephanie-OG · Accepted solution]

I was referring to creating a plain HTML button that doesn't quite replicate the CTA functionality (it's just a styled HTML button) but I've realized that @tjoyce has a great response here on how to get the URL for a CTA. 

Using that in a custom module you could create your own custom CTA module for emails that creates a CTA button using the above CTA URL. Something like this: 

---

Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[csullivan]

@Stephanie-OG thanks again for this reply! Due to my issues I previously stated with this solution (the styling not rendering for outlook emails), we decided to resort back to using the CTA module but with an image (hoping this would solve for the blurry issue). However, I realized image or styling, HubSpot will still minimize and make this blurry.

SO, to correct this I thought I could use your solution once more, but instead of styling, I would use the image I was trying in the CTA module. I am by no means a designer (which you have probably come to the conclusion already), but I have been stringing together some of your knowledge responses to create the following custom module, and this seems to be much more difficult than I originally anticipated.

I first tried just creating an image module and inputting this in for the img src. I came to realize that since this I think doesn't work due to it not being a source but instead the whole field, which made me then create the following code with the corresponding fields:

Am I missing a step to include the module? Do I need something like I have for the CTA?  Or am I just overthinking this?

Someone... anyone... please help!

Thank you!!!

[dennisedson]

hello @csullivan,

I am slightly confused about what your specific issue is. 

"Am I missing a step to include the module? Do I need something like I have for the CTA?  Or am I just overthinking this?"

Are you speaking of including this in an email template?  If so, you would need to add the module to whichever email template you need it in.  

I also noticed in that code screengrab that you are missing a closing  > on the first line.

should be 

<a href="{{ctaUrl}}">

Hope this helps, but reach out again if you need additional help!

[csullivan]

Stephanie, thank you! This did help, however, it seems to only work when editing the email and then once I send a test email, the CTA does not render, and instead, I see just a bordered box with none of the other styling coming through. Assuming this may have to do with the CSS of my email template... Any ideas on how to help?

[jau]

Steph,

As of today Hubspot emails do not support flexible columns. Is there some way your solution of a custom module can be utilized and still be flexible? As in, my marketers want to put CTA's where they need them on a per email basis within the contraint of the editable regions I give them in templates.

Use case, an email template with three Rich Text Editors. It's very possible they may want a CTA in the middle of some copy within a Rich Text Editor on one email, but not the next. Since we can't use flexible columns it sounds like the Custom Module you are suggesting would be placed on the template level and then be stuck there.

Please let me know if im missing something! I try to do digging around as often as I can for updates to the hubspot system development wise. Flexible columns on emails would be awesome(understandably dangerous in the wrong hands too*).

Our primary goal as developers here is to arm marketers with assets they can use efficiently and do not require coming back to dev everytime they need to move a button or make minor tweaks. Also, we don't dump code into Rich Text Editors and ask marketers to edit it themselves on a per case basis as we are building these solutions for all sorts of people. From super tech savvy to not entirely tech savvy. Non coders editing code just isn't a feasible solution for us unfortunately.

Thanks!

[dennisedson]

@jau ,

First of all, hi 🙂 

Secondly, 

"Our primary goal as developers here is to arm marketers with assets they can use efficiently and do not require coming back to dev every time they need to move a button or make minor tweaks"

Yes yes yes and yes

Lastly, how has your experience been with using drag and drop email?  

And lastly lastly, things are in the works for developers.  We will call that the vaguest tease ever

[jau]

D,

Your question about experience with drag and drop email actually brings up a larger question I have about Hubspot documentation in general.

When I originally commented in 2019 per the documentation I was able to find at that time flexible email templates were not a thing. With you current mention of drag and drop I decided to dig again a bit and see what I could find. I'm having a hard time finding anything about drag and drop capabilites, or flexible columns within the Hubspot Email Template documentation i've been able to find: https://developers.hubspot.com/docs/cms/building-blocks/templates/email-template-markup

I know you guys have built this sort of new doc site, and there still some old doc sites floating aroun that pop up in google searches now and then. For the sake of this thread im sticking to hubspot documenation only, no user forums or slack channels.

Would you be able to direct me to the right documentation aroun building flexible coded hubspot email templates? 

Thanks so much!

[dennisedson]

Hey @jau !  

Yes, currently, the documentation for this is scarce, but I was speaking with the developer docs team and they are working on updating the documentation.  The documentation that I have surfaced is less relevant to you and more to the marketer.  

If you build a module and select it as an email module, that module will be available in the drag and drop email editor.  There are some considerations with this, though.  The biggest is that you do not have access to the head with the drag and drop editor so you will not be able to add css at that level.  So you will need to make sure to inline any css within your modules.  

All of this being said, things will be changing soon so if you can hold off a bit, I promise it will be worth it.  There is a beta that is being worked on now that will allow dnd_areas similar to the page and areas coming soon.  So your approach would be to create a custom coded email using the new dnd_area and then the marketing team would have that drag and drop experience on the front end.  

If you would like, I will keep an eye out for when the beta opens up and let you know.

Hope this helps!

d

[jau]

@Stephanie-OG any word on this comment above?

[blinkertoon]

Thanks Stephanie. Will check it out and get back to you ASAP 🙂

[HaPf]

Did this work for you?

[MFrankJohnson]

Please include other non-CTA elements in your screenshots for comparision.

Thanks in advance.