Add AtomChat to a JavaScript Website

Here’s how the integration should look:

First Section

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!

3. Secure Your Environment
   To ensure successful integration, your domain or local environment must be:

• ✅ SSL Certified
• ✅ Served over HTTPS

Choose a Layout

• First Section

AtomChat offers two layout modes:

1. Docked Layout

   • A floating chat widget at the bottom-right or bottom-left of your website.

2. Embedded Layout

   • Embeds the chat interface within a specific section of your page.

⚠️ Important:
You should not use both layouts on the same page. Doing so may cause erratic behavior in the chat experience.

Docked Layout Preview

Embed Code (Paste Before </body>)

Paste the following code just before the closing </body> tag on every page where you want AtomChat to appear:

Embed Code (Paste Before </body>)

Paste the following code just before the closing </body> tag on 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>
  (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 in the code above with your actual keys from your AtomChat Admin Panel → API Keys section.

Embedded Layout Preview

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>

📝 NOTE: Please replace the "APP_ID" and "AUTH_KEY" values in the code above with your actual keys from your AtomChat Admin Panel → API Keys section.

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 :)