Add AtomChat to NewZenler

Add AtomChat to NewZenler

Welcome to the AtomChat integration documentation for NewZenler. With AtomChat, you can enhance your NewZenler platform by embedding an advanced communication tool that allows users to chat one-on-one as well as in groups. This powerful feature can greatly enhance user engagement and interaction within your platform.


Whether you're running an educational platform, a healthcare app, or a community forum on NewZenler, integrating AtomChat will provide your users with an immersive chatting experience. 


This documentation will guide you through the process of adding AtomChat to your NewZenler platform. Let's get started!


Docked Layout


Step 1: Retrieving API Keys from AtomChat


  • Sign in to your AtomChat Client Area

  • Click on the `Admin Panel` button.

  • Take note of the following keys: `API Key`, `Auth Key`, `License Key`, and `App ID`. These will be necessary during the installation process. 




Docked Layout 




Step 2: Preparing the Code


  • Copy the provided code snippet.

  • Replace `AtomChat_APP_ID` and `AtomChat_AUTH_KEY` with your unique keys from your AtomChat Admin Panel


<script>
  window.addEventListener('load', function() {
    var role_ids = {2: "Site Admin",3: "Course Instructor",4: "Student",7: "Affiliate",8: "Lead", 11: "Assistant", 12: "Support"};
    var userDetails = {};
    var settings = {
      "url": "Website_URL/api/v1/users/"+siteTracking.userId,
      "method": "GET",
      "timeout": 0,
      "headers": {
        "X-API-Key": "Zenler_API_Key",
        "Content-Type": "application/json",
        "Accept": "application/json",
        "X-Account-Name": "Account_Name"
      },
    };

    $.ajax(settings).done(function (response) {
      if(response.message == "success"){
        userDetails = response.data;
      }
      window.chat_appid = 'AtomChat_APP_ID';
      window.chat_auth = 'AtomChat_AUTH_KEY';
      window.chat_id = siteTracking.userId;
      window.chat_name = userDetails.first_name+' '+userDetails.last_name;
      window.chat_avatar = document.getElementsByClassName('zl-navbar-rhs-img')[0].src;
      window.chat_role = role_ids[userDetails.roles[0]];

      (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);
      })();
    });
  }, false);
</script>


  • Next, you will need specific details from your NewZenler account.

       1. Replace `Website_URL` in the code with your site URL provided by NewZenler. 

       2. Replace `Account_Name` with your site name, which can also be found in the same location as the `Website_URL`.

       3. Replace `Zenler_API_Key` with your NewZenler API key. 

  • This can be found by navigating to your NewZenler Admin Panel —> Developers —> `API key`.

  • If you haven't yet generated your API Key, click on the `Generate API Key` option.


Step 3: Adding the Code to Your Site

  • Go to your NewZenler Admin Panel —> Site —> Global includes —> All pages Section.

  • Paste the code you prepared in Step 2.


Embedded Layout




Step 1: Access Your Page Settings

  • On the panel, click on `Site` -> `Pages`.

  • Select the page where you wish to add AtomChat's embedded layout and click on the `Edit` button.


Step 2: Adding Custom HTML


  • On your page editor, click on `Add Row`.

  • Next, click on `Add Element` and select `Custom HTML` from the dropdown options.


Step 3: Inserting The Code


  • Once you have the Custom HTML element on your page, select it by clicking on `Settings`.

  • Click on the `</> Change Content` button.

  • Paste the code below with the aforementioned changes into the HTML content box.


<script>
    window.chat_height = '600px';
    window.chat_width = '990px';
    window.chat_appid = 'AtomChat_APP_ID';
    document.write('<div id="cometchat_embed_synergy_container" style="width:'+window.chat_width+';height:'+window.chat_height+';max-width:100%;border:1px solid #CCCCCC;border-radius:5px;overflow:hidden;"></div>');


  window.addEventListener('load', function() {
    var role_ids = {2: "Site Admin",3: "Course Instructor",4: "Student",7: "Affiliate",8: "Lead", 11: "Assistant", 12: "Support"};
    var userDetails = {};
    var settings = {
      "url": "Website_URL/api/v1/users/"+siteTracking.userId,
      "method": "GET",
      "timeout": 0,
      "headers": {
        "X-API-Key": "Zenler_API_Key",
        "Content-Type": "application/json",
        "Accept": "application/json",
        "X-Account-Name": "Account_Name"
      },
    };

    $.ajax(settings).done(function (response) {
      if(response.message == "success"){
        userDetails = response.data;
      }
      window.chat_auth = 'AtomChat_AUTH_KEY';
      window.chat_id = siteTracking.userId;
      window.chat_name = userDetails.first_name+' '+userDetails.last_name;
      window.chat_avatar = document.getElementsByClassName('zl-navbar-rhs-img')[0].src;
      window.chat_role = role_ids[userDetails.roles[0]];

      var chat_js = document.createElement('script'); chat_js.type = 'text/javascript'; chat_js.src = 'https://fast.cometondemand.net/'+window.chat_appid+'x_xchatx_xcorex_xembedcode.js';
    chat_js.onload = function() {
      var chat_iframe = {};chat_iframe.module="synergy";chat_iframe.style="min-height:"+window.chat_height+";min-width:"+window.chat_width+";";chat_iframe.width=window.chat_width.replace('px','');chat_iframe.height=window.chat_height.replace('px','');chat_iframe.src='https://'+window.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);

    });
  }, false);
</script>



Step 4: Save Your Changes


  • Click on the `Update` button to apply your changes.

  • Lastly, ensure you save your progress by clicking on `Save`!


In conclusion, integrating AtomChat with your NewZenler platform is a simple and straight-forward process whether you choose the docked or embedded layout!


Should you need further assistance with the integration process, we are here to help. 


You can schedule an integration assistance session using this link: Integration Assistance

If you have any further questions or run into any issues, please feel free to reach out to our support team at support@atomchat.com. 


Thank you for choosing AtomChat for your NewZenler platform. We are confident it will contribute positively to your user engagement and overall communication experience. Happy chatting!