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
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.
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!
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article