All Collections
Live Chat
More about the Live Chat formats and how to change the size of them
More about the Live Chat formats and how to change the size of them

In this article, you will learn more about each Live Chat format, its best uses, and how to change the size of each one of them.

Gabriel Carvalho avatar
Written by Gabriel Carvalho
Updated over a week ago

Note: Arena widgets are responsive, which means that they adapt to most devices, be it mobile devices such as smartphones or notebooks.

We currently offer the following chat formats:

Embed

We call "embed" the Javascript code and it's, usually, the format that adapts more to the style of your website. The embed is available in 4 formats and those formats are In-page, Bottom, Side, and Overlay.

  • In-page

This chat format is embedded in the container you want it. It is a good format to use within an article on your page, next to a live event video, or in a side menu. You need to enter the size style style="height: 400px; width:500px" to increase its height and width. Example:

Without height and width:

<div class="arena-chat" data-publisher="testchat" data-chatroom="testchat" data-position="in-page"></div><script async src="https://go.arena.im/public/js/testchatarena"></script>

With height and width:

<div style="height: 400px; width:500px" class="arena-chat" data-publisher="testchat" data-chatroom="testchat" data-position="in-page"></div><script async src="https://go.arena.im/public/js/testchat"></script>

  • Bottom

This format is displayed above the content of your page, floating in the right corner. Its height uses 90% of the page height, according to the resolution, which means, it has fixed width and its height adapts automatically. It is indicated when you want the chat to be always visible so your audience can engage with the content on your page and it can be used together with the Live Blog. It has the option of minimization.

  • Side

The Side format is also shown in the right corner of the page, like the bottom format. The main difference is that it occupies the entire right corner up to the navigation bar, the top of the page and its size automatically adapts to the page. It also has the option to minimize the chat.

Overlay

The overlay is a bit different from the previous formats. It has a floating bubble on the right corner and the chat is above it. It is a more discreet and dynamic format at the same time because it is smaller than the others with the same features.

Iframe

We also offer the Iframe format, which is a tag inserted into your website's code to show another website in a smaller format. It is presented to the user as a window within the main window. That format is used by several systems and widgets.

The difference between iframe and embed is that iframe does not adapt to the style of the page. It is recommended in some cases when the embed does not work due to some conflict on the page.

Changing the height and width of the Iframe:

  • If your page's container already has the size defined, we recommend using the width: 100%; height: 100%. So, it will use the size you define in your container. See an example of how it looks like in the code:

<iframe src='https://sandbox.arena.im/embed/chat/testechat' style='border: 0; width: 1px; min-width: 100%; height: 100%; border-radius: 4px;'></iframe>

  • If your page's container doesn't have the size defined, we recommend setting the height of the iframe width: 400px; height: 400px (we put 400px as the ideal, but you can change it according to your need). Example of how it looks like in the code:

<iframe src='https://sandbox.arena.im/embed/chat/testchat/testchat' style='border: 0; width: 400px; height: 400px; border-radius: 4px;'></iframe>

Others

In addition, we offer other embedding options in the Others tab. They are AMP, Facebook Instant Articles, and Native App. See details about each one below:

  • AMP: Arena for Accelerated Mobile Pages (AMP) is a fast-loading, optimized Arena experience for Google AMP compatible pages. AMP is a way to build web pages for static content that renders quickly, especially on mobile devices. Learn how to use AMP code on your website.

  • Facebook Instant Articles is a new way for any publisher to create fast, interactive articles on Facebook. With this embed option, your instant articles on Facebook will render our widget correctly.
    This integration requires extra steps, click here to know how to properly set up Instant Articles.

  • Native App is used for platforms that need a different approach to incorporation, such as mobile apps. Learn more about Native app here.
    ​

Arena Team.

Did this answer your question?