Add AtomChat to your Drupal website

Modified on Tue, 31 Jan, 2023 at 12:20 PM

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. 


Please note: The following instructions are for Drupal 7. For Drupal 8 and 9, please scroll down!



4. Setting up the Docked Layout

RcuIaY6bb8qCeI46sOl1G_docked-layoutn


Add the code below to your site template before the tag 

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>
<?php
      global $user;
      global $base_url;
      global $relationships;  

      $request = array();
      if (function_exists('user_relationships_load')) {
        $requests = user_relationships_load($param = array("approved" => 1, "user" => $user->uid), $options = array(), $reset = FALSE);
      }

      $friendIdValuesArr = array();
      $friendIdValues = "";
      foreach($requests AS $value) {
        $friendIdValuesArr[] = $value->requestee_id;
      }
      if(!empty($friendIdValuesArr)) {
        $friendIdValues = implode(",",$friendIdValuesArr);
      }

      $username = $userid = $avatar = $link = "";

      if($user->uid){ 
        $username = $user->name;
        $userid = $user->uid;
        if($user->picture!=0) {
            $avatar = $base_url.'/sites/default/files/styles/thumbnail/public/pictures/'.file_load($user->picture)->filename;
        }
        $link = $base_url.'/?q=user/'.$user->uid; }
        $role = end($user->roles);
?>

<script>
    var chat_name = "<?php echo $username;?>";
    var chat_id = "<?php echo $userid;?>";
    var chat_avatar = "<?php echo $avatar;?>";
    var chat_link = "<?php echo $link;?>";
    var chat_role = "<?php echo $role;?>";
    var chat_friends = "<?php echo $friendIdValues; ?>";
</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


Add the code below to your site template before the tag

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>
<?php
      global $user;
      global $base_url;
      global $relationships;  

      $request = array();
      if (function_exists('user_relationships_load')) {
        $requests = user_relationships_load($param = array("approved" => 1, "user" => $user->uid), $options = array(), $reset = FALSE);
      }

      $friendIdValuesArr = array();
      $friendIdValues = "";
      foreach($requests AS $value) {
        $friendIdValuesArr[] = $value->requestee_id;
      }
      if(!empty($friendIdValuesArr)) {
        $friendIdValues = implode(",",$friendIdValuesArr);
      }

      $username = $userid = $avatar = $link = "";

      if($user->uid){ 
        $username = $user->name;
        $userid = $user->uid;
        if($user->picture!=0) {
            $avatar = $base_url.'/sites/default/files/styles/thumbnail/public/pictures/'.file_load($user->picture)->filename;
        }
        $link = $base_url.'/?q=user/'.$user->uid; }
        $role = end($user->roles);
?>

<script>
    var chat_name = "<?php echo $username;?>";
    var chat_id = "<?php echo $userid;?>";
    var chat_avatar = "<?php echo $avatar;?>";
    var chat_link = "<?php echo $link;?>";
    var chat_role = "<?php echo $role;?>";
    var chat_friends = "<?php echo $friendIdValues; ?>";
</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>

For Drupal 8 and 9

1. Go to your theme -> active theme -> your_theme.theme file and paste the function at the bottom of the file


/* Get user deatils for AtomChat */
function handicraft_zymphonies_theme_preprocess_html(&$variables) {
  $user = \Drupal\user\Entity\User::load(\Drupal::currentUser()->id());
  if ($user->hasField('user_picture') && !$user->user_picture->isEmpty()) {
    $displayImg = file_create_url($user->user_picture->entity->getFileUri());
    $variables['displayImg'] = $displayImg;
  }
  $roles = $user->getRoles();
  $variables['roles'] = $roles[1];
}


2. Go to your active themes html.html.twig. It will be found in themes -> Active theme name -> templates -> layout -> html.html.twig


Paste the code before </body>


<script>
var chat_appid = 'APP_ID';
var chat_auth = 'Auth_Key';
</script>
{% if logged_in %}
<script>
  window.chat_name = "{{ user.displayname }}";
  window.chat_id = "{{ user.id }}";
  window.chat_avatar = "{{ displayImg }}";
  window.chat_link = "{{ path('entity.user.canonical', {'user': user.id}, {}) }}";
  window.chat_role = "{{ roles }}";
</script>
{% endif %}
<script> 
(function() {
    window. 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);
    window. chat_js = document.createElement('script'); chat_js.type = 'text/javascript'; chat_js.src = 'https://fast.cometondemand.net/'+chat_appid+'x_xchat.js'; window. chat_script = document.getElementsByTagName('script')[0]; chat_script.parentNode.insertBefore(chat_js, chat_script);
})();
</script>
NOTE:
Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own Keys from your AtomChat Admin Panel -> API Keys


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 log in. 

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

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article