Add AtomChat to Your PHP (Core) (No Framework) Website

📄 Original Support Article

Table of Contents

1. Sign Up for a Free Trial

Visit AtomChat's pricing page and sign up for a 14-day free trial.

2. Note Your API Keys

  • Sign in to your AtomChat Dashboard
  • Click on the Manage button
  • Copy your API keys from the top-right corner

3. Secure Your Environment

Ensure your domain or local environment is SSL certified and secure for proper integration.

🧱 Choose a Layout

AtomChat offers 2 layout options:

  • Docked Layout: Floating chat widget at the corner of your website.
  • Embedded Layout: Full chat interface inside a page.

⚠️ Do not use both layouts on the same page.

4. Setting up the Docked Layout

Place the following code before the closing </body> tag on every page:

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<?php 
if (isset($_SESSION["user_id"]) && $_SESSION["user_id"] > 0) { ?>
<script>
var chat_id = "<?php echo $_SESSION["user_id"]; ?>";
var chat_name = "<?php echo $_SESSION["user_name"]; ?>";
var chat_link = "<?php echo $_SESSION["user_link"]; ?>";
var chat_avatar = "<?php echo $_SESSION["user_avatar"]; ?>";
var chat_role = "<?php echo $_SESSION["user_role"]; ?>";
var chat_friends = '<?php echo $_SESSION["user_friends"]; ?>';
</script>
<?php } ?>
<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

Paste the following code on the desired page:

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<?php 
if (isset($_SESSION["user_id"]) && $_SESSION["user_id"] > 0) { ?>
<script>
var chat_id = "<?php echo $_SESSION["user_id"]; ?>";
var chat_name = "<?php echo $_SESSION["user_name"]; ?>";
var chat_link = "<?php echo $_SESSION["user_link"]; ?>";
var chat_avatar = "<?php echo $_SESSION["user_avatar"]; ?>";
var chat_role = "<?php echo $_SESSION["user_role"]; ?>";
var chat_friends = '<?php echo $_SESSION["user_friends"]; ?>';
</script>
<?php } ?>
<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>

6. Contact Sync

Your AtomChat contact list will populate dynamically as users log in to your website.

You can also enable Guest Chat for non-logged-in users.

💬 Need Help?

Happy to help!