Add AtomChat to your Softr

Modified on Mon, 29 Jul at 11:44 AM

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

Login to your softr.io dashboard
Select the application (open in studio) to which you want to add AtomChat
After opening the application, go to the Settings option from the left side menu
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'][' 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.js'; var chat_script = document.getElementsByTagName('script')[0]; chat_script.parentNode.insertBefore(chat_js, chat_script);
  })();
</script>

NOTE: Please replace the "AIRTABLE FIELD NAME for USERNAME" with your Airtable username column and AIRTABLE FIELD NAME for PROFILE PICTURE' with your Airtable profile picture/Avatar column.

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

<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';
// Select the div where you want to insert the chat container
var cometchatContainer = document.getElementById('cometchatContainer');
// Create the chat container div
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;');
// Append the chat container div to the selected div
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 = {};
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 “AIRTABLE FIELD NAME for USERNAME” with your Airtable username column and AIRTABLE FIELD NAME for PROFILE PICTURE’ with your Airtable profile picture/Avatar column.

Video Tutorial -

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