ESHOPMANESHOPMAN Logo
Our Blog

Troubleshooting HubSpot's Link Field Errors: A Community Solution

Troubleshooting HubSpot's Link Field Errors: A Community Solution

Ever wrestled with HubSpot's Design Manager, trying to add a simple link field to a custom module, only to be met with an unhelpful error message? You're not alone! Recently, a HubSpot user ran into this exact problem and took to the HubSpot Community for help. Let's break down the issue and the solutions that emerged, which could save you some headaches down the road.

The Case of the Mysterious Link Field Error

The original poster described encountering an error when creating a link field in the Design Manager, even in a brand new custom module with no other modifications. The error message pointed to an issue with the supported_types for the link field.

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}

The problem also seemed to affect URL fields, compounding the frustration.

The Root Cause: An Unsupported Type

A helpful community member pointed out that the supported_types array for a link field has a specific set of valid options, according to the HubSpot documentation. These include:

  • "EXTERNAL"
  • "CONTENT"
  • "FILE"
  • "EMAIL_ADDRESS"
  • "BLOG"
  • "CALL_TO_ACTION"
  • "PHONE_NUMBER"
  • "WHATSAPP_NUMBER"
  • "PAYMENT"

The error message revealed that "ANCHOR" was present in the supported_types array, which is not a valid option. This was likely being added automatically by the Design Manager, causing the error.

The Fix: Removing the Offending "ANCHOR"

The solution, confirmed by the original poster, was to remove "ANCHOR" from the list of supported URL types in the Design Manager. This immediately resolved the error. The user also reported that after removing “anchor” from the supported URL types in the design manager, the error message disappeared.

Here's how you can implement this fix:

  1. Open your custom module in the HubSpot Design Manager.
  2. Locate the link field that's causing the error.
  3. Examine the supported_types for that field.
  4. If you see "ANCHOR" in the list, remove it.
  5. Save your module.

If the issue persists, consider reporting it to HubSpot support, as it might indicate a platform bug.

A Workaround for Anchor Links

Another community member offered a more robust solution for handling anchor links, which involves creating a choice field to differentiate between regular links and anchor links. This approach provides a better user experience and keeps the code clean.

Here's the suggested method:

  1. Add a choice field (e.g., "link type") with "link" and "anchor" as values.
  2. Add a URL field ("button link") and a text field ("anchor"; not rich-text) to the module.
  3. Use conditional logic to show the appropriate field based on the selected link type.
  4. Write the module.html to handle both link types.
{% 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 #}
{{module.button_label}}
...

This method also includes a snippet to display the used anchor while building the page in the page editor:

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

Remember that anchor links are case-sensitive and don't allow spaces. Using the replace filter can help ensure that spaces are replaced with hyphens, preventing errors.

|replace(" ", "-")

ESHOPMAN Team Comment

This HubSpot Community discussion highlights a common frustration with custom module development: unexpected errors. The solution – removing the unsupported "ANCHOR" type – is a quick fix, but the suggested workaround for anchor links is a valuable long-term approach. We appreciate the community member's detailed explanation and code snippets. For ESHOPMAN users building online stores with HubSpot, understanding these nuances is crucial for creating seamless user experiences.

By understanding the valid supported_types and implementing the suggested workaround, you can create more flexible and user-friendly modules in HubSpot. Remember to always test your modules thoroughly and consult the HubSpot documentation when in doubt. And, of course, the HubSpot Community is a fantastic resource for troubleshooting and finding creative solutions to common problems.

Share: