CMS Development

Rachel-Marvel
Contributor

How to create a custom link field for a component?

SOLVE

I have created a lot of components which we just drag and drop into new templates and then edit the different fields to customise it eg text fields or image fields. I want to be able to change the url that a button component links too - is there a field for this? 

1 Accepted solution
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How to create a custom link field for a component?

SOLVE

@Rachel-Marvel - That might be normal until you publish the web page.

View solution in original post

0 Upvotes
5 Replies 5
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How to create a custom link field for a component?

SOLVE

@Rachel-Marvel - I may have answered a similar question to this, this morning. Does this help answer your Q?

https://community.hubspot.com/t5/Content-Design-Questions/Convert-inline-text-field-to-URL-Slug/m-p/...


If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How to create a custom link field for a component?

SOLVE

@Rachel-Marvel - I'll add my response here 😄

When you do "export_to_template_context=true" you don't have to do any wrapping. The results of the text field would be stored in a dictionary that can be accessed by the whole page instance. So yours would probably look something like this.

 

{% text "link_url" value="#" export_to_template_context="true" %}
<a href="{{widget_data.link_url.value}}">MY FANCY BUTTON</a>

 and, to expand even further to allow them to set the button text: 

{% text "link_url" value="#" export_to_template_context="true" %}
{% text "button_label" value="CLICK ME" export_to_template_context="true" %}
<a href="{{widget_data.link_url.value}}">{{widget_data.button_label.value}}</a>
Rachel-Marvel
Contributor

How to create a custom link field for a component?

SOLVE

This is a really big help, thank you!

Just to check, how would I test this? I have the shareable preview link but the button seems to be directing to a 404 page with a temporary slug - is this normal? 

0 Upvotes
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

How to create a custom link field for a component?

SOLVE

@Rachel-Marvel - That might be normal until you publish the web page.

0 Upvotes
Rachel-Marvel
Contributor

How to create a custom link field for a component?

SOLVE

Thank you!