Add AtomChat to Your Bubble Website

📄 Original Support Article

🧱 Prerequisite

Ensure that your Bubble app has a login system and users have a unique ID.

🔗 Sign up for AtomChat to get your 14-day free trial.

🔑 Get Your AtomChat API Keys

  1. Log in to your AtomChat Dashboard
  2. Click the Manage button to open your Admin Panel
  3. Locate and copy your APP ID and AUTH KEY

🛠 Integration Steps

1. Add HTML Element in Bubble Editor

  1. Go to the Design tab in your Bubble Editor.
  2. Drag and drop an HTML element where you'd like to place the chat.

2. Paste the AtomChat Embed Code

Replace APP_ID and AUTH_KEY in the code with your actual values:

<script>
  var chat_appid = 'APP_ID';
  var chat_auth = 'AUTH_KEY';
</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 = {
      module: "synergy",
      style: "min-height:" + chat_height + ";min-width:" + chat_width + ";",
      width: chat_width.replace('px', ''),
      height: chat_height.replace('px', ''),
      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>

3. Sync User Data (Optional)

For personalized experience and syncing users:

  • You may pass dynamic user ID and name from Bubble using JavaScript toolkits or plugins.
  • This requires a working knowledge of Bubble’s scripting and user authentication.

🧪 Preview & Test

  • Run your app in preview mode
  • Ensure AtomChat loads properly and identifies logged-in users

🔄 Contact Sync

AtomChat auto-syncs users when they log in. You can also configure guest access if needed.

🤝 Need Help?

Happy chatting!