Add one line of script to your site and a real chat panel opens on the page. No plugin, no account for you to manage, and no build step.
Your visitors do not need the Brane app, and they do not need to go anywhere. They sign in with a six digit email code inside the panel and start talking in seconds, on your page, without a phone number.
There are two kinds of embed, and a snippet is exactly one of them. A private chat connects visitors to one person. A Crowd drops your group conversation into the page.
Private chats
data-user opens a one to one conversation with a single Brane account. Every visitor gets their own private thread, so it behaves like a support inbox rather than a room.
<script src="https://embed.brane.chat/embed.js"
data-user="your-username"
defer></script>What people use it for
– A support widget. Visitors message your support account from any page. This is not a chatbot, and the panel says so, which is increasingly the thing people want to hear. – Replacing a contact form. A contact form is a message into the dark, and the visitor never knows it arrived. A chat thread is a conversation they can come back to, and that you can reply to days later. – Talking to your audience. Creators, coaches, agents and consultants can put "message me" on their own site and keep the conversation off a social platform they do not control.
What a visitor has to do
Give an email address and a date of birth. That is the whole signup. A private chat embed asks for nothing else by default, no photo, no bio, no interests, so somebody goes from reading your page to talking to you in about twenty seconds. You can put any of those steps back with the switches below.
Visitors who sign up here stay out of Brane's username search until they install the app, so embedding a chat does not push your customers into a social network they did not ask for.
Crowds
data-crowd opens a Crowd, which is Brane's group chat. Everyone in the panel is in the same conversation, and it is the same Crowd your members use in the app, so a message sent from your website reaches people on their phones.
<script src="https://embed.brane.chat/embed.js"
data-crowd="your-crowd-name"
defer></script>What people use it for
– A club, team or society. Members talk on your own homepage instead of in a group chat only existing members can find. – An event. Put the conversation on the event page, so people arriving, buying a ticket or just looking it up can talk to each other beforehand. – A community around a place or a product. A venue, a shop, a course or a local group can host an open conversation rather than a comments section. – A discussion that outlives the page. The Crowd carries on in the app after somebody closes the tab, so the conversation does not reset every visit.
Who can embed a Crowd
Any member, not just the owner. A Crowd without a join code is public, so its snippet can be read off any site carrying one, and spreading it is the point.
⚠️ A Crowd with a join code cannot be embedded. The panel has nowhere to ask for the code, so it shows an "only available in the app" message instead of the conversation. Adding a join code to a Crowd that is already embedded breaks those embeds, with nothing warning the sites carrying them.
Adding it to your site
Paste the snippet anywhere in the page, or into your theme's footer so it appears site wide. It draws a floating button in the corner, and the panel opens when somebody taps it.
<script src="https://embed.brane.chat/embed.js"
data-crowd="your-crowd-name"
data-primary="#ff0066"
defer></script>⚠️ Keep defer. Without it the loader blocks the browser while your page is still being read, which is the most common reason a snippet gets removed again.
The script is about 5KB and loads nothing else until somebody actually opens the chat, so a page nobody clicks on pays almost nothing for carrying it.
Settings and switches
Every setting is an attribute on the same script tag. Exactly one of data-crowd or data-user is required, and they are the two things the embed can be. Setting both, or neither, adds nothing to the page.
| Attribute | Default | What it does |
|---|---|---|
data-crowd | one of these two is required | The Crowd to open, by its name rather than its display name |
data-user | one of these two is required | The person to chat to, by Brane username |
data-primary | #111111 | Your brand colour. Tints the launcher and the panel |
data-secondary | #e5484d | The unread badge colour |
data-welcome | a default line about signing in | The text above the email field |
data-theme | light | light or dark. The visitor can change it themselves, so this is a starting point rather than a lock |
data-position | right | right or left, which corner the launcher sits in |
data-label | Open chat | The launcher's label, read out by screen readers |
data-launcher | a launcher is drawn | Set to none to draw no floating button and open the panel from your own button instead |
Private chat only
These four are ignored on a data-crowd snippet. A Crowd always asks for a photo, a profile and interests, and that cannot be switched off.
| Attribute | Default | What it does |
|---|---|---|
data-ask-photo | false | Set true to ask the visitor for a profile photo |
data-ask-profile | false | Set true to ask for a name and short bio |
data-ask-interests | false | Set true to ask what they are into |
data-interests | none | Interests saved quietly for accounts this embed creates, comma separated, for example data-interests="running,cycling" |
⚠️ Every switch you turn on is another step between reading your page and talking to you. The defaults are the fast path on purpose.
Opening the chat from your own button
Set data-launcher="none" and no floating button is drawn. Your page then opens the panel itself, which is what a site with its own call to action wants.
<script src="https://embed.brane.chat/embed.js"
data-user="your-username"
data-launcher="none"
defer></script>document.querySelector('#message-me').addEventListener('click', () => window.Brane.open());⚠️ With no launcher, your page is the only way in. A snippet that sets this and never calls open() installs a chat nobody can reach, and it looks exactly like a snippet that failed to load.
window.Brane also carries:
| Call | What it does |
|---|---|
open() | Opens the panel |
close() | Closes it |
toggle() | Opens it, or closes it if it is already open |
isOpen() | Whether the panel is open |
destroy() | Removes the embed entirely. A single page app must do this before loading a different chat, because the target is fixed when the script runs |
onUnread | Assign a function to receive the unread count, so you can badge your own button |
onOpenChanged | Assign a function to be told when the panel opens or closes |
Good to know
– The panel is never a white box while it loads. It paints your chosen theme from the first frame, so an opening chat does not look broken on a slow connection. – It works on phones. Below 520px wide the panel goes full screen, and the page behind it is locked so it cannot scroll away underneath. – Escape closes it, and closing returns focus to whatever opened it without throwing away the visitor's place on your page. – Visitors are not notified of replies yet. A browser tab cannot receive push, so somebody who closes the panel will not know you answered until they open it again. Worth saying in your data-welcome text if your replies are not immediate.