Before you begin
1. Sign-up for a Free Trial
You can select a suitable plan from AtomChat's pricing page and sign up for a 14-day free trial!
2. Note Your API Keys
- Sign in to your Dashboard and click on the Manage button
- You will see API Keys on the top right. You can copy your keys from here!
3. Secure your environment
For successful integration, please ensure your domain or local environment is SSL certified and secure.
Choose a Layout
AtomChat offers 2 Layouts
1. Docked Layout creates a floating chat widget at the bottom right/left corner of your website.
2. Embedded Layout embeds a chat interface inside any page of your websiteAnd please remember!
AtomChat layouts are not designed to be used together on the same page. If you add both layouts on the same page, please expect erratic behavior from the software.
IMPORTANT: The following step is common for both the layouts (Docked and Embedded): Find the template file, which you can modify to add AtomChat. In the case of SocialEngine PHP, it is usually head.tpl or default.tpl file in your theme's folder. Probable file path in your application's root directory where you can find default.tpl file is "/application/modules/Core/layouts/scripts/default.tpl". In the above template file (head.tpl or default.tpl), add the following code before the </head> tag and save it
<?php
$friends = '';
$friends_array = $this->viewer()->membership()->getMembers();
foreach( $friends_array as $friend ) {
$friends .= $friend->getIdentity().",";
}
$chat_friends = !empty(rtrim($friends, ',')) ? rtrim($friends, ',') : '';
$chat_role = '';
if($this->viewer()->getIdentity()) {
$chat_role = Engine_Api::_()->getItem('authorization_level', $this->viewer()->level_id)->getTitle();
}
?>
<script type="text/javascript">
var chat_id = "<?php echo $this->viewer()->getIdentity();?>";
var chat_name = "<?php echo $this->viewer()->getTitle();?>";
var chat_link = "<?php echo $this->viewer()->getHref();?>";
var chat_avatar = "<?php echo $this->viewer()->getPhotoUrl();?>";
var chat_role = "<?php echo $chat_role;?>";
var chat_friends = "<?php echo $chat_friends;?>";
</script>Setting up the Docked Layout
<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<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>Where to add this code?
- Login to your SocialEngine PHP site as an admin and open the Admin panel/dashboard of your site
- Go to Appearance -> Layout Editor -> Select Site Footer -> Add HTML block in it at the bottom -> Edit that HTML block and add the above code snippet there under HTML input area
Please see the video below
NOTE: Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own Keys from your AtomChat Admin Panel -> API Keys
Setting up the Embedded Layout
<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 = {};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>Where to add this code?
- Paste the above code on any SocialEngine page in the Admin Panel of your website where you want AtomChat to appear.
NOTE: Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own Keys from your AtomChat Admin Panel -> API Keys
Contact Sync
Your user list on AtomChat will get populated and they will be visible in the Chat Contact list once they log in to your website after integrating AtomChat. So, users are added on-the-fly as they login!
Need help Integrating?
We've got you! Please Contact Us if you need any help or have questions.
You can also schedule a remote Integration Assistance meeting with our team of experts!
Happy to help :)
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