Note: all Arena widgets are responsive, meaning it adapts to most devices, whether on mobile devices such as smartphones or notebooks.
The first step is to identify the embed code used, we currently offer the following formats:
This chat format is embedded in the container you want, for example, it is indicated for you to use within an article on your page, next to a live event video, or in a side menu. To increase its height and width you must enter the size style
style="height: 400px; width:500px", 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 above the content of your page floating in the right corner, its height uses 90% of the page height according to the resolution, that is, it has a fixed width and the height adapts automatically. It is indicated for cases where you want the chat always visible and your users engage with the content of your page, which can be used together with the Live Blog. It has the option of minimization.
The Side format is also in the right corner of the page as in the bottom, the difference is that it occupies the entire right corner up to the navigation bar, the top of the page, and also has the option of minimizing. Its size automatically adapts to the page.
The overlay is the most different format from the others, it has a floating bubble 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 and has all the features.
We offer the Iframe format, which is a tag inserted into your website's code to show another website in a smaller way. It is presented to the user as a window within the main window, it is a format 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 for some cases when the embed does not work due to some conflict on the page.
To change the height and width of the Iframe:
- If your page's container already has one defined, we recommend using the width: 100%; height: 100%, this way it will use the size you define in your container, example of how it looks 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 one defined, we recommend setting the height of the iframe width: 400px; height: 400px (we put 400px as an ideal example, but you can change it according to your need), example of how it looks in the code:
<iframe src='https://sandbox.arena.im/embed/chat/testchat/testchat' style='border: 0; width: 400px; height: 400px; border-radius: 4px;'></iframe>
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.
- 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.