Full-screen Chat

Modified on Fri, 28 Oct, 2022 at 1: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:

  1. Install and activate AtomChat WordPress plugin

  2. 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>
Markup
Copy


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>
Markup
Copy


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

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article