Embed a Chat Room on Your Website

1. Create your room

Sign up in the control panel, name the room and pick a theme. Every room gets a permanent URL of the form /chat/<id>, for example /chat/1.

2. Paste the snippet

Iframe

Recommended for content management systems and page builders, because it cannot collide with your site's CSS or JavaScript.

<iframe
    src="https://www.chatsocket.net/chat/1?key=YOUR_KEY"
    title="Chat room"
    width="100%"
    height="640"
    loading="lazy"
    style="border:0;border-radius:12px">
</iframe>

Swap 1 for your room id and YOUR_KEY for the key on the Embed API page of the control panel. That page hands you this same snippet with the key already filled in, so copying it from there beats typing it. On a page that is already listed under Allowed domains the ?key= part can be left off.

Every parameter, the allowed domain list and the error screens are covered in the Iframe API reference.

Script tag (fits your layout)

Use this when the room should take over a container you already have.

<div id="chatsocket-room" style="height:640px"></div>
<script src="https://www.chatsocket.net/embed/chatroom.js"
        data-room="1"
        data-target="chatsocket-room"
        data-key="YOUR_KEY"></script>

data-key takes the same key you copy from the Embed API page: optional on a page of your own, required anywhere else.

What makes the frame open. Either the key in the snippet, or a page whose address is your room's own website or one listed under Allowed domains in the control panel. With neither, the frame stops at the credentials screen instead of your chat. The whole rule is written out in Who may embed.

Height matters. A room shorter than roughly 480px hides the message list on phones. Let the container fill its parent, or set a minimum height in CSS.

3. Decide how people get in

Guest first - visitors pick a nickname and start talking immediately.
Login first - the room opens on the login screen and only registered accounts get through.
Both - guest entry for drive by chat, registration for people who come back.

You can switch the policy at any time from the room settings; nobody has to touch their embed again.

Standalone link

If an embed is not what you want, the room is a page of its own and works as a normal link in a menu, a button or a forum signature.

https://www.chatsocket.net/chat/1

HTTPS, cookies and privacy

The room is served over HTTPS, so it only opens on a page served over HTTPS as well. It sets one cookie to remember who is signed in.

Ready to embed?

Create a room and copy the snippet the panel gives you.

Create your chat room Iframe API reference

← Back to the home page

Embed a chat room on your website