Launch AtomChat

Modified on Tue, 03 Jan 2023 at 06:35 PM

AtomChat's Docked Layout is the popup floating chat bubble that will appear on the bottom right or left-hand side of your website.

Launch AtomChat

<!-- USER MANAGEMENT CODE -->

<!-- Refer to User Management guide for this code -->

<!-- LAUNCH ATOMCHAT 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	Your Authentication Key	Recommended
chat_position	Position of widget (right/left)	No

Launch Private Chat

To launch or open a private chat window, use the following Javascript code, on any site page (which has AtomChat's Docked Layout code from above).

<a href="javascript:jqcc.cometchat.launch({uid:'1'});">Chat in Hangouts group</a>

Want to hide the Docked Chat tab?

In some cases, you may only want AtomChat to Launch on button-click and not show the floating docked layout at all.

For this, you can add custom CSS code to your AtomChat Admin Panel -> Settings -> Editor -> Custom CSS

#cometchat_userstab_popup, #cometchat_userstab{
    display: none !important;
}

Please Save this and Enable Custom CSS.

Launch Embedded Layout

The Embedded Layout can be added to any part of your website. It can be a full-screen inbox-type layout on a page or an embedded chat window for users on a particular page.

To launch the Embedded Layout, please 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.	Recommended

You can also launch an Embed Only 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_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>