# Guide: Add public chat to your app

The fastest way to ship chat: a public room any visitor can join by connecting their wallet. No backend required.

**You'll need:** an embed created in [the portal](https://portal.cherry.fun/dashboard) (in `wallet-only` mode), its `appId`, your origin allow-listed, and a public room's `roomId`.

## 1. Install

```bash
npm install @cherrydotfun/chat-embed-sdk
```

## 2. Add a container

```html
<div id="cherry-chat" style="height: 600px"></div>
```

## 3. Mount

```ts
import { CherryEmbed } from '@cherrydotfun/chat-embed-sdk';

const chat = new CherryEmbed({
  appId: 'YOUR_EMBED_ID',
  container: '#cherry-chat',
  roomId: 'YOUR_ROOM_ID',
  mode: 'single',
  theme: { mode: 'dark', primaryColor: '#FF5BA8' },
});

await chat.mount();
```

That's a complete, themed, public chat room. Visitors connect their own wallet to post.

> **Tip:** Want to see it before you wire it up? Try the [live embed builder](https://cherry.fun/chat-embed-example/), a no-signup, no-backend demo where you can switch themes and display modes in real time and copy the matching integration snippet.

## Make it a floating widget

Drop the `container`, switch `position`, and start collapsed. The widget doesn't render its own launcher button, so wire your own control to open it (see [display modes](https://portal.cherry.fun/docs/embed/display-modes.md) for all options):

```ts
const chat = new CherryEmbed({
  appId: 'YOUR_EMBED_ID',
  roomId: 'YOUR_ROOM_ID',
  position: 'floating-right',
  collapsed: true,
});
await chat.mount();

// collapsed starts hidden: open it from your own UI
document.querySelector('#open-chat')?.addEventListener('click', () => chat.toggle());
```

## Where next

- Tie chat identity to *your* users → [Authenticated chat](https://portal.cherry.fun/docs/guides/authenticated-chat.md).
- Theme it → [Theming](https://portal.cherry.fun/docs/embed/theming.md).