How to create a custom link field for a component?

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?

@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/202803#M7703


If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:


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

Drop by and say Hi to me on slack.

@Rachel-Marvel - I’ll add my response here :grinning_face_with_smiling_eyes:

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>

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?

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

Thank you!