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:

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.

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>

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.

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.

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.

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:

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

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

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:

Arena Team.