Add a chat widget to a React app

In a single-page React app there's no </body> you edit per page, so load the script once when the app mounts.

Simplest: index.html

If you have a Vite/CRA-style index.html, add the snippet before </body> there and you're done — it loads with the app shell.

<script src="https://kelma.chat/embed.js" data-kelma="YOUR_AGENT_ID" async></script>

From a component

To keep it in code, inject it once with an effect (e.g. in your root App component):

import { useEffect } from "react"

export function KelmaWidget({ agentId }) {
  useEffect(() => {
    if (document.querySelector("script[data-kelma]")) return // don't double-load
    const s = document.createElement("script")
    s.src = "https://kelma.chat/embed.js"
    s.async = true
    s.dataset.kelma = agentId
    document.body.appendChild(s)
  }, [agentId])
  return null
}

Render <KelmaWidget agentId="YOUR_AGENT_ID" /> once, high in your tree. The guard stops a second script being added on re-render or hot-reload. The widget itself lives in its own iframe, so it never clashes with your app's state or styles.