Add AtomChat to your JomSocial website

Add AtomChat to your JomSocial 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!

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. 


4. Setting up the Docked Layout


RcuIaY6bb8qCeI46sOl1G_docked-layoutn


Where to add AtomChat's code?

  1. Login to your Joomla Administrator Panel

  2. Click on Extensions -> Templates

  3. Select the active/default template

  4. Find index.php from the left side navigation

  5. Paste the code below before the tag in the index.php file


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


<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<?php
$chat_id = $chat_name = $chat_avatar = $chat_link = $chat_displayname = $chat_role = "";
$chat_friends = '';
$user = JFactory::getUser();
  if (!$user->guest) {
    $chat_id = $user->id;
    $chat_name = $user->username;
    $chat_displayname = $user->name;
    if(class_exists('JAccess')) {
      $user = JFactory::getUser();
      $groups = JAccess::getGroupsByUser($user->id, false);
      $groups_list = "(" . implode(",", $groups) . ")";
      $db = JFactory::getDbo();
      $query = $db->getQuery(true) ->select($db->qn("title")) ->from("#__usergroups") ->where($db->qn("id") . " IN " . 
      $groups_list); $db->setQuery($query);
      $rows = $db->loadObjectList();
      if(!empty($rows) && is_object($rows[0]) && property_exists($rows[0], "title")){
       $chat_role = $rows[0]->title;
      }
    }
  }
?>
<script>
  var chat_id = '<?php echo $chat_id;?>';
  var chat_name = '<?php echo $chat_displayname;?>';
  var chat_avatar = '<?php echo $chat_avatar;?>';
  var chat_link = '<?php echo $chat_link;?>';
  var chat_role = '<?php echo $chat_role;?>';
  var chat_friends = '<?php echo $chat_friends;?>';
</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>

5. Setting up the Embedded Layout


Embedded


Where to add AtomChat's code?

  1. Login to your Joomla Administrator Panel

  2. Click on Extensions -> Templates

  3. Select the active/default template

  4. Find index.php from the left side navigation

  5. Paste the code below before the tag in the index.php file
NOTE: Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own keys from your AtomChat Admin Panel -> Settings -> API Keys

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<?php
$chat_id = $chat_name = $chat_avatar = $chat_link = $chat_displayname = $chat_role = "";
$chat_friends = '';
$user = JFactory::getUser();
  if (!$user->guest) {
    $chat_id = $user->id;
    $chat_name = $user->username;
    $chat_displayname = $user->name;
    if(class_exists('JAccess')) {
      $user = JFactory::getUser();
      $groups = JAccess::getGroupsByUser($user->id, false);
      $groups_list = "(" . implode(",", $groups) . ")";
      $db = JFactory::getDbo();
      $query = $db->getQuery(true) ->select($db->qn("title")) ->from("#__usergroups") ->where($db->qn("id") . " IN " . 
      $groups_list); $db->setQuery($query);
      $rows = $db->loadObjectList();
      if(!empty($rows) && is_object($rows[0]) && property_exists($rows[0], "title")){
       $chat_role = $rows[0]->title;
      }
    }
  }
?>
<script>
  var chat_id = '<?php echo $chat_id;?>';
  var chat_name = '<?php echo $chat_displayname;?>';
  var chat_avatar = '<?php echo $chat_avatar;?>';
  var chat_link = '<?php echo $chat_link;?>';
  var chat_role = '<?php echo $chat_role;?>';
  var chat_friends = '<?php echo $chat_friends;?>';
</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>

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 Bubble App 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 :)

    • 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 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 ...

    • Add AtomChat to your Basic Javascript 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 ...