Add AtomChat to your Softr

Modified on Fri, 28 Oct 2022 at 12:49 PM

Softr is the easiest way to build a no-code Online Community, Marketplace, Internal tool, Client Portal or website. 

And AtomChat is the easiest way to add chat and collaboration to it!

Before you start 

Please sign-up for your own AtomChat account! We offer a 14-day free trial period with access to all features for the plan you choose.

Note your API Keys

Please login to your AtomChat dashboard http://app.atomchat.com/ and click on the Manage button to open your Admin Panel.

You will see API Keys on the top right. You'll need these keys during the integration 


API Keys


Secure your environment 

For all of AtomChat's features to work, your domain has to be secure. This is already managed for you by Softr, all apps created are secure by default. So let's proceed to the next step!


Choose a Layout

AtomChat offers 2 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

And please remember!
AtomChat layouts are not designed to be used together on the same page. If you add both layouts on the same page, please expect erratic behavior from the software. 


Setting up the Docked Layout


softr-docked


  1. Login to your softr.io dashboard
  2. Select the application (open in studio) to which you want to add AtomChat
  3. After opening the application, go to the Settings option from the left side menu
  4. Select the Custom Code option

  5. Here, please add the following docked code

NOTE:
Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own Keys from your AtomChat Admin Panel -> API Keys


<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']['softr_user_full_name'];
  var chat_avatar = window['logged_in_user']['softr_user_profile_picture_mapped_field'];
</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>


Setting up the Embedded Layout


Screenshot 2022-03-17 at 5.23.00 PM

  1. Login to your softr.io dashboard
  2. Select the application (open in studio) to which you want to add AtomChat
  3. After opening the application, please go to the Pages option from the left side menu, and create a new page.

  4. Click on that page to edit it. Then click on Add Block icon (”+” icon) and select Custom Code block.

  5. Here, please add the following embedded layout code


NOTE:
Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own Keys from your AtomChat Admin Panel -> API Keys
<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']['softr_user_full_name'];
  var chat_avatar = window['logged_in_user']['softr_user_profile_picture_mapped_field'];
</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>

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

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 atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article