Add AtomChat to your Squarespace + Memberspace website

Modified on Wed, 31 Jan 2024 at 07:44 PM

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!

API Keys

3. Secure your environment

For successful integration, please ensure your domain or local environment is

SSL certified and secure.

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.

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:

For the embedded layout:

<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: ON LINE __ OF THE ABOVE CODE, PLEASE REPLACE 'NAME_OF_WEBSITE' WITH YOUR OWN WEBSITE NAME

6. Save the Page!