How to Embed a Chat Room on Your Website

You do not need a server, a developer or even a database to put live chat on your website. With a hosted room from ChatSocket, the whole job is: create the room, copy one snippet, paste it where the chat should appear. This guide walks through it in about ten minutes.

Step 1 — Create the room

Sign up at chatsocket.net, open the control panel and create a room. Give it a name, pick one of the fourteen themes and choose who may enter: guest first (pick a username and talk immediately), login first, or both. Every room gets a permanent URL of the form /chat/1, and a 7-day free trial starts automatically — no card details required.

Step 2 — Copy your embed snippet

The control panel's Embed API page generates the code for you, already filled with your room ID and key. Two formats are available — use whichever suits your site.

Option A — iframe (best for WordPress, page builders and CMSs):

<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>

The iframe cannot collide with your site's CSS or JavaScript, which is why it is the recommended choice for content management systems.

Option B — script tag (best when you control the container):

<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>

The script fills whatever container you point it at, so the room inherits your site's width and layout.

Step 3 — Paste and publish

Plain HTML site

Open the page where the chat should live, paste the snippet where you want it to appear, save and upload. Done.

WordPress

Add a Custom HTML block (or paste into a text widget) and drop the snippet inside it. Save the page — the room renders inline.

Page builders

Use the builder's HTML/embed element and paste the iframe. No theme edits needed, updates never overwrite it.

Single link instead

Prefer no embed at all? Link straight to your room's standalone URL: https://www.chatsocket.net/chat/1 — it works anywhere a link does.

Three settings worth knowing

Height

A room under roughly 480px tall hides the message list on phones. Let the container fill its parent or set a sensible minimum — 640px is a safe default.

Allowed domains & keys

The key in the snippet (or a page listed under Allowed domains) is what lets the room open on your site. That is also your protection: the embed will not load on random sites that copy your snippet.

HTTPS

The room is served over HTTPS, so it only embeds on a page that is also HTTPS. If your site is not on SSL yet, this is the perfect reason to switch.

Entry mode

You can switch between guest login and mandatory registration at any time from room settings — your embed never needs to change.

Embedding FAQ

Do I need to know how to code?

No. The whole embed is copy-paste. The control panel hands you the finished snippet with your room ID and key already in place.

Will the chat slow my website down?

The room loads in its own lazy-loaded frame, so your page content paints first. Nothing heavy is added to your site's own code.

Can I put chat on multiple pages?

Yes, the same embed works on any number of pages on allowed domains, and Basic and Premium plans support one or up to fifteen rooms respectively.

What does the trial cost to test?

Nothing — 7 days free, no card up front. If you let it lapse, the room pauses rather than deletes.

Is this different from a live chat widget for support?

Yes — this is a full community chat room (ranks, DMs, voice, moderation), not a visitor-to-operator support widget. See the ChatSocket overview for the feature list.

What about a self-hosted option?

If you would rather own the code, compare routes in our hosted vs self-hosted guide and browse the CodyChat store.