Links in custom HTML HUBL not working...what am I doing wrong?!

[jly]

Anyone know why my link in this module is not working?

This is the custom HTML HUBL:

<a href="{{ module.content_link }}">
  <div class="hub-card">
  <div class="hub">
  <img src="{{ widget.image_field.src }}" width="{{ widget.image_field.width }}" height="{{ widget.image_field.height }}" alt="{{ widget.image_field.alt }}">
  <h2>{{ module.content_header }}</h2>
    <p>{{ module.content_body }}</p>
  </div>
  </div></a>

And here is the page, scroll to "Address multiple use cases" where you see icons + text:

https://www.jibestream.com/?hs_preview=eDXAvvxo-5705553215

----------

I took this post as my source of inspiration and did some tweaking. His links work, but not mine—so what am I doing wrong?!

 https://community.hubspot.com/t5/Share-Your-Work/CTA-Card-with-Icon-Color-choice-URL-Title-and-Descr...

HELP!

[valerajoey]

hey there,
I just visit your site, you're probably using 'page field' which just give you the unique id of a page, maybe you just let it be a text field and just add some regex validation to it, hope that works for you.

here's a possible guide if you're still want to use Page field https://community.hubspot.com/t5/Content-Design-Questions/Retrieve-url-of-the-page-from-Page-field/t...

[valerajoey]

luckily I'm currently working on Page field and figured out how to output just the URL of the page
try this one,

{{ page_by_id(module.content_link).url }}

[JoshCM · Accepted solution]

Hey there!

Your links seems to be working when I view the page although not sure what you're trying to link to.

When I inspect the first icon it's linking to "5457675035"

What is the url you're trying to link to?

On my module I setup the "module.content_link" as a text box so you can enter the url there.

[jly]

This is it!!! Thank you!!!

Josh, Great tutorial by the way—for anyone looking to create a relatively easy solution for clickable 'cards' with icon and text, try this:

https://community.hubspot.com/t5/Share-Your-Work/CTA-Card-with-Icon-Color-choice-URL-Title-and-Descr...

[AntonB]

Hi @jly,

I've checked the page. The link works but leads you to an 404 error page as the requested page isn't availible. After checking the source code I've noticed that the 

<a href="">

part shows a random number insted of a link.

This is how the source code looks like:

How do you insert the link inside the module?

Have you tried to insert a link with http:// or https://?

For example:

https://www.jibstream.com/your-other-site

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

[jly]

I used the "page" module, but it looks like it doesn't work.

[dennisedson]

@jly, it is doing something.  your code looks fine to me. 

sometimes i change the field being passed to troubleshoot.

for example:  try putting the {{ module.content_header }} in place of the link.  see if the header data is passed correctly.  if so, delete the link field and make a new one. 

hope that gets you somewhere

[AntonB]

Hi @jly

after checking your page and the source code of your page it seems that the link(s) are working but leading to an 404 error page. This means that you're inserting wrong links.

The source code looks like this:

<a href="5457675035">
  <div class="hub-card">
  <div class="hub">
.....
<h2></h2><h3>Indoor navigation</h3>
    <p></p><p>Make places instantly familiar with real-time turn-by-turn experiential wayfinding.</p><p></p>
  </div>
  </div></a>

Did you tried to enter the link with http:// or https:// inside the module?

For example:

https://jibstream.com/the-desired-site

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution

[jly]

Hey Anton, thanks for looking into this. The links cannot be incorrect because they are directly selected from hubspot's default "Page" dropdown menu which pulls together a list of all website pages and landing pages from our site.

The issue has been resolved, albeit through another solution.