Vue.js

It only takes a few minutes to install CometChat in your Vue.js app. Once installed, your users will be able to communicate with each other.

Before you begin…

  1. Signup for a free trial
    First select a plan from the CometChat Free Trial page, enter your email address and start your free trial.

  2. Note your API Keys
    Sign in to your CometChat Client Area and click on the Manage button and then note down the keys present in API Keys (top right button) section- API Key, Auth Key, License Key and App ID. You may need these during installation.

Install CometChat

CometChat provides two layouts to cater to your unique requirements.

a. Docked Layout

Our Docked Layout creates a floating chat widget at the bottom right/left corner of your website.

CometChat Docked Layout

i. Add CometChat Snippet to your template

Paste the code right before the closing </head> tag in the index.html page.

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
var chat_id = ''; // Intentionally left blank
var chat_name = ''; // Intentionally left blank
var chat_avatar = ''; // Intentionally left blank
var chat_link = ''; // Intentionally left blank

(function() {
    var css = document.createElement('link'); css.rel = 'stylesheet'; css.type = 'text/css'; css.href = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.css';
    document.getElementsByTagName("head")[0].appendChild(css);
    var js = document.createElement('script'); js.type = 'text/javascript'; js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(js, s);
})();
</script>

IMPORTANT: If you copied the code snippet above, make sure to replace APP_ID with your App ID and AUTH_KEY with your Auth Key.

ii. Initialise CometChat

In your module, once your user logs in, add the following code:

    window.chat_id = 'USER_UID'
    window.chat_name = 'USER_NAME'
    window.chat_avatar = 'USER_AVATAR'
    window.chat_link = 'USER_PROFILELINK'
    window.jqcc.cometchat.init();
How to use the code
  1. Paste the code once you login the user in your app
  2. IMPORTANT: The highlighted code will have to be modified to match the variables you've used.

b. Embedded Layout

Our Embedded Layout creates a chat widget in any page of your website.

CometChat Embedded Layout

i. Add CometChat Snippet to your template

Paste the code right before the closing </head> tag in the index.html page.

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
var chat_id = ''; // Intentionally left blank
var chat_name = ''; // Intentionally left blank
var chat_avatar = ''; // Intentionally left blank
var chat_link = ''; // Intentionally left blank
var chat_height = '600px';
var chat_width = '990px';
var chat_iframe = {}; // Intentionally left blank
</script>

IMPORTANT: If you copied the code snippet above, make sure to replace APP_ID with your App ID and AUTH_KEY with your Auth Key.

ii. Initialise CometChat

In your view, add the following code where you want to display the Embedded Layout:

<div id="cometchat_embed_synergy_container"></div>

And finally add the following code in the module when you want to load CometChat:

        window.chat_id = 'USER_UID'
        window.chat_name = 'USER_NAME'
        window.chat_avatar = 'USER_AVATAR'
        window.chat_link = 'USER_PROFILELINK'
        var js = document.createElement('script')
        js.type = 'text/javascript'
        js.src = 'https://fast.cometondemand.net/' + window.chat_appid + 'x_xchatx_xcorex_xembedcode.js'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(js, s)

        js.onload = function () {
          window.chat_iframe.style = 'width:' + window.chat_width + ';height:' + window.chat_height + ';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;'
          window.chat_iframe.module = 'synergy'
          window.chat_iframe.width = window.chat_width.replace('px', '')
          window.chat_iframe.height = window.chat_height.replace('px', '')
          window.chat_iframe.src = 'https://' + window.chat_appid + '.cometondemand.net/cometchat_embedded.php'
          if (typeof (window.addEmbedIframe) === 'function') {
            window.addEmbedIframe(window.chat_iframe)
          }
        }

IMPORTANT: The highlighted code will have to be modified to match the variables you've used.

Secure CometChat

IMPORTANT: Before you go live, follow our our security guide to ensure your integration is secure.

That's all folks!

Now you're ready to start using CometChat. Refer to our developer documentation if you'd like to further enhance CometChat.

Did this answer your question?
😃
😞