Add AtomChat to your Invision Power Board (Cloud) website
  • 3 Minutes to read
  • Dark
    Light

Add AtomChat to your Invision Power Board (Cloud) website

  • Dark
    Light

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 click on the Manage button and then note down the keys present in API Keys (top right button) section - API Key, Auth Key, License Key and App ID. You may need these during installation.

3. Secure your environment 

For successful integration, please ensure your domain or local environment is SSL certified and secure.

AtomChat Admin Panel
AtomChat Admin Panel

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 website.

And 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 behaviour from the software.


Setting up Docked Layout 


                   Docked Layout
                   Docked Layout

Please copy the code given below and replace APP_ID and AUTH_KEY with your unique keys.

Then follow the instructions given in the section - "Where to add this code?"

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<script>
if(document.getElementById("cUserLink") != null || document.getElementById("cUserLink") != "null" || document.getElementById("cUserLink") != ""){
    chat_id = document.querySelector("#elUserNav #cUserLink .ipsUserPhoto").getAttribute("href").split("profile/")[1].split("-")[0];
    chat_name = document.querySelector("#elUserNav #cUserLink #elUserLink").innerText;
    chat_avatar = document.querySelector("#elUserNav #cUserLink .ipsUserPhoto img").src;
    chat_link = document.querySelector("#elUserLink_menu [title='Go to your profile']").href;
}
</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>


ATTENTION

In the code snippet above, make sure to replace 'APP_ID' with your App ID and 'AUTH_KEY' with your Auth Key.


Where to add this code?

  • Login to your IPB AdminCP → Customization section → Select Themes → In front of your default theme, click on "Edit HTML and CSS" icon (refer following screenshot for the same).
Document image
  • The "globalTemplate" will get opened. Scroll down to bottom and the above docked layout code right before the closing </body> tag and save the globalTemplate.

You can learn more about how to modify your template in the IPB Documentation.



Setting up Embedded Layout

               Embedded Layout
               Embedded Layout

Please copy the code given below and replace APP_ID and AUTH_KEY with your unique keys.

Then follow the instructions given in the section - "Where to add this code?"

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';
</script>
<script>
if(document.getElementById("cUserLink") != null || document.getElementById("cUserLink") != "null" || document.getElementById("cUserLink") != ""){
	chat_id = document.querySelector("#elUserNav #cUserLink .ipsUserPhoto").getAttribute("href").split("profile/")[1].split("-")[0];
	chat_name = document.querySelector("#elUserNav #cUserLink #elUserLink").innerText;
	chat_avatar = document.querySelector("#elUserNav #cUserLink .ipsUserPhoto img").src;
	chat_link = document.querySelector("#elUserLink_menu [title='Go to your profile']").href;	
}
</script>
<script>
var chat_height = '600px';
var chat_width = '100%';

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>





ATTENTION

In the code snippet above, make sure to replace 'APP_ID' with your App ID and 'AUTH_KEY' with your Auth Key.


Where to add this code?

  • Paste the the above code in any page of your site where you want Chat to appear. You can add above code in existing pages or you can create new page and add code there.
  • Where you can find pages on your site -
  1.  Login to your IPB AdminCP → Pages section → Select Pages
  2.  If you wanted to add embedded layout in existing page, the edit that existing page and add the  above code under "Content" section.
  3.  If you wanted to create new page for chat, then with "Add Page", you can create new page and  add the above code under "Content" section.
Document image

Contact Sync

Your users will be visible on the contact list once they log in using their credentials again to the site after installation.

 


Security 


IMPORTANT

Before you go live, follow our security guide to ensure your integration is secure.

Jump to Security Guide

Congrats!! You are all set to start using AtomChat!