Add AtomChat to your Basic Javascript website
  • 1 Minute to read
  • Dark
    Light

Add AtomChat to your Basic Javascript website

  • Dark
    Light

1. Sign-up for a Free Trial 

You can select a suitable plan from AtomChat's pricing page and sign up for a 14-day free trial!

2. Note Your API Keys 

  • Sign in to your Dashboard and click on the Manage button

  • You will see API Keys on the top right. You can copy your keys from here!

API Keys

3. Secure your environment 

For successful integration, please ensure your domain or local environment is 

SSL certified and secure.

Choose a Layout

AtomChat offers two Layouts

1. Docked Layout creates a floating chat widget at the bottom right/left corner of your website.

2. Embedded Layout embeds a chat interface inside any page of your website.

4. Setting up the Docked Layout

RcuIaY6bb8qCeI46sOl1G_docked-layoutn


Paste the code below right before the closing tag of every page where you 

want AtomChat to appear.


Ideally, you can add this code to your website's footer template.

<script>
  var chat_appid = 'APP_ID';
  var chat_auth = 'AUTH_KEY';
    var chat_id = 'USER_UID';
    var chat_name = 'USER_NAME';
    var chat_avatar = 'USER_AVATAR';
    var chat_link = 'USER_PROFILELINK';
</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>
NOTE
Please replace the "APP_ID" and "AUTH_KEY" values of the code with your own Keys from your AtomChat Admin Panel -> Settings -> API Keys

5. Setting up the Embedded Layout

Embedded


Paste the code below right before the closing tag of every page where 

you want AtomChat to appear.

<script>
  var chat_appid = 'APP_ID';
  var chat_auth = 'AUTH_KEY';
    var chat_id = 'USER_UID';
    var chat_name = 'USER_NAME';
    var chat_avatar = 'USER_AVATAR';
    var chat_link = 'USER_PROFILELINK';
</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>

6. Contact Sync 


Your user list on AtomChat will get populated and they will be visible in the Chat Contact list once they log in to your website after integrating AtomChat. So, users are added on-the-fly as they login.

You can also enable Guest chat for non-logged-in users. 

Need help Integrating?


We've got you! Please Contact Us if you need any help or have questions.

You can also schedule a remote Integration Assistance meeting with our team of experts! 

Happy to help :)