Add AtomChat to Your Wix Website

📄 Original Support Article

⚠️ Prerequisite

Ensure that you have a Member Area (Login Mechanism) set up on your Wix site.

🛠 Steps to Add AtomChat

1. Open Wix Editor

  • Log in to your Wix dashboard.
  • Click Edit Site for the website you want to update.
  • Under Site, select Go to Editor.
  • Click Switch to Editor.

2. Add Embedded Layout Code

  • Click the "+" icon to add a block.
  • Select Embed → Embed a widget.
  • A draggable iframe will open. Resize it and click Enter Code.

Paste the following code inside the HTML Code box:

<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. Add Backend Web Module

  • Go to Public & Backend → Click + Add Web Module
  • Rename the file to atomchat.jsw
  • Paste this code above the export function:
import {fetch} from 'wix-fetch';

let apiKey = 'API_KEY';

export function createUser(uid, name, userAvatar) {
  const url = "https://api.cometondemand.net/api/v2/createUser";
  const headers = {
    "api-key": apiKey,
    "Content-Type": "application/x-www-form-urlencoded"
  };
  const data = `UID=${uid}&name=${name}&avatarURL=${userAvatar}`;
  const request = {
    "method": "post",
    "headers": headers,
    "body": data
  };
  return fetch(url, request).then(response => response.json());
}

export function updateUser(uid, name, userAvatar) {
  const url = "https://api.cometondemand.net/api/v2/updateUser";
  const headers = {
    "api-key": apiKey,
    "Content-Type": "application/x-www-form-urlencoded"
  };
  const data = `UID=${uid}&name=${name}&avatarURL=${userAvatar}`;
  const request = {
    "method": "post",
    "headers": headers,
    "body": data
  };
  return fetch(url, request).then(response => response.json());
}

export function getUser(uid) {
  const url = "https://api.cometondemand.net/api/v2/getUser";
  const headers = {
    "api-key": apiKey,
    "Content-Type": "application/x-www-form-urlencoded"
  };
  const data = `UID=${uid}`;
  const request = {
    "method": "post",
    "headers": headers,
    "body": data
  };
  return fetch(url, request).then(response => response.json());
}

4. Connect AtomChat in Page Code

Open the page where you added AtomChat and paste:

import wixUsers from 'wix-users';
import wixWindow from 'wix-window';
import {createUser, getUser, updateUser} from 'backend/atomchat';
import wixData from 'wix-data';

let appId = 'APP_ID';
let auth_key = 'AUTH_KEY';

wixUsers.onLogin(() => {
  addChat();
});

$w.onReady(() => {
  addChat();
});

function addChat() {
  let user = wixUsers.currentUser;
  let userId = user.id;
  if (user.loggedIn) {
    user.getEmail().then(email => {
      wixData.get('Members/PrivateMembersData', user.id).then(item => {
        let username = item.name || email;
        let userAvatar = item.picture;
        let userProfile = item['link-Members-_id'];

        createUser(userId, username, userAvatar).then(() => {
          getUser(userId).then(userInfo => {
            let userData = userInfo.success.data.user;
            let userinfo = {
              id: userData.uid,
              n: userData.name,
              a: userData.avatar,
              role: userData.role,
              auth: auth_key
            };
            let basedata = encodeURIComponent(btoa(encodeURIComponent(JSON.stringify(userinfo))));
            $w("/docs/1.0/integrations/wix#html1").src = "https://" + appId + ".cometondemand.net/cometchat_embedded.php?basedata=" + basedata;
          });
        });

        updateUser(userId, username, userAvatar);
      });
    });
  }
}

⚙️ Enable Audio/Video Calling in Chrome

Chrome blocks audio/video in iframes by default. Here's how to allow it:

For Paid Wix Plans:

  1. Go to Dashboard → Settings → Advanced → Custom Code
  2. Paste this code:
<script>
var setTime = setInterval(function(){
   var iframes = document.querySelectorAll("iframe");
   for (var i = 0; i < iframes.length; i++) {
      var name = iframes[i].getAttribute("name");
      if (name != null && name.includes("htmlComp")) {
         iframes[i].setAttribute("allow", "geolocation; microphone; camera; midi; encrypted-media;");
      }
   }
}, 10000);
</script>
  1. Select the correct page and Body - end for placement.
  2. Save & Publish.

🔄 Contact Sync

AtomChat users will be synced automatically when they log in.

🤝 Need Help?

Happy to help!