How to automatically capture customer’s login info in your Webchat widget

If you already have your customer logged in to your website, make their lives easier and pass their login info to the bot, so that it doesn’t ask for it again. So, the bot will capture user’s data effectively once he opens the webchat widget.

Let’s dive in!

We’ll use this original snippet example as a guide to demonstrate how to insert the new custom code:

<div id="embedded_messenger">
                <div id="widget-launcher"></div>
                <iframe id="dstnyEngage_client" src="https://webchat.dstnyengage.com/webchat/chatChannel.html"></iframe>
            </div>
            <script src="https://webchat.dstnyengage.com/webchat/embed/embed.js"></script>
            <link rel="stylesheet" href="https://webchat.dstnyengage.com/webchat/css/embed.css" />
            <script>
                var profileId = "xxx";
                var token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
                DstnyEngage.start({ profileId: profileId, token: token });
            </script>

Passing user’s data

To capture the data of the user who’s logged in to your website, your website developer must provide this data as an object within the user key when calling the DstnyEngage.start function inside your snippet code.

Example

<div id="embedded_messenger">
                <div id="widget-launcher"></div>
                <iframe id="dstnyEngage_client" src="https://webchat.dstnyengage.com/webchat/chatChannel.html"></iframe>
            </div>
            <script src="https://webchat.dstnyengage.com/webchat/embed/embed.js"></script>
            <link rel="stylesheet" href="https://webchat.dstnyengage.com/webchat/css/embed.css" />
            <script>
                var profileId = "xxx";
                var token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
                // Get the logged-in user data
                const loggedInUser = getLoggedInUserData();
                DstnyEngage.start({ profileId: profileId, token: token, user:loggedInUser });
            </script>

Captured data

Here are the attributes that the loggedInUser object can have:

"email": "string",
"name": "string",
"whatsapp_number": "string",
"phone_number": "string",
"preferred_language": "string",
"country": "string",
"city": "string",
"area": "string",
"address_details": "string",
"organization": "string",
"title": "string",
"department": "string",

Make sure that you use the variables in your website login code, for example:

"email": current_user.email,

ℹ️ The customer identifier is the email; so it is mandatory to pass the email in the user key.

Logging out

When your customer logs out, the developer should trigger the logging out event and call the DstnyEngage.logout function.

Example

  // Add an event listener to the logout button
   
   document.getElementById("logoutButton").addEventListener("click", function() {
       DstnyEngage.logout(); // Call the logout function when the button is clicked
   });