chatr / chatra Goto Github PK

Initially noticed it with this npm package, but it seems as though this is reproducible even with vanilla src method.

Demo

Recorded a quick video here.

Repro

1. In any environment, even just in an index.html include Chatra's starting script PLUS the customWidgetButton prop so that default chat button is hidden:

<script>
    (function(d, w, c) {
        w.ChatraID = 'your_id';
        var s = d.createElement('script');
        w[c] = w[c] || function() {
            (w[c].q = w[c].q || []).push(arguments);
        };
        s.async = true;
        s.src = 'https://call.chatra.io/chatra.js';
        if (d.head) d.head.appendChild(s);
    })(document, window, 'Chatra');

    window.ChatraSetup = {
	   customWidgetButton: '.custom-chat-button'
	};
</script>

<button
	class="custom-chat-button"
	onclick="Chatra('openChat', true)"
>
	Open chat
</button>

2. Important: open this file in a mobile WebKit browser. The function works fine if you're using the desktop viewport, but does not on mobile one. I was able to reproduce it in both iOS 16 and desktop Safari 16.4, though you can get more info from the desktop Safari console for some reason.
3. Click on the Open chat button.

Expected

Chat window to open.

Result

Looking through the inspector, I can see that the chatra--safari gets chatra--expanded class, though visually nothing changes.

Hi! I am working on a custom chat button inside sidebar
And looking for some api reference to check if there are some new messages appeared til last page load
Something like onNewMessage callback, just to show some visual tip for user, but on init

It's nice that you already have an npm package. Some typings for TS will be helpful. Thanks!

Getting a continuous 'web-socket disconnected' and 'page not found' loop whenever the widget loads. Specifically error 404.