Cannot create a link field

[CBothma]

For some reason i can’t create a link field in the design manager. I’ve tried making a brand new custom module and adding just a link field to without making any changes and the error still appears.
This is the error

1.
Error:Unable to set value for fields > > supported_types > on custom widget from JSON: {"name":"test","source":"","otherAssets":[],"cssAssets":[],"jsAssets":[],"tags":[],"contentTags":[],"contentTypes":["LANDING_PAGE","SITE_PAGE","BLOG_LISTING","BLOG_POST"],"hostTemplateTypes":["PAGE","BLOG_LISTING","BLOG_POST"],"isAvailableForNewContent":true,"isEnabledForEmailV3Rendering":null,"smartType":"NOT_SMART","inlineHelpText":"","path":"/Beauty/modules/test","folderId":199020526249,"categories":[],"fields":[{"type":"link","id":"8582ac67-ed32-9fd4-cffa-25aecc35406f","default":{"url":{"content_id":null,"type":"EXTERNAL","href":""},"open_in_new_tab":false,"no_follow":false},"supported_types":["EXTERNAL","FILE","CONTENT","BLOG","CALL_TO_ACTION","PAYMENT","EMAIL_ADDRESS","PHONE_NUMBER","ANCHOR"],"label":"Link","name":"link_field"}],"messages":{},"masterLanguage":null,"updatedById":79716120}

[CBothma]

This problem appears to be happening to be happening with URL fields too

[Berangere]

Hi @CBothma and welcome, we are delighted to have you here!
Thanks for sharing the details of what you’re seeing with the HubSpot Community!
According to the module and theme fields reference, the valid supported_types for a link field are:

“EXTERNAL”, “CONTENT”, “FILE”, “EMAIL_ADDRESS”, “BLOG”, “CALL_TO_ACTION”, “PHONE_NUMBER”, “WHATSAPP_NUMBER”, “PAYMENT”

It looks like “ANCHOR” is appearing in your supported_types array, but that’s not currently a valid option.
This might be getting added by the Design Manager automatically, which could be causing the error you’re experiencing.
Removing “ANCHOR” from the list should help resolve the issue.

Since this seems to be happening through the Design Manager UI and not something you’re setting directly, it’s possible you’ve found a platform bug. I recommend reaching out to HubSpot support so they can take a closer look.
Be sure to include:

- The full error message
- Your HubSpot Account ID
- Details about the Design Manager adding “ANCHOR” as a supported type for link fields
- A link to this Community post
As a temporary workaround, you could also try creating the module locally with the HubSpot CLI. This allows you to manually set the supported_types without including “ANCHOR”.

Hope this helps point you in the right direction, and let us know if you have any other questions!
Thanks and have a great day!
Bérangère
This post was created with the assistance of AI tools

[CBothma]

Hi @BérangèreL

This does seem to be the problem thank you very much. If I add a link field and remove anchor form the supported URL types in the design manager, this also seems so resolve the error message.
I’m usure why this is happening to me, none of my coullages were having this issue.
Regardless I’ll reach out to support with the bug.

[Anton]

Hey @CBothma,

‘Anchor’ is a not supported type so HubSpot will throw an error for this.

Technically, an anchor is just an ID set somewhere in the source-code of the page

<span id="my-anchor"></span>
<h2> some headline </h2>

The most important thing to keep in mind is:
No “space” in the anchor.

If your button has my-anchor set as the “url” but your actual anchor is written like

<span id="my anchor"></span>

it won’t work since it’s different.

This is why I highly recommend to use the replace filter and use it like

|replace(" ", "-")

what this does is:

even if you accidentely type in something like “my anchor” it will transform it to “my-anchor” and set the ID/anchor correct.

If you use it the same way in the button setup, it should work properly, but this is where the

{% if is_in_page_editor and module.link_type == "anchor" %}
...
{% endfor %}

comes in handy as this will display the correct anchor to you during the page building process without pushing it to the actual published page

best,

Anton

[Anton]

Hey @CBothma,
just an addition:
If you like to create an anchor navigation, I recommend to do as following:

• Add a choice field(“link type”) and put “link” and “anchor” as values into it
• Add a URL field(“button link”) and a text field (“anchor”; not rich-text) to the module
• Set the conditions as following for the link field

and like this

for the anchor option

• Write the module.html as following

{% if module.link_type == "link" %}
{# Paste the whole copied snippet of the URL field here #}
{% elif module.link_type == "anchor" %}
{% set href = module.anchor|lower|replace(" ", "-") %}
{% endif %}
...

{# this is your button #}
<a href={{href}} class="my-custom-button">{{module.button_label}}</a>
...

doing so will give you two things:

1. A better user experience as the choice field with the visibility rules will toggle the corresponding option in the page editor (link options for the “link” option, and a text field for the anchor option
2. Keep the code clean and maintainable as the whole logic is above the whole layout

An additional UX helper:
If you like to see the used anchor while building the page in the page editor without the need to click into the module, modify the module.html to something like this:

{% if module.link_type == "link" %}
{# Paste the whole copied snippet of the URL field here #}
{% elif module.link_type == "anchor" %}
{% set href = module.anchor|lower|replace(" ", "-") %}
{% endif %}
...

{# this is your button #}
<a href={{href}} class="my-custom-button">{{module.button_label}}</a>
...

{% if is_in_page_editor and module.link_type == "anchor" %}
<span style="background-color:rgba(199,249,232, 0.2), padding: 1rem; border-radius:.5rem;font-size:.75rem;">{{href}}</span>
{% endif %}

best,

Anton