Add AtomChat to your Squarespace + Memberspace website

Add AtomChat to your Squarespace + Memberspace website

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>


Notes
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



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



6. Save the Page!


    • Related Articles

    • Add AtomChat to your BuddyBoss website

      Before you begin 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 Dashboard and click on the Manage button You will see API Keys on the ...

    • Add AtomChat to your BuddyPress website

      Before you begin 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 Dashboard and click on the Manage button You will see API Keys on the ...

    • Add AtomChat to your WordPress website

      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 Dashboard and click on the Manage button You will see API Keys on the top right. You ...

    • Add AtomChat to your Ning website

      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 period! 2. Note Your API Keys Sign in to your Dashboard and click on the Manage button You will see API Keys on the top right. ...

    • Add AtomChat to your Wix website

      Here's how you can add AtomChat to your Wix website! NOTE: Please make sure that you should have a login mechanism implemented on WIX, i.e. Member area should be present! 1. Please Log in to your Wix dashboard 2. For the website where you want to add ...