HubSpot HubL: Handling All URL Types in a Button Module Using URL Field

When building HubSpot modules, handling different URL types correctly is essential for a seamless user experience. HubSpot’s URL field supports multiple types, including external links, internal content, files, emails, phone numbers, and even WhatsApp. To ensure your button links work as expected across all these types, you can use the following HubL code snippet. This snippet dynamically adjusts the href attribute based on the URL type while also handling special cases like mailto: for emails and tel: for phone numbers.

For more details on HubSpot’s URL field and its supported types, check out HubSpot’s documentation. 🚀

  
{% set button_href = module.button.url_field.href_with_scheme|escape_url %}
        {% set popup_class = "" %}
        {% set new_tab = false %}

        {% if module.button.url_field.type == "EMAIL_ADDRESS" %} 
          {% set button_href = "mailto:" ~ module.button.url_field.href %}
        {% elif module.button.url_field.type == "PHONE_NUMBER" %}
          {% set button_href = "tel:" ~ module.button.url_field.href %}
        {% elif module.button.url_field.type == "WHATSAPP_NUMBER" %}
          {% set button_href = "https://wa.me/" ~ module.button.url_field.href|replace("+", "")|escape_url %}
        {% elif module.button.url_field.type == "FILE" or module.button.url_field.type == "EXTERNAL" %}
          {% set new_tab = true %}
        {% elif module.button.url_field.type == "CONTENT" or module.button.url_field.type == "BLOG" %}
          {% set button_href = module.button.url_field.href|escape_url %}
        {% else %}
          {% set button_href = module.button.url_field.href|escape_url %}     
        {% endif %}

        <a class="{{ module.button.css_classes }}{% if popup_class %} {{ popup_class }}{% endif %}" href="{{ button_href }}" target="_blank" rel="noopener">
          {{ module.button.text }}
        </a>