Recent searches


No recent searches

How to make Messaging widget show Talk widget via MutationObserver

Answered


Posted Jan 25, 2024

Some background about this matter:
https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/voice-messaging-qs/

Since the Messaging widget's "Answers" (flow bot) cannot direct the user to Embedded Talk, the guide above was created as a workaround, where users can open the Talk widget by manually clicking a button in the website instead.
If you want users to call you via Embedded Talk, you make the flow bot explain where to find the "Call us now" button that you created.

Now, rather than instruct users to look for the button, I want to make a JavaScript where the Talk widget gets automatically activated if the Messaging widget utters a key phrase (e.g., "You are now being redirected to our Talk widget").
According to Zendesk Support, this can be done using MutationObserver:
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

I can't ask Support to give me the exact code to write to make this work for my Help Center since it's out of their scope, but I was hoping the Community can help me out instead?

Could you guys help me write a JavaScript that uses MutationObserver to make the Talk widget open when the Messaging widget utters a key phrase? If possible, let's also add a rule that the instance only listens for the key phrase when the widget is clicked on ("Open" status).

Thanks in advance!
Christian


0

1

1 comment

image avatar

Brandon (729 Test)

Zendesk LuminaryUser Group LeaderThe Humblident Award - 2021Community Moderator

Haven't tested this, but it should look something like this:

// Function to open the Embedded Talk widget
function openTalkWidget() {
    // Logic to open the Talk widget goes here
    console.log('Opening Embedded Talk Widget...');
    // Example: window.location.href = 'URL_TO_EMBEDDED_TALK_WIDGET';
}

// Function to observe changes in the Messaging widget
function observeMessagingWidget() {
    // Define the key phrase to look for
    const keyPhrase = "You are now being redirected to our Talk widget";
    
    // Select the DOM element that contains the messages (adjust the selector as needed)
    const targetNode = document.querySelector('.messaging-widget-messages');

    // Create an observer instance
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                mutation.addedNodes.forEach(node => {
                    if (node.textContent.includes(keyPhrase)) {
                        openTalkWidget();
                    }
                });
            }
        });
    });

    // Observer configuration
    const config = { childList: true, subtree: true };

    // Start observing
    observer.observe(targetNode, config);
}

// Function to check if the Messaging widget is open
function isMessagingWidgetOpen() {
    // Logic to determine if the widget is open
    // Example: Check for a specific class or attribute in the widget's container
    return document.querySelector('.messaging-widget-container.open') !== null;
}

// Event listener for the Messaging widget
document.querySelector('.messaging-widget-toggle').addEventListener('click', () => {
    if (isMessagingWidgetOpen()) {
        observeMessagingWidget();
    }
});

This script assumes that you have specific selectors for your Messaging and Talk widgets. You'll need to adjust .messaging-widget-messages, .messaging-widget-container, and .messaging-widget-toggle to match the actual classes or IDs used in your widgets.

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post