Customizable website chat widget

Question

I have a website where visitors first log in and then watch videos, and I want them to be able to exchange chat messages with my support agents as they're watching the videos.

I'm looking for a chat tool that has all (or at least most) of these features:

• Since my site visitors have already provided their email address and name, the chat widget automatically "logs in" the visitor using data available in Javascript on the page (so that chat agents can see the visitor's name, email address, location, device info, etc). (I think Userlike.com allows this.)
• On both mobile browsers and desktop browsers, the chat box is highly customizable. E.g. If I don't want to require visitors to click an icon to open a textarea chat window, I could set it such that a chat textarea is already immediately visible. I'd love to also control the placeholder text and the prompts above it.
• I can instantly change what visitors see (without the visitor needing to refresh the page) in the sense that: when agents have indicated that they are "available", the chat widget is visible. And if all agents become unavailable, I can choose whether the entire chat widget immediately becomes invisible (to all visitors who might see it right now) or shows some kind of message about it being unavailable.
• The system keeps a database of all chat activity, including contact info, timestamps, and the custom data that was sent via javascript (so that I can later analyze "At what points of our videos did visitors want to ask us questions?")
• Agents receive push notifications on an iOS app and can respond to customers' chats there (Tawk.to allows this).
• It would be great if javascript events on the page (such as the visitor reaching certain moments in watching certain videos) could be sent to the chat widget automatically (and without the visitor seeing it in the chat conversation) to keep the agent informed minute by minute about what the visitor is experiencing on the page.

If you have suggestions, I'd appreciate them!

P.S. I'm a software engineer, and my site uses Laravel. If there is an easy way to accomplish this with https://laravel.com/docs/5.6/broadcasting and Pusher, I'm open to that. But my hunch is that tools already exist and that I won't need to code something myself.

Answer 1

Tawk.to has an iOS app and seems customizable enough for me to try out.

Even though I knew about Tawk.to back when I asked this question, I had never been able to find this documentation about how to set the visitor's email address, etc.

Here is most of my code:

var startChatBtn = $('#startChatBtn');
startChatBtn.hide();
var visitorData = {
    name: $('#tawktoData').attr('data-name'),
    email: $('#tawktoData').attr('data-email'),
    hash: $('#tawktoData').attr('data-hash')
};
console.log('tawk visitorData', visitorData);
window.Tawk_API.visitor = visitorData;
var hasChatted = false;

window.Tawk_API.onChatStarted = function () {
    console.log('onChatStarted');
    hasChatted = true;
};

window.Tawk_API.onChatMinimized = function () {
    console.log('onChatMinimized');
    window.Tawk_API.hideWidget();
    showChatBtnIfOnline();
};

window.Tawk_API.onChatHidden = function () {//https://www.tawk.to/javascript-api/#onChatHidden
    console.log('onChatHidden');
    showChatBtnIfOnline();
};

window.Tawk_API.onStatusChange = function (status) {
    console.log('window.Tawk_API.onStatusChange');
    if (status === 'away' || status === 'offline') {
        if (!hasChatted) {
            startChatBtn.hide();
        }
    } else {
        showChatBtnIfOnline();
    }
    window.Tawk_API.hideWidget();
    window.Tawk_API.minimize();//https://www.tawk.to/javascript-api/#minimize
};

tawkto_helper.onLoad.done(function () {
    //window.Tawk_API.hideWidget();//Is "Hide widget on load" enabled? https://dashboard.tawk.to/#/admin/5a9480/default/widget-settings 
    //window.Tawk_API.setAttributes(visitorData, function (error) {});//Instead of waiting for onLoad, maybe by setting window.Tawk_API.visitor immediately (even before load), I can have the first iOS app notification include visitor data.
    console.log('tawkto_helper.onLoad');
    showChatBtnIfOnline();
});

function showChatBtnIfOnline() {
    console.log('showChatBtnIfOnline window.Tawk_API.getStatus()', window.Tawk_API.getStatus());
    if (window.Tawk_API.getStatus() === 'online') {
        startChatBtn.show();
    }
}

function tawkAddEvent(name, payload, errorCallback) {
    tawkto_helper.onLoad.done(function () {
        window.Tawk_API.addEvent(name, payload, errorCallback);
    });
}

startChatBtn.click(function () {//There is not a race condition because startChatBtn will only ever be visible if Tawk_API has already loaded
    console.log('startChatBtn.click');
    window.Tawk_API.maximize();
    startChatBtn.hide();
});