Introduction

This documentation will guide you through the process of integrating AtomChat with SuiteDash. AtomChat is a powerful chat solution that can enhance your SuiteDash platform with real-time communication capabilities.

TABLE OF CONTENTS

• Introduction
• Sign-Up for AtomChat
• Your AtomChat Keys
• Choose a Layout - Docked or Embedded
  • The Embedded Layout
  • The Docked Layout
• Integrating the Embedded Layout
• Integrating the Docked Layout
• Conclusion
• Additional Notes
• Need help?

Sign-Up for AtomChat

1. Visit the AtomChat website 

2. Click on the "Start Trial" button for the plan of your choice.

3. Create an AtomChat account.

4. Once you've signed up, you'll have access to your AtomChat License.

Your AtomChat Keys

1. Login to your AtomChat account - https://app.atomchat.com/ 

2. Click on the Admin Panel button for the License in use 

3. In your Admin Panel, find the API Keys option on the top-right, click on it. 

4. Here your APP_ID and AUTH_KEY that will be used for the integration! 

Choose a Layout - Docked or Embedded

You can choose between two layout options for integrating AtomChat with SuiteDash. You can select either a docked or embedded layout depending on your preferences and requirements.

The Embedded Layout

AtomChat's embedded layout can be added to any page in your SuiteDash portal to provide an inbox-like communication feature.

The Docked Layout

AtomChat's docked layout is designed to appear as a chat bar that can be conveniently accessed from the bottom right or left corner of all pages within your SuiteDash portal. This chat bar is easily accessible and allows users to engage in real-time conversations while navigating various sections of your portal.

Integrating the Embedded Layout

1. Log in to your SuiteDash Admin Dashboard.

2. Navigate to the "Content" section.

3. Click on "Portal Pages" to access your SuiteDash portal pages.

4. Select the page where you want to integrate AtomChat or add a new Page under a category. Here, we have created the page "Chat Page" under the category "Community".

5. Open the page and find the styling options icon.

6. In the styling options, you should find an option to enable custom JavaScript/CSS code. This is where you'll add AtomChat's embedded layout code.

7. Copy the embedded layout code provided below - 

NOTE: IN THE CODE BELOW,PLEASE REPLACE THE 'APP_ID' AND 'AUTH_KEY' VALUES WITH THE KEYS PRESENT IN YOUR ATOMCHAT ADMIN PANEL

<script>
  var chat_appid = 'APP_ID';
  var chat_auth = 'AUTH_KEY';
    var chat_id = window.SD_USER['id'];
    var chat_name = window.SD_USER['displayName'];
    var chat_avatar = window.SD_USER['imageUrl'];
    const roles = JSON.parse(document.getElementById('CONSTANT')?.text);
    const roleID = parseInt(JSON.parse(document.getElementById('currentUser')?.text)?.roleID) || null;
   var chat_role = roleID ? Object.entries(roles['ROLES']).find(roleInfo => roleInfo[1] == roleID)[0] : 'default';
</script>
<script>
  var chat_height = '600px';
  var chat_width = '990px';

  document.write('<div id="cometchat_embed_synergy_container" style="width:'+chat_width+';height:'+chat_height+';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;"></div>');

  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>

8. Paste the code into the Custom JavaScript field. 

9. Save your changes in SuiteDash.

10. Preview or navigate to the "Community Page" where you integrated AtomChat.

Integrating the Docked Layout

1. Log in to your SuiteDash Admin Dashboard.

2. Navigate to the "Content" section.

3. Click on "Portal Pages" to access your SuiteDash portal pages.

4. Select any page or add a new Page under a category. Here, we have created the page "Chat Page" under the category "Community".

5. Open the page and find the styling options icon.

6. In the styling options, you should find an option to enable custom JavaScript/CSS code. This is where you'll add AtomChat's Docked layout code.

7. Copy the docked layout code provided below - 

NOTE: IN THE CODE BELOW,PLEASE REPLACE THE 'APP_ID' AND 'AUTH_KEY' VALUES WITH THE KEYS PRESENT IN YOUR ATOMCHAT ADMIN PANEL

<script>
  var chat_appid = 'APP_ID';
  var chat_auth = 'AUTH_TOKEN';
    var chat_id = window.SD_USER['id'];
    var chat_name = window.SD_USER['displayName'];
    var chat_avatar = window.SD_USER['imageUrl'];
    const roles = JSON.parse(document.getElementById('CONSTANT')?.text);
    const roleID = parseInt(JSON.parse(document.getElementById('currentUser')?.text)?.roleID) || null;
   var chat_role = roleID ? Object.entries(roles['ROLES']).find(roleInfo => roleInfo[1] == roleID)[0] : 'default';
</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>

8. Paste the code into the Custom JavaScript field. 

9. Save your changes in SuiteDash.

10. Preview or navigate to your portal pages and you should see AtomChat's docked layout! 

Conclusion

You have successfully integrated AtomChat with your SuiteDash Portal. Users can now enjoy real-time communication on your SuiteDash platform. 

Additional Notes

As your users login to the portal, AtomChat's Contact list will get populated.

Remember to explore AtomChat's Admin Panel and personalize the chat layout to match your portal!

Need help?

We're here to support you! If you require any assistance or have questions, please don't hesitate to get in touch.

Additionally, you have the option to schedule a remote Integration Assistance meeting with our team of experts.

We're eager to assist and support you in any way we can. Feel free to reach out!