CometChat provides two layouts that you can use on your website.
Docked Layout
The Docked Layout is a chat widget that can float on either side of your page.
Launch CometChat
You can add this code to your site template-
<!-- USER MANAGEMENT CODE -->
<!-- Refer to User Management guide for this code -->
<!-- LAUNCH COMETCHAT CODE -->
<script type="text/javascript">
var chat_appid = 'XXXXX';
var chat_auth = 'AUTH_KEY';
var chat_position = 'right';
(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>
| Variable | Description | Mandatory |
|---|---|---|
| chat_appid | Your App ID | Yes |
| chat_auth | Authentication Key. For More Details Click Here | Recommended |
| chat_position | Position of widget (right/left) | No |
Launch Private Chat
To launch a private chat window, use the following Javascript code, on any site page (which has the Docked Layout code from above).
<a href="javascript:jqcc.cometchat.launch({uid:'1'});">Chat with Alex</a>
Launch Group Chat
To launch a group chat window, use the following Javascript code, on any site page (which has the Docked Layout code from above).
<a href="javascript:jqcc.cometchat.launch({guid:'1'});">Chat in Hangouts group</a>
Want to hide the Chat tab?
For some use cases, you may not want to show the CometChat tab at all. You can add
#cometchat_userstab {display:none;}CSS style inCometChat Admin Panel->Settings->Editor.
Embedded Layout
The Embedded Layout can be added to any part of the site. Think of it as an all-inclusive chat solution within your site.
To add Embedded Layout, use the following code on any site page-
<!-- USER MANAGEMENT CODE -->
<!-- Refer to User Management guide for this code -->
<!-- LAUNCH COMETCHAT CODE -->
<script>
var chat_appid = 'XXXXX';
var chat_auth = 'AUTH_KEY';
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>
| Variable | Description | Mandatory |
|---|---|---|
| chat_appid | Your App ID | Yes |
| chat_auth | Authentication Key. For More Details Click Here | Recommended |
Embed Only Groups
<!-- USER MANAGEMENT CODE -->
<!-- Refer to User Management guide for this code -->
<!-- LAUNCH COMETCHAT CODE -->
<script>
var chat_appid = 'XXXXX';
var chat_auth = 'AUTH_KEY';
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?chatroomsonly=1'; if(typeof(addEmbedIframe)=="function"){addEmbedIframe(chat_iframe);}
}
var chat_script = document.getElementsByTagName('script')[0]; chat_script.parentNode.insertBefore(chat_js, chat_script);
</script>
| Variable | Description | Mandatory |
|---|---|---|
| chat_appid | Your App ID | Yes |
| chat_auth | Authentication Key. For More Details Click Here | Recommended |
Embed A Single Group
<!-- USER MANAGEMENT CODE -->
<!-- Refer to User Management guide for this code -->
<!-- LAUNCH COMETCHAT CODE -->
<script>
var chat_appid = 'XXXXX';
var chat_auth = 'AUTH_KEY';
var chat_groupid = '1';
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?guid='+chat_groupid; if(typeof(addEmbedIframe)=="function"){addEmbedIframe(chat_iframe);}
}
var chat_script = document.getElementsByTagName('script')[0]; chat_script.parentNode.insertBefore(chat_js, chat_script);
</script>
| Variable | Description | Mandatory |
|---|---|---|
| chat_appid | Your App ID | Yes |
| chat_auth | Authentication Key. For More Details Click Here | Recommended |
| chat_groupid | Group GUID | Yes |
Updated about a year ago