Widget
Other Frameworks
Use Lumifeed with Svelte, Astro, Remix, and other frameworks.
Other Frameworks
For any framework not listed, use the HTML snippet or the JavaScript API directly.
Svelte
<!-- src/lib/Lumifeed.svelte -->
<script>
import { onMount } from "svelte"
export let apiKey
export let user = undefined
onMount(() => {
const script = document.createElement("script")
script.src = "https://cdn.lumifeed.app/widget.js"
script.dataset.key = apiKey
script.defer = true
document.body.appendChild(script)
script.onload = () => {
if (user) window.Lumifeed?.identify(user)
}
return () => document.body.removeChild(script)
})
</script><!-- src/routes/+layout.svelte -->
<script>
import Lumifeed from "$lib/Lumifeed.svelte"
</script>
<slot />
<Lumifeed apiKey={import.meta.env.VITE_LUMIFEED_KEY} />Astro
---
// src/layouts/Base.astro
---
<html>
<body>
<slot />
<script
src="https://cdn.lumifeed.app/widget.js"
data-key={import.meta.env.PUBLIC_LUMIFEED_KEY}
defer
></script>
</body>
</html>Remix
// app/root.tsx
import { Scripts } from "@remix-run/react"
export default function App() {
return (
<html>
<body>
<Outlet />
<script
src="https://cdn.lumifeed.app/widget.js"
data-key={process.env.LUMIFEED_KEY}
defer
/>
<Scripts />
</body>
</html>
)
}Any other framework
Append the script tag to document.body when your app mounts, then call window.Lumifeed.identify() after authentication. See JavaScript API for all available methods.