If you've built your website on Squarespace and want your users to chat with each other, AtomChat can easily help you do this! 

To register and authenticate users, AtomChat uses your website's existing user-management in place. 

Since Squarespace does not have a memberships module inbuilt, Memberspace, which is a third-party plugin can be used for user management and authentication on your Squarespace website. 

This documentation has the instructions to add AtomChat to your Squarespace + Memberspace website.

Let's get started! 

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

For successful integration, please ensure your domain or local environment is  SSL certified and secure.

Choose a Layout

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. 

5. Setting up the Embedded Layout

Please follow the steps below to add AtomChat's embedded layout to any page of your website  

1. Select the section of the page where you want to add chat.

2. Click on Add Block and select Code from the menu.

3. Click on the code section and click on Edit.

4. The mode should be HTML. Display Source Code should be off.

5. Paste the following code in the code section:

<script>
var chat_appid = "APP_ID";
var chat_auth = "AUTH_KEY";
var chat_id;
var chat_name;
var chat_avatar;
var chat_height = '600px';
var chat_width = '100%';
document.write('<div id="cometchat_embed_synergy_container" style="width:' + chat_width + ';height:' + chat_height + ';max-width:102%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;"></div>');
function handleMemberInfo({ detail }) {
const user = detail.memberInfo;
chat_id = user.id;
chat_name = user.name;
chat_avatar = user.profileImageUrl;
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')[1];
chat_script.parentNode.insertBefore(chat_js, chat_script);
}
document.addEventListener('MemberSpace.member.info', handleMemberInfo);
var MemberSpace = window.MemberSpace || { "subdomain": "NAME_OF_WEBSITE" };
(function (d) {
var s = d.createElement("script");
s.src = "https://cdn.memberspace.com/scripts/widgets.js";
var e = d.getElementsByTagName("script")[1];
e.parentNode.insertBefore(s, e);
}(document));
</script>

NOTE: PLEASE REPLACE APP_ID AND AUTH_KEY IN THE CODE WITH YOUR OWN KEYS. YOU WILL FIND THESE KEYS IN YOUR ATOMCHAT ADMIN PANEL -> API KEYS

IMP: IN THE ABOVE CODE, PLEASE REPLACE 'NAME_OF_WEBSITE' WITH YOUR OWN WEBSITE NAME

6. Save the Page!

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!