crm messaging logo

Setup Chats on Contact Detail Record Layout

To display SMS and WhatsApp chats related to the primary phone number on the contacts detail record page, add the provided JavaScript code in My Account -> Organization Settings -> Platform Branding.

This script waits for the contact detail page to load, identifies the primary phone number, and injects an iframe that displays chats from CRM Messaging related to this phone number.

(function() {
    var urlPattern = /^https:\/\/portal\.leadingcadre\.com\/crmContacts/;
    if (!urlPattern.test(window.location.href)) {
        console.error('This script runs only on URLs starting with https://portal.leadingcadre.com/crmContacts');
        return;
    }

    function waitForElementAndData(selector, dataCheckFunction, callback, maxAttempts = 50, interval = 100) {
        var attempts = 0;
        var checkInterval = setInterval(function() {
            var element = document.querySelector(selector);
            var data = dataCheckFunction();
            if (element && data) {
                clearInterval(checkInterval);
                callback(data); // Execute callback with the data
            } else if (attempts >= maxAttempts) {
                clearInterval(checkInterval);
                console.error("Unable to find the target element or data within the expected time.");
            }
            attempts++;
        }, interval);
    }

function getPrimaryPhoneNumber() {
    var contactFields = document.querySelectorAll('li.ng-scope');
    var phoneNumber = null;

    contactFields.forEach(function(field) {
        var titleElement = field.querySelector('.box-info-title');
        var infoTextElement = field.querySelector('.box-info-text');

        // Ensure both title and info text elements exist before proceeding
        if (titleElement && infoTextElement) {
            var titleText = titleElement.textContent.toLowerCase().trim();
            var infoText = infoTextElement.textContent || infoTextElement.innerText;
            
            // Specifically look for "primary phone" to distinguish it from other phone types like "work phone"
            if (titleText === 'primary phone' && !infoText.includes('@')) {
                // Use regex to match phone number patterns
                var matches = infoText.match(/\+?\d[\d\s\-()]{7,}/); // Adjust regex according to expected formats

                if (matches && matches.length > 0) {
                    phoneNumber = matches[0].replace(/\D/g, ''); // Clean the phone number by removing non-digit characters
                    return; // Exit the loop once the primary phone number is found
                }
            }
        }
    });

    return phoneNumber || false;
}

    function injectIframe(phoneNumber) {
        var targetDiv = document.querySelector('.col-xl-8.contactCrmRight');
        if (targetDiv && !document.getElementById('customIframe') && phoneNumber) {
            var label = document.createElement('label');
            label.textContent = 'Chats';
            label.style.display = 'block';
            label.style.marginBottom = '10px';

            var iframe = document.createElement('iframe');
            iframe.src = `https://app.crm-messaging.cloud/index.php/Hubspot/SendCustomMsg/$id/${phoneNumber}`;
            iframe.style.width = '100%';
            iframe.style.height = '600px';
            iframe.frameBorder = '0';
            iframe.id = 'customIframe';

            targetDiv.appendChild(label);
            targetDiv.appendChild(iframe);
        }
    }

    waitForElementAndData('.col-xl-8.contactCrmRight', getPrimaryPhoneNumber, injectIframe);
})();

In iframe src, make sure to replace the $id with your unique id of the account. Contact support to get this at [email protected]

Ensure the JavaScript is correctly inserted and matches the domain requirements to function properly on your SuiteDash platform.