Adding Clickable Links to Contact Fields

Overview

This feature enhances your CRM interface by automatically converting URL fields in contact details and opportunity records into clickable links with an external link icon. Instead of copying and pasting URLs from text fields, users can click directly on field labels to open links in a new tab.

What it does:

• Detects text fields containing URLs (starting with "http")
• Converts the field label into a clickable link
• Adds an external link icon for visual clarity
• Works on both contact detail pages and opportunity list pages

Installation Instructions

Follow these steps to add the clickable link functionality to your CRM:

Step 1: Access Agency Settings

1. Navigate to Settings in your CRM
2. Select Company Settings
3. Click on White Label

Step 2: Add the Custom Script

1. Scroll down to the Custom JS field
2. Copy the complete script below (including the opening and closing <script> tags)
3. Paste the script into the Custom JS field

html

<script>
// Configuration for contact detail pages
const contactFieldClass = "hr-form-item";
const contactInputSelector = "div.hr-form-item-blank input[type='text']";
const contactLabelSelector = "label.hr-form-item-label";

// Configuration for opportunity pages
const opportunityFieldClass = "hr-form-item";
const opportunityInputSelector = "input[type='text']";
const opportunityLabelSelector = "label.hr-form-item-label span";

// Set up mutation observer
const observerTarget = document.body;
const observerConfig = { childList: true, subtree: true };

// Main callback function to process mutations
const processPageChanges = function(mutations, observer) {
  // Handle contact detail pages
  if (window.location.href.includes("/contacts/detail/")) {
    for (let mutation of mutations) {
      if (mutation.type === "childList") {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            convertUrlFieldsToLinks(node, contactInputSelector, contactLabelSelector, contactFieldClass);
          }
        });
      }
    }
  }
  
  // Handle opportunity list pages
  if (window.location.href.includes("/opportunities/list")) {
    for (let mutation of mutations) {
      if (mutation.type === "childList") {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            convertUrlFieldsToLinks(node, opportunityInputSelector, opportunityLabelSelector, opportunityFieldClass);
          }
        });
      }
    }
  }
};

// Function to convert URL fields to clickable links
const convertUrlFieldsToLinks = function(element, inputSelector, labelSelector, fieldClass) {
  if (element.classList && element.classList.contains(fieldClass)) {
    let inputField = element.querySelector(inputSelector);
    
    if (inputField && inputField.value.startsWith("http")) {
      let labelElement = element.querySelector(labelSelector);
      
      if (labelElement) {
        // Create clickable link
        let link = document.createElement("a");
        link.href = inputField.value;
        link.target = "_blank";
        link.textContent = labelElement.textContent;
        
        // Replace label text with link
        labelElement.textContent = "";
        labelElement.appendChild(link);
        
        // Add external link icon
        let icon = document.createElement("i");
        icon.classList.add("fas", "fa-external-link-alt");
        icon.style.marginLeft = "5px";
        link.appendChild(icon);
      }
    }
  } else {
    // Recursively check child nodes
    element.childNodes.forEach((child) => convertUrlFieldsToLinks(child, inputSelector, labelSelector, fieldClass));
  }
};

// Initialize observer
const urlFieldObserver = new MutationObserver(processPageChanges);
urlFieldObserver.observe(observerTarget, observerConfig);
</script>

Step 3: Save Changes

1. Click Save or Update to apply the changes
2. The script will now be active across your CRM instance

Step 4: Verify Installation

1. Open any contact detail page or opportunity record
2. Look for custom fields containing URLs (must start with "http" or "https")
3. The field label should now be clickable and display an external link icon
4. Click the label to test that it opens the URL in a new tab

How It Works

The script uses a mutation observer to monitor page changes and automatically detect URL fields. When it finds a text field containing a URL:

1. It identifies the field's label element
2. Converts the label text into a clickable link
3. Adds an external link icon next to the label
4. Sets the link to open in a new browser tab

Use Cases

This feature is particularly useful when working with LinkedIn for Workflows or similar integrations that store profile URLs in custom fields:

• LinkedIn Profile URLs: Click directly on the "LinkedIn Profile" label to open a contact's LinkedIn page
• Company Websites: Access company websites from opportunity records
• Social Media Links: Quickly navigate to social profiles stored in custom fields
• Any HTTP/HTTPS URL: Works with any field containing a valid URL

Troubleshooting

Links are not appearing:

• Verify the script was saved correctly in the Custom JS field
• Ensure URLs in your fields start with "http://" or "https://"
• Refresh the page after adding URLs to existing records
• Check browser console for any JavaScript errors

Links open but go to the wrong page:

• Confirm the URL stored in the field is complete and valid
• Make sure there are no extra spaces before or after the URL

Script conflicts with other customizations:

• If you have other custom scripts, ensure they are compatible
• Test by temporarily removing other scripts to isolate the issue