Xatframe

To further customize the background of your chat, you can provide a link to an HTML document that will be embedded via iframe (known as a "xatframe") behind your chat. Within the embedded page, you can use any combination of HTML/CSS/JavaScript that you like including animations, generated content, etc.

This replaces the custom CSS styling that is currently used to customize chats, which no longer works on the new website.

Warning: JavaScript events (such as mouse clicks and key presses) are limited and you should not attempt to override this limitation or encourage users to engage with the embedded page. This, along with any malicious code, will be classed as a breach of the Terms of Service and your chat may be deleted.

Adding a xatframe to your chat

To do this, hover over "group" at the top right and click "customize" and enter your chat password. On the "appearance" tab, you will see a box labelled "xatframe". Put the link to the page you want to embed behind your chat.

Examples

Here are some examples of what is possible and the code used to produce them.

File:Https://i.imgur.com/PWqU9lq.png

Credit: LaFleur.
Link: https://lafleurengine.github.io/iframes/index.html
Preview: N/A

File:Https://i.imgur.com/mLelDlt.png

Credit: xLaming.
Link: https://static.mundosmilies.com/testiframe.html
Preview: https://xat.com/About?new

File:Https://i.imgur.com/j1Ou4St.png

Credit: xLaming.
Link: https://static.mundosmilies.com/testiframe2.html
Preview: https://xat.com/Mundosmilies?new

File:Https://i.imgur.com/1am8KgY.png

Credit: LaFleur.
Link: https://xat.com/html5?new
Preview: https://xat.com/html5?new

File:Https://i.imgur.com/40FNpN3.png

Credit: Sloom.
Link: https://xsloom.github.io/xatsloom.github.io/rubyyy.html
Preview: https://xat.com/rubyyy?new

Setting up a xatframe

If you want to create your own embedded webpage, you will need to first have somewhere to host your webpage. For this, we recommend you use github.io as it is easy to set up and is already pre-unblocked. If you wish to use your own domain, you will need to have it unblocked by making a ticket.

For more information on setting up GitHub pages, you can visit their website.