Add AtomChat to your Kajabi website
  • 2 Minutes to read
  • Dark
    Light

Add AtomChat to your Kajabi website

  • Dark
    Light

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


Also, 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.

4. Setting up the Docked Layout



1. If you want to add the docked chat layout on all pages, then you have to add the code given below to your website's theme file.

theme.liquid

2. Path to find the theme.liquid file 

Kajabi Admin Dashboard → Go to Website → Design → Besides your current website's theme name, you will see an arrow, click on that → Click on Modify code → Layouts → theme.liquid file.


3. Add the code snippet given below at the end of the file before the </body> tag.

4. Save the changes.

NOTE
This will add docked chat layout only on the pages that are created in Kajabi.

 

5. If you want the docked layout only on certain pages, then add the code given below only to the respective pages at the end of the page.


NOTE
Please replace the APP_ID and AUTH_KEY values in the code with your own keys from your AtomChat Admin Panel -> API Keys



<script>
    chat_appid = "APP_ID";
    chat_auth = "AUTH_KEY";
    chat_id = "{{ current_site_user.id }}";
    chat_name = "{{ current_site_user.name }}";
    chat_avatar = "{{ current_site_user | avatar_url }}";
    chat_email = "{{ current_site_user.email }}";
</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>


5. Setting up the Embedded Layout



1. Login to your Kajabi Dashboard

2. Paste the code given below to any page (or create a new page) from your Kajabi Admin Dashboard

3. Go to Website → Pages

4. Add the code given below to the pages where you want the AtomChat Embedded layout 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


<script>
  chat_appid = "APP_ID";
  chat_auth = "AUTH_KEY";
  chat_id = "{{ current_site_user.id }}";
  chat_name = "{{ current_site_user.name }}";
  chat_avatar = "{{ current_site_user | avatar_url }}";
  chat_email = "{{ current_site_user.email }}";
</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>

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 Kajabi 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 :)