Rocket.chat: How to embed livechat?

[k0nsl]

Hi,

I asked this in the demo chat hosted by Rocket.Chat developers. However, it may interest others as well. So I will create this issue instead.

The old code for embedding the livechat "widget" was something like this:

What's the new code to include on a page or blog for the live chat? The old one is defunct.
This is what I used prior to the new commits:

<script type="text/javascript">
    (function(w, d, s, f, u) {
        w[f] = w[f] || [];
        w[f].push(u);
        var h = d.getElementsByTagName(s)[0],
            j = d.createElement(s);
        j.async = true;
        j.src = 'https://myapp.tld/packages/rocketchat_livechat/livechat.js';
        h.parentNode.insertBefore(j, h);
    })(window, document, 'script', 'initRocket', 'https://myapp.tld/livechat');
</script>

This doesn't work any longer due to new changes. What is the new embed code?

Thanks in advance.

[sampaiodiego]

hello.. yeah, the code has changed..
Please use the code bellow (changing the domain entries):

    <script type="text/javascript">
    (function(w, d, s, f, u) {
        w[f] = w[f] || [];
        w[f].push(u);
        var h = d.getElementsByTagName(s)[0],
            j = d.createElement(s);
        j.async = true;
        j.src = 'https://demo.rocket.chat/packages/rocketchat_livechat/assets/rocket-livechat.js';
        h.parentNode.insertBefore(j, h);
    })(window, document, 'script', 'initRocket', 'https://demo.rocket.chat/livechat');
    </script>

The file /packages/rocketchat_livechat/assets/rocket-livechat.js has ES6 code and won't work on Safari. I'll fix this later today.

In the future, you'll be able to get this embed code ( updated :smile: ) in Livechat Settings on your Rocket.Chat instance. =)

[ungentilgarcon]

hello, were are you supposed to paste this code in fact?

regards

[sampaiodiego]

@ungentilgarcon in the place you want the livechat widget appears.
usually on your website.

[Eugene2799]

Hello, How to open user Admin's setting? livechat

regards

[mikhail-gaponov]

Hi @Zhangzhiyue,
Enable LiveChat

• Login as Admin and click at your name at top left corner
• Click "Administration" -> "Live Chat". Here is common part of configuration. Switch on "Enable"
• Save changes and close "Administration"

Сlick at your name at top left corner - Click "Live Chat" (above "Administration") -> here is "Live Chat" management (including Live Chats users).

[rishantagarwal]

@mikhail-gaponov -

I do not see Livechat option here . I have already enabled Live Chat from Admin Panel.

[sampaiodiego]

@rishantagarwal please double check and refresh the page.. the procedure described by @mikhail-gaponov is correct.

[YuniSocial]

Hi. I customized the styling for the embedded chatbox, how would I apply it to my own Rocket.Chat installation?

[guoxiangke]

Hi. I customized the styling for the embedded chatbox, how would I apply it to my own Rocket.Chat installation?

[rahul7471]

@YuniSocial @guoxiangke How to customise live chat window to something like chat button.
Also is there any way to use this embedded live chat for android app.
Need urgent help.
Thanks in advance .

[k0nsl]

A helpful GIF to the rescue!

[rahul7471]

@k0nsl thanks for quick reply.
I tried this earlier, but could not change rectangular live chat icon that appears on lower right to a button something like this

I Appearance >> preview, I changed from chat window to chat button then also I can not see desired changes.

[k0nsl]

@rahul7471: You're welcome. Do you mean the livechat-room class? In effect, this:

[rahul7471]

@k0nsl Instead of this rectangular red box, i want to make it as a chat button.

[ikamran]

i tried to us live chat plugin on wordpress but it just show on windows browser in visitors from mobile devices or tables can not see live chat support on right corner of my website, what is the problem?

[vikas0121]

How can we embed livechat iframe in some mobile apps to provide a good experience?

[renatobecker-zz]

How can we embed livechat iframe in some mobile apps to provide a good experience?

You can do this using WebView.
BTW, you can use our forum to ask such questions.

Thanks.