# Framework recipes

> Copy-paste integration recipes for React, Next.js (App Router), and Vue 3.

Source: https://docs.useclad.ai/framework-recipes

---

### React

Include the [Quickstart](#quickstart) `<script>` snippet once in your app shell,
then use a small hook to identify the user on login and shut down on logout.
Calls made before the widget finishes loading are queued and replayed, so you
don't need to wait for it to be ready.

```jsx
import { useEffect } from "react";

export function useSupportChat(user) {
  useEffect(() => {
    if (user) {
      SupportChat("identify", {
        user,
        tokenProvider: () =>
          fetch("/api/support-chat-token").then((r) => r.text()),
      });
    } else {
      SupportChat("shutdown", { clearStorage: true });
    }
  }, [user?.id]);
}
```

### Next.js (App Router)

Load the widget with `next/script` and render it once in your root layout:

```jsx
"use client";
import Script from "next/script";

export default function SupportChatLoader() {
  return (
    <Script id="support-chat" strategy="afterInteractive">
      {`
        window.SupportChatSettings = { workspaceId: "{YOUR_WORKSPACE_ID}", widgetId: "{YOUR_WIDGET_ID}" };
        (function (w, d) {
          w.SupportChat = w.SupportChat || function () {
            (w.SupportChat.q = w.SupportChat.q || []).push(arguments);
          };
          var s = d.createElement("script");
          s.async = true;
          s.src = "https://clad-server-staging.up.railway.app/widget/v1/widget.js";
          d.head.appendChild(s);
        })(window, document);
      `}
    </Script>
  );
}
```

### Vue 3

With the [Quickstart](#quickstart) `<script>` snippet included once in your
`index.html`, drive the widget from your components:

```js
import { onMounted } from "vue";

export function useSupportChat(user) {
  onMounted(() => {
    if (user) {
      SupportChat("identify", {
        user,
        tokenProvider: () =>
          fetch("/api/support-chat-token").then((r) => r.text()),
      });
    }
  });
}
```