Launch AtomChat
  • 1 Minute to read
  • Dark
    Light

Launch AtomChat

  • Dark
    Light

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>



Was this article helpful?

What's Next