To add a free chat room to your website or blog, we have two possible ways, iframe or button.
iFrame
With the iFrame you can place the chat room on any webpage or blog and you can also resize the frame to fit into your page by changing the height and width parameters. It is highly recommended to use the current size set and not change the iFrame code because the chat room size is the actual size of the iFrame.
Copy and paste the code below to add a free chat room to your website or blog:
<iframe width="100%" height="800" src="https://addfreechat.com/chat-room/"></iframe>
Leave the width at 100% so that the chat room will stretch to your page size. The height is set at 800px to cater for mobile devices when the screen is narrower. You may notice a small white space under the text input box on larger screens. If your website is solely desktop only and you are not targeting mobile devices, you can change the height to 750px to remove the white space. It is recommended to leave the code exactly as it is.
Button
The button version is a simple button that your website or blog visitors can click to open the chat room in a popup. This leaves your webpage open in the background and the chat room floating over it. If you struggle with the iFrame or simply have no space for a chat room, this option is ideal for you. Choose from a button below and copy the code onto your website or blog where you would like the button to show.
Chat Button 1
<a href="https://addfreechat.com/chat-room/"
target="popup"
onclick="window.open('https://addfreechat.com/chat-room/','popup','width=900,height=800'); return false;">
<img class="alignnone size-full wp-image-59" src="https://addfreechat.com/wp-content/uploads/2018/09/chat-button-1.png" alt="" width="200" height="200"
</a>
Chat Button 2
<a href="https://addfreechat.com/chat-room/"
target="popup"
onclick="window.open('https://addfreechat.com/chat-room/','popup','width=900,height=800'); return false;">
<img class="alignnone size-full wp-image-59" src="https://addfreechat.com/wp-content/uploads/2018/09/chat-button-2.png" alt="" width="200" height="200"
</a>
Chat Button 3
<a href="https://addfreechat.com/chat-room/"
target="popup"
onclick="window.open('https://addfreechat.com/chat-room/','popup','width=900,height=800'); return false;">
<img class="alignnone size-full wp-image-59" src="https://addfreechat.com/wp-content/uploads/2018/09/chat-button-3.png" alt="" width="200" height="45"
</a>
Chat Button 4
<a href="https://addfreechat.com/chat-room/"
target="popup"
onclick="window.open('https://addfreechat.com/chat-room/','popup','width=900,height=800'); return false;">
<img class="alignnone size-full wp-image-59" src="https://addfreechat.com/wp-content/uploads/2018/09/chat-button-4.png" alt="" width="200" height="45"
</a>
You can edit the code to change the image size or change the image altogether should you have your own button. You can also change the size of the popup window and the size of the button. The code is very easy to understand and change. Have fun experimenting with different buttons, sizes and chat room popup sizes.