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

Add AtomChat to your Teachable website

  • Dark
    Light

You can easily add AtomChat group and private one-on-one chat to your Teachable lesson space.

Our SSO feature

All your users will be able to access the chat without having to create a separate account. We fetch user details, i.e the username, avatar image, and role from your Teachable itself. 

Guest chat and Private chat 

If you want only your members or logged-in users to be able to chat in a private space, you can disable Guest chat!

Please go to your AtomChat Admin Panel  -> Settings -> Authentication -> Would you like guests to login as well? -> This can be set to No.

Guests are basically non-logged-in users or website visitors. If you want visitors also to be able to chat, you can change this setting to Yes. 

Let's 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 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.


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

4. Setting up the Docked Layout


  1. Log in to your Teachable school
  2. Select Site
  3. Click Code Snippets
  4. Paste the following code inside the Head Code Snippets box and click the Save button.
<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';

document.addEventListener('DOMContentLoaded', function(){
    window.chat_id = window.fedora_user['id'];
    window.chat_name = window.fedora_user['name'];
    window.chat_avatar = window.fedora_user['gravatarUrl'];
    window.chat_role = window.fedora_user['role'];
});
</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 'API_KEY' values with your own keys from your AtomChat Admin Panel -> API Keys

5. Setting up the Embedded Layout



1. log in to your Teachable school

2. Select Site 

3. Click Code Snippets 

4. Paste the following code inside the Head Code Snippets box and click the Save button.

<script>
var chat_appid = 'APP_ID';
var chat_auth = 'AUTH_KEY';

document.addEventListener('DOMContentLoaded', function(){
    window.chat_id = window.fedora_user['id'];
    window.chat_name = window.fedora_user['name'];
    window.chat_avatar = window.fedora_user['gravatarUrl'];
    window.chat_role = window.fedora_user['role'];
});
</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 'API_KEY' values with your own keys from your AtomChat Admin Panel -> API Keys


6. Contact Sync 

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

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