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.
Navigate to the `API Keys` section (which is located in the top right).
Take note of the following keys: `API Key`, `Auth Key`, `License Key`, and `App ID`. These will be necessary during the installation process.
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.
Navigate to your NewZenler Admin Panel —> Site —> Site Details —> Site Name.
Your URL should look like this: `https://xyz123.newzenler.com/` after replacing, it will be: `https://xyz123.newzenler.com/api/v1/users`.
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
Navigate to your NewZenler Admin Panel.
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!
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article