Vanilla Forums

It only takes a few minutes to install CometChat on your website. 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

You can copy the code snippet from your CometChat Client Area (where we pre-populate your App ID for you). Or you can quickly grab it from here instead.

Paste the following code right before the closing </body> tag of every page where you want CometChat to appear. Ideally, you can add this code to your footer template.

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<script>
String.prototype.hashCode = function() {var hash = 0, i, chr;if (this.length === 0) return hash;for (i = 0; i < this.length; i++) {chr = this.charCodeAt(i);hash = ((hash << 5) - hash) + chr;hash |= 0;} return hash;};
if (document.querySelectorAll('.MeBox .PhotoWrap')[0].getAttribute('title') !== undefined) {
var chat_name = document.querySelectorAll('.MeBox .PhotoWrap')[0].getAttribute('title');
var chat_link = document.querySelectorAll('.MeBox .PhotoWrap')[0].getAttribute('href');
var chat_id = document.querySelectorAll('.MeBox .PhotoWrap')[0].getAttribute('href').hashCode();
var chat_avatar = document.querySelectorAll('.MeBox .PhotoWrap img')[0].getAttribute('src');
}
</script>
<script>
(function() {
    var chat_css = document.createElement('link'); chat_css.rel = 'stylesheet'; chat_css.type = 'text/css'; chat_css.href = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.css';
    document.getElementsByTagName("head")[0].appendChild(chat_css);
    var chat_js = document.createElement('script'); chat_js.type = 'text/javascript'; chat_js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.js'; var chat_script = document.getElementsByTagName('script')[0]; chat_script.parentNode.insertBefore(chat_js, chat_script);
})();
</script>

Where to add this code?

  1. Go to your Vanilla Forums Dashboard.
  2. Click on Customize Theme under the Appearance tab.

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.

b. Embedded Layout

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

CometChat Embedded Layout

You can copy the code snippet from your CometChat Client Area (where we pre-populate your App ID for you). Or you can quickly grab it from here instead.

Paste the the following code in any page of your site where you want CometChat to appear.

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<script>
String.prototype.hashCode = function() {var hash = 0, i, chr;if (this.length === 0) return hash;for (i = 0; i < this.length; i++) {chr = this.charCodeAt(i);hash = ((hash << 5) - hash) + chr;hash |= 0;} return hash;};
if (document.querySelectorAll('.MeBox .PhotoWrap')[0].getAttribute('title') !== undefined) {
var chat_name = document.querySelectorAll('.MeBox .PhotoWrap')[0].getAttribute('title');
var chat_link = document.querySelectorAll('.MeBox .PhotoWrap')[0].getAttribute('href');
var chat_id = document.querySelectorAll('.MeBox .PhotoWrap')[0].getAttribute('href').hashCode();
var chat_avatar = document.querySelectorAll('.MeBox .PhotoWrap img')[0].getAttribute('src');
}
</script>
<script>
var chat_height = '600px';
var chat_width = '990px';

document.write('<div id="cometchat_embed_synergy_container" style="width:'+chat_width+';height:'+chat_height+';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;"></div>');

var chat_js = document.createElement('script'); chat_js.type = 'text/javascript'; chat_js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchatx_xcorex_xembedcode.js';
chat_js.onload = function() {
    var chat_iframe = {};chat_iframe.module="synergy";chat_iframe.style="min-height:"+chat_height+";min-width:"+chat_width+";";chat_iframe.width=chat_width.replace('px','');chat_iframe.height=chat_height.replace('px','');chat_iframe.src='https://'+chat_appid+'.cometondemand.net/cometchat_embedded.php'; if(typeof(addEmbedIframe)=="function"){addEmbedIframe(chat_iframe);}
}
var chat_script = document.getElementsByTagName('script')[0];chat_script.parentNode.insertBefore(chat_js, chat_script);
</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.

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?
😃
😞