Add AtomChat to your vBulletin Cloud website
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 period!
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.
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.
4. Setting up the Docked Layout
Where to add the code?
Edit your vBulletin template and add the below code anywhere before the closing tag:
<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<script type="text/javascript">
var chat_check; if(typeof(pageData)!="undefined"&&pageData.hasOwnProperty('userid')&&parseInt(pageData['userid'])!=0){
chat_check = pageData['userid'];
} else if(document.querySelectorAll('.username-container a')[0].length >0 && document.querySelectorAll('.username-container a')[0].attr('href').indexOf('/member/')>-1){
if(parseInt(document.querySelectorAll('.username-container a')[0].attr('href').split('/member/')[1].split('-')[0]!=0)){
chat_check = document.querySelectorAll('.username-container a')[0].attr('href').split('/member/')[1].split('-')[0]; } }
if(typeof(chat_check) != 'undefined'){
var chat_id = chat_check;
var chat_name =document.querySelectorAll('#lnkUsernameMenu img')[0].getAttribute('alt')||''; var chat_link = document.querySelectorAll('.username-container a')[0].getAttribute('href')||''; var chat_avatar = document.querySelectorAll('#lnkUsernameMenu img')[0].getAttribute('src')||'';
if (chat_avatar != '') {
var parser = document.createElement('a'); parser.href = chat_avatar;
chat_avatar = parser.origin+parser.pathname+parser.search+parser.hash; } }
</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>
NOTE:
Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own Keys from your AtomChat Admin Panel -> API Keys
5. Setting up the Embedded Layout
Where to add the code?
Edit your vBulletin template and add the below code anywhere before the closing tag:
<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<script type="text/javascript">
var chat_check; if(typeof(pageData)!="undefined"&&pageData.hasOwnProperty('userid')&&parseInt(pageData['userid'])!=0){
chat_check = pageData['userid'];
} else if(document.querySelectorAll('.username-container a')[0].length >0 && document.querySelectorAll('.username-container a')[0].attr('href').indexOf('/member/')>-1){
if(parseInt(document.querySelectorAll('.username-container a')[0].attr('href').split('/member/')[1].split('-')[0]!=0)){
chat_check = document.querySelectorAll('.username-container a')[0].attr('href').split('/member/')[1].split('-')[0]; } }
if(typeof(chat_check) != 'undefined'){
var chat_id = chat_check;
var chat_name =document.querySelectorAll('#lnkUsernameMenu img')[0].getAttribute('alt')||''; var chat_link = document.querySelectorAll('.username-container a')[0].getAttribute('href')||''; var chat_avatar = document.querySelectorAll('#lnkUsernameMenu img')[0].getAttribute('src')||'';
if (chat_avatar != '') {
var parser = document.createElement('a'); parser.href = chat_avatar;
chat_avatar = parser.origin+parser.pathname+parser.search+parser.hash; } }
</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>
NOTE:
Please replace the "APP_ID" and "AUTH_KEY" values in the code with your own Keys from your AtomChat Admin Panel -> API Keys
6. 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 vBulletin website after integrating AtomChat. So, users are added on-the-fly as they login.
You can also enable Guest chat for non-logged-in users or site visitors!
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 :)
Related Articles
Add AtomChat to your Invision Power Board (Cloud) website
Before you begin 1. Signup for a free trial (if you haven't already) First select a plan from the AtomChat Free Trial page, enter your email address and start your free trial. 2. Note your API keys Sign in to your AtomChat Client Area and ...Add AtomChat to your BuddyBoss website
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 ...Add AtomChat to your BuddyPress website
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 ...Add AtomChat to your WordPress website
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 ...Add AtomChat to your Squarespace + Memberspace website
If you've built your website on Squarespace and want your users to chat with each other, AtomChat can easily help you do this! To register and authenticate users, AtomChat uses your website's existing user-management in place. Since Squarespace does ...