Add AtomChat to your Moodle website

Modified on Fri, 28 Oct 2022 at 12:47 PM

Here's how you can integrate AtomChat with your Moodle 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. 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.

4. Setting up the Docked Layout

Login as an Admin to your Moodle site.
Add the code below in the additional HTML footer, which you will find in Site Administration → Appearance → Additional HTML → Add the code in “Before BODY is closed”
Save the Changes and check on your site!

NOTE:
Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own Keys from your AtomChat Admin Panel -> API Keys

<script>
    var chat_appid = 'APP_ID';
    var chat_auth = 'AUTH_KEY';
    </script>
<script>
  var chat_id = document.getElementById("nav-notification-popover-container").getAttr
ibute("data-userid");
var chat_name = document.querySelector(".usermenu .usertext").innerHTML;
  var chat_avatar = document.querySelector(".avatars .current img").src;
  var chat_link = location.protocol+"//"+location.host+"/moodle/user/profile.php?id="+chat_id;
</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_scr
ipt = document.getElementsByTagName('script')[0]; chat_script.parentNode.insertBefore
(chat_js, chat_script);
})();
</script>

5. Setting up the Embedded Layout

1. Open the page where you want to add AtomChat's Embedded layout or create a page in your Moodle application and paste the code below:

NOTE:
Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own Keys from your AtomChat Admin Panel -> API Keys

<script>
    var chat_appid = 'APP_ID';
    var chat_auth = 'AUTH_KEY';
</script>
<script>
  var chat_id = document.getElementById("nav-notification-popover-container").getAttribute
("data-userid");
  var chat_name = document.querySelector(".usermenu .usertext").innerHTML;
  var chat_avatar = document.querySelector(".avatars .current img").src;
  var chat_link = location.protocol+"//"+location.host+"/moodle/user/profile.php?id="+chat
_id;
</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_j
s.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchatx_xcorex_xembedcode.js';  cha
t_js.onload = function() {    var chat_iframe = {};chat_iframe.module="synergy";chat_ifram
e.style="min-height:"+chat_height+";min-width:"+chat_width+";";chat_iframe.width=chat_widt
h.replace('px','');chat_iframe.height=chat_height.replace('px','');chat_iframe.src='http
s://'+chat_appid+'.cometondemand.net/cometchat_embedded.php'; if(typeof(addEmbedIframe)=
="function"){addEmbedIframe(chat_iframe);}  }  var chat_script = document.getElementsByTag
Name('script')[0]; chat_script.parentNode.insertBefore(chat_js, chat_script);</script>

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 Moodle website after integrating AtomChat. So, users are added on-the-fly as they login!

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!

Happy to help :)