Add AtomChat to your Softr

Softr is the easiest way to build a no-code Online Community, Marketplace, Internal Tool, Client Portal, or website.
AtomChat is the easiest way to add chat and collaboration to it!

🚀 Before You Start

1. Sign up for your own AtomChat account.
   ✅ A 14-day free trial is available with access to all features based on your selected plan.

2. Note your API Keys

   • Login to your AtomChat dashboard: http://app.atomchat.com
   • Click on the Manage button to access the Admin Panel.
   • Locate the API Keys in the top right.

3. Ensure a Secure Environment

   • Softr apps are secure by default. No extra steps needed!

🧱 Choose a Layout

AtomChat offers two layout options:

1. Docked Layout

A floating chat widget on the bottom right/left corner of your website.

2. Embedded Layout

Embeds a chat interface directly inside any page of your website.

⚠️ Important: Do not use both layouts on the same page to avoid erratic behavior.

🛠 Setting up the Docked Layout

1. Login to your Softr.io dashboard
2. Open your application in Studio.
3. Navigate to Settings → Custom Code
4. Paste the following code (replace placeholders with actual values from AtomChat Admin Panel):

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
var chat_id = window['logged_in_user']['airtable_record_id'];
var chat_name = window['logged_in_user']['YOUR_AIRTABLE_FIELD_NAME_FOR_USERNAME'];
var chat_avatar = window['logged_in_user']['YOUR_AIRTABLE_FIELD_NAME_FOR_PROFILE_PICTURE'];
var chat_role = window['logged_in_user']['YOUR_AIRTABLE_FIELD_NAME_FOR_USER_ROLE'];
var chat_email = window['logged_in_user']['YOUR_AIRTABLE_FIELD_NAME_FOR_EMAIL'];
</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.at.js';
  var chat_script = document.getElementsByTagName('script')[0];
  chat_script.parentNode.insertBefore(chat_js, chat_script);
})();
</script>

🖼 Setting up the Embedded Layout

1. Login to your Softr.io dashboard.
2. Open your application in Studio.
3. Navigate to Pages and create a new page.
4. Edit that page → Click the “+” icon → Select Custom Code block.
5. Add the following code:

<div class="w-100 text-center">
  <p class="h6">
    <div id="cometchatContainer"></div>
  </p>
</div>

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
var chat_id = window['logged_in_user']['airtable_record_id'];
var chat_name = window['logged_in_user']['YOUR_AIRTABLE_FIELD_NAME_FOR_USERNAME'];
var chat_avatar = window['logged_in_user']['YOUR_AIRTABLE_FIELD_NAME_FOR_PROFILE_PICTURE'];
var chat_role = window['logged_in_user']['YOUR_AIRTABLE_FIELD_NAME_FOR_USER_ROLE'];
var chat_email = window['logged_in_user']['YOUR_AIRTABLE_FIELD_NAME_FOR_EMAIL'];
</script>

<script>
var chat_height = '600px';
var chat_width = '990px';

var cometchatContainer = document.getElementById('cometchatContainer');
var chatContainerDiv = document.createElement('div');
chatContainerDiv.setAttribute('id', 'cometchat_embed_synergy_container');
chatContainerDiv.setAttribute('style', 'width:' + chat_width + ';height:' + chat_height + ';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;');
cometchatContainer.appendChild(chatContainerDiv);

window.onload = function () {
  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 = {
      module: "synergy",
      style: "min-height:" + chat_height + ";min-width:" + chat_width + ";",
      width: chat_width.replace('px', ''),
      height: chat_height.replace('px', ''),
      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>

❓ Need Help Integrating?

We’ve got your back!
💬 Contact Us
📅 Schedule Integration Assistance

🎥 Video Tutorial

▶️ Watch the Video Tutorial on YouTube