How to create a custom link field for a component?

[Rachel-Marvel]

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? 

[tjoyce]

@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]

@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]

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? 

[tjoyce · Accepted solution]

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

[Rachel-Marvel]

Thank you!