Launch AtomChat

Modified on Tue, 3 Jan, 2023 at 6: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>



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article