Full-screen Chat

Full-screen Chat

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

    • Related Articles

    • Chat with a user from their Profile - Softr

      For your Softr Marketplace or Community, in addition to adding AtomChat’s default chat layouts, you can also start a one-on-one chat with a user directly from their profiles. We’ll show you how ? How to add a button in softr.io? Add the “List ...

    • Buyer-Seller Marketplace

      By default, you can add AtomChat as a docked layout on your website (i.e the chat popup on the bottom right or left of your website) or as an Embedded Layout on any page. For a Marketplace, typically, there is a vendor listing. And the option to ...

    • Embedded Groups

      You can embed a Group on any of your website pages! This can serve multiple use-cases. For example - 1. Topic-specific page for Communities. A group can be embedded for open discussions 2. Group chat for Live streams and Events 3. Forum discussion ...