Feature
Put a room inside a page
The dock in the corner is one way to show a chat. The other is to put a named room in the middle of a page, sized to fit the layout, for the thing that page is about.
A room per page
An embedded room is addressed by name, so the chat beside a live stream is that stream’s chat and nothing else.
It is still the same session
Somebody reading the embedded room is the same signed-in person as in the dock, with the same name and the same history.
Sized to your layout
The embed takes the width it is given and scrolls internally, so it works in a sidebar and on a phone without a separate mobile design.
How it works
Putting the room where you want it
Decide where it lives
The dock in the corner is the default and suits a site where the chat accompanies whatever else somebody is doing. An embedded room is the opposite choice: it sits in your layout at a size you set, and it is the thing on the page rather than beside it.
Put a container in your markup
An element with an id, styled by your own CSS to whatever width and height your design calls for. The room fills it. There is no fixed aspect ratio to work around and no minimum size we impose on you.
Name the room
Tell the embed which room to open, so a page about one show opens the room for that show. The same page can be opened by a thousand people and they all land in the same conversation.
It is still one account
An embedded room and the dock are the same site, the same members and the same history. Somebody who joined in the dock yesterday is a familiar name in the embedded room today.
Questions
- Is this an iframe?
- The widget renders into the page inside a shadow root, which means your site’s CSS cannot reach in and break it and its styles cannot leak out and break your site. You get the isolation an iframe gives without the sizing and focus problems an iframe brings.
- Can I have the dock and an embedded room on the same site?
- Yes. A common arrangement is the embedded room on the page where the stream or the show is, and the dock everywhere else, so the conversation follows people around the rest of the site.
- What size should it be?
- Whatever your layout wants — you set it in your own CSS. Practically, a room narrower than about 280px starts to wrap names awkwardly, and one shorter than about 320px shows too little of the conversation for somebody to catch up on it.
- Does it work inside a responsive layout?
- Yes. Give the container a relative width and the room follows it, including down to a phone, where it reflows rather than shrinking the text.
Put a chat on your site this afternoon
One script tag before the closing body tag. Fourteen days free, and no card until you decide.