# Live Chat and realtime for Astro

> An Astro integration: one line in astro.config puts Hibira Live Chat on every page, and page scripts get events, presence and streamed LLM answers over one shared connection. Astro 4 to 7.

Source: https://hibira.io/guides/astro

An Astro integration: one line in astro.config puts Hibira Live Chat on every page, and page scripts get events, presence and streamed LLM answers over one shared connection. Astro 4 to 7.

Package: @hibira-io/astro

- The chat loads once and stays open across view transitions; <LiveChatButton> and links to #hibira-live-chat open it.
- <LiveChatUser> signs visitors in on the server with your identity secret, so the inbox shows who they are and their conversations follow them between devices.
- onEvent, onPresence and onStream in any <script> or island, channelAuth() for an API route, and streamToChannel() for LLM answers.

## 1. Install

```shell
npx astro add @hibira-io/astro
npm install pusher-js
```

## 2. Set it up

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import hibira from '@hibira-io/astro';

export default defineConfig({
  integrations: [
    hibira({
      liveChat: 'ws_YOUR_WORKSPACE', // or PUBLIC_HIBIRA_LIVECHAT_WORKSPACE
      realtime: {
        key: import.meta.env.PUBLIC_HIBIRA_KEY,
        options: {
          wsHost: 'ws.hibira.io',
          channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
        },
      },
    }),
  ],
});
```

## 3. Use it

```xml
---
import { LiveChatUser, LiveChatButton } from '@hibira-io/astro/components';
const user = Astro.locals.user;
---
<LiveChatUser user={user && { id: user.id, name: user.name, email: user.email }} />
<LiveChatButton topic="sales">Talk to sales</LiveChatButton>
<p><span id="online">0</span> online</p>

<script>
  import { onEvent, onPresence } from '@hibira-io/astro/realtime';

  onEvent('orders', 'order.created', (order) => console.log(order));
  onPresence('presence-dashboard', ({ count }) => (document.getElementById('online').textContent = String(count)));
</script>
```

## Before you start

- Find the workspace ID in the Live Chat console, and create an identity secret under Settings, Verified visitors. Put it in HIBIRA_LIVECHAT_IDENTITY_SECRET; it stays on your server.
- On the Free plan, list every origin your pages load from in the app’s allowed origins (http://localhost:3000 while developing, then your domain). "*" needs a paid plan.
- Private and presence channels need an auth endpoint on your backend that signs subscriptions with the app secret, as with pusher-js.
- On Astro 5.14 and later behind a proxy, list your domain in security.allowedDomains, or Astro refuses the auth request with 403.

- [npm](https://www.npmjs.com/package/@hibira-io/astro)
- [GitHub](https://github.com/hibira-io/astro)