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

SOLVE
Highlighted
jly
Occasional Contributor

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!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Occasional Contributor

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.

9 Replies
Occasional Contributor

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

 

Reply
0 Upvotes
jly
Occasional Contributor

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.

Reply
0 Upvotes
Advisor | Platinum Partner

@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

 

dennis
Reply
0 Upvotes
Occasional Contributor

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:

Bildschirmfoto 2018-11-08 um 23.06.58.png

 

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

 

Reply
0 Upvotes
jly
Occasional Contributor

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

Reply
0 Upvotes
Occasional Contributor

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
Occasional Contributor

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...

Reply
0 Upvotes
Occasional Contributor

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...

Reply
0 Upvotes
Occasional Contributor

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 }}