APIs & Integrations

CButler1221
Member

Notification Bubble on Platform

Hello!

I have recently integrated the conversations Chat widget onto our Real Estate Investing platform. It has been working out great, but I can't seem to figure out how to make a notification bubble appear when a chat is sent from a Contact Owner (coworker) on our end.

Here is the basic JS that I have added:

 

 

// Step 1: Prevent Immediate Load
window.hsConversationsSettings = {
    loadImmediately: false,
    inlineEmbedSelector: '#acctManagerHubspotChatBox',
    enableWidgetCookieBanner: true,
    disableAttachment: false,
};

// Function to fetch the identification token from your backend
function fetchIdentificationToken(email) {
    return $.ajax({
        url: '/umbraco/surface/InvestorDashboardForms/GenerateIdentificationToken',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ email: email }),
        dataType: 'json'
    });
}

// Function to initialize the HubSpot chat
function initializeHubSpotChat() {
    var userEmail = document.getElementById("currentMemberEmail").value;

    fetchIdentificationToken(userEmail).done(function (data) {
        if (data.token) {
            window.hsConversationsSettings.identificationEmail = userEmail;
            window.hsConversationsSettings.identificationToken = data.token;

            function onConversationsAPIReady() {
                console.log(`HubSpot Conversations API: ${window.HubSpotConversations}`);
                var chatHeader = document.querySelector('nav.WidgetHeaderStyleWrapper__BackgroundPanelContent-wctsqo-1.UXiHO.widget-background-panel');
                if (chatHeader) {
                    chatHeader.style.display = 'none';
                }
                window.HubSpotConversations.widget.load();
            }

            if (window.HubSpotConversations) {
                onConversationsAPIReady();
            } else {
                window.hsConversationsOnReady = [onConversationsAPIReady];
            }
        } else {
            console.error('Failed to fetch identification token');
        }
    }).fail(function (xhr, status, error) {
        console.error('Failed to fetch identification token', status, error);
    });
}

 

 

And my HTML:

 

 

<div id="floatingAccountManagerBlock" style="display: none;">
<span class="closeButton"></span>
<table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; border: none; margin: 0;">
    <tbody>
        <tr>
            <td style="vertical-align: middle; border: none;">
                <h2 style="margin: 0px; font-size: 18px; color: rgb(0, 0, 0); font-weight: 600;">
                    <span id="acctManagerName">@acctManagerName</span>
                </h2>
                <p style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;">
                    <span>Account Manager</span>
                </p>
            </td>
            <td style="vertical-align: top; border: none;">
                <table cellpadding="0" cellspacing="0" border="0" style="font-size: medium; border: none; margin: 0; border: none; border-left: 1px solid #e1e1e1;">
                    <tbody>
                        <tr height="25" style="vertical-align: middle; border: none;">
                            <td width="30" style="vertical-align: middle; border: none;">
                                <i class="icon usn_ion-ios-call"
                                   title=""
                                   style="padding: 2px 5px;"> </i>
                            </td>
                            <td style="padding: 0px; color: rgb(0,0,0); border: none; font-weight: 400;">
                                <a href="tel:602-714-1555%20x%20{@acctManagerExtent}" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 15px;" target="_blank">
                                    <span id="acctManagerPhone">602-714-1555 x @acctManagerExtent</span>
                                </a>
                            </td>
                        </tr>
                        <tr height="25" style="vertical-align: middle; border: none;">
                            <td width="30" style="vertical-align: middle; border: none;">
                                <i class="icon usn_ion-ios-mail"
                                   title=""
                                   style="padding: 2px 5px;"> </i>
                            </td>
                            <td style="padding: 0px; border: none; font-weight: 400;">
                                <a href="mailto:@acctManagerEmail" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 15px;" target="_blank">
                                    <span id="acctManagerEmail">@acctManagerEmail</span>
                                </a>
                            </td>
                        </tr>
                        <tr height="25" style="vertical-align: middle; border: none;">
                            <td width="30" style="vertical-align: middle; border: none;">
                                <i class="icon usn_ion-ios-calendar"
                                   title=""
                                   style="padding: 2px 5px;"> </i>
                            </td>
                            <td style="padding: 0px; border: none; font-weight: 400; ">
                                <a id="acctManagerScheduleMeeting" href="@acctManagerScheduleMeeting" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 15px;" target="_blank">
                                    <span>Schedule a meeting</span>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
<br />
<div id="acctManagerBox" style="display: flex;">
</div>
<div id="acctManagerChatBox" style="text-align: center; position: relative; width: 100%;">
    <input id="currentMemberEmail" name="currentMemberEmail" type="hidden" value="@currentMemberEmail" class="form-control" />
    <div id="acctManagerHubspotChatBox">
        <div id="hubspot-conversations-inline-parent">
        </div>
    </div>
</div>
</div>

 

 

 

0 Upvotes
1 Reply 1
Jaycee_Lewis
Community Manager
Community Manager

Notification Bubble on Platform

Hi, @CButler1221 👋 Thanks for the interesting question. Let's invite a few of our community members to the conversation — hey @Anton @zach_threadint @dsmarion have you tackled anything similar recently?

 

Thank you for taking a look! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes