Add AtomChat to your Bubble website

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

NOTE:
To integrate AtomChat, you will need a paid plan for your Bubble Application (i.e either the Personal, Professional, or Production plan)

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 to your Bubble Dashboard and select the App you would like to add AtomChat to.
Then under the Settings section, select the SEO/Metatags tab.
Here you will see the field 'Script in the Body'
Add the code below in the Script in the body text box and Preview.

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>
window.chat_appid = 'APP_ID';
window.chat_auth = 'AUTH_KEY';
</script>
<script>
if(typeof Lib == 'function' && Lib().hasOwnProperty('db_instance') && typeof Lib().db_instance()._get_data == 'function'){
  window.userDetails = Lib().db_instance()._get_data(Lib().current_user().id);
  if (userDetails['first_name_text'] != undefined || userDetails['first_name_text'] != null){
    window.chat_id = userDetails['_id'];
    window.chat_name = userDetails['first_name_text']+" "+userDetails['last_name_text'];
    window.chat_link = location.origin+'/profile/'+userDetails['_id'];
    if(userDetails['first_name_text'] != ''){
      window.chat_avatar = userDetails['main_photo_image'];
    }
  }else if(userDetails['authentication']['email']['email'] != '') {
    window.chat_id = userDetails['_id'];
    window.chat_name = userDetails['authentication']['email']['email'];
    window.chat_link = location.origin+'/profile/'+userDetails['_id'];
    if(userDetails['first_name_text'] != ''){
      window.chat_avatar = userDetails['main_photo_image'];
    }
  }
}
</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

Login to your Bubble Dashboard and select the App you would like to add AtomChat to.
Then under the Settings section, select the General tab and enable the option “Expose the option to add an ID attribute to HTML elements“.
Now open the Design section and open the page where you wanted to add the Embedded layout.
Add the HTML element to the page from the Visual elements list on the left side (shown in the screenshot) and adjust the height and width.
Double click on the added HTML element, a content box will open. Under Appearance, scroll down to the bottom and add ID Attribute for the element as “chatWindow“
Also under Appearance, please make sure that the option “Display as an iFrame” is unchecked
Now add the code below in the HTML editor block under Appearance and Preview

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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
window.chat_appid = 'APP_ID';
window.chat_auth = 'AUTH_KEY';
window.chat_height = '500px';
window.chat_width = '100%';
</script>
<script>
if(typeof Lib == 'function' && Lib().hasOwnProperty('db_instance') && typeof Lib().db_instance()._get_data == 'function'){
  window.userDetails = Lib().db_instance()._get_data(Lib().current_user().id);
  if (userDetails['first_name_text'] != undefined || userDetails['first_name_text'] != null){
    window.chat_id = userDetails['_id'];
    window.chat_name = userDetails['first_name_text']+" "+userDetails['last_name_text'];
    window.chat_link = location.origin+'/profile/'+userDetails['_id'];
    if(userDetails['first_name_text'] != ''){
      window.chat_avatar = userDetails['main_photo_image'];
    }
  }else if(userDetails['authentication']['email']['email'] != '') {
    window.chat_id = userDetails['_id'];
    window.chat_name = userDetails['authentication']['email']['email'];
    window.chat_link = location.origin+'/profile/'+userDetails['_id'];
    if(userDetails['first_name_text'] != ''){
      window.chat_avatar = userDetails['main_photo_image'];
    }
  }
}
</script>
<script>
setTimeout(function(){
  if($("#chatWindow").length > 0){
    $("#chatWindow").html('<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);
  }
}, 3000);
</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 :)