Full-screen Chat

Modified on Fri, 28 Oct 2022 at 01:23 PM

For an Inbox view, you can add AtomChat to a page on your website in full-screen!

Dive into this documentation and learn how.

If you are a WordPress User

If your website is on WordPress and you've used our shortcode to add the Embedded layout, the full-screen setup will not be possible. The chat layout will not fit to cover the height and width as per screen sizes on all devices.

So, for a full-screen setup, please use the HTML code instead of the Shortcode.

Here are the steps:

Install and activate AtomChat WordPress plugin
From your page editor, select the Custom HTML element and add the code given below

Screenshot 2022-07-12 at 10.59.35 AM

<script>
  var chat_appid = 'APP_ID';
  var chat_auth = 'AUTH_KEY';
</script>
<script>
  var chat_height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight +'px';
  var chat_width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth +'px';

  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;chat_iframe.height=chat_height;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

In the code snippet above, make sure to replace APP_ID with your App ID and AUTH_KEY with your own Keys.

Not a WordPress User

For the full-screen layout, you need to adjust the chat variables that are present in the Embedded layout code ( chat_height and chat_width ), have a look -

HTML code for full-screen layout

<script>
  var chat_appid = 'APP_ID';
  var chat_auth = 'AUTH_KEY';
</script>
<script>
  var chat_id = 'USER_UID';
  var chat_name = 'USER_NAME';
  var chat_avatar = 'USER_AVATAR';
  var chat_link = 'USER_PROFILELINK';
</script>
<script>
  var chat_height = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight +'px';
  var chat_width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth +'px';

  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;chat_iframe.height=chat_height;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

In the code snippet above, make sure to replace APP_ID with your App ID and AUTH_KEY with your own Keys.

If you still need help

Please feel free to reach out or schedule an integration meeting with our engineering team.

Happy to help :)