React
Load the Feddy widget from a React component and open it from your own button.
By the end of this page your app has a support button, and a message sent from it shows up in your Feddy inbox.
Prerequisites
- A Feddy project and its project ID from Settings → Install. Create a project if you have none.
- Nothing to install from npm. The widget is one script served from
core.feddy.app, loaded at runtime.
Add a component
Load the script once when the component mounts, then initialize with the launcher off so your own button is the entry point:
import { useEffect } from 'react'
export function Support() {
useEffect(() => {
const el = document.createElement('script')
el.src = 'https://core.feddy.app/sdk/feddy.js'
el.onload = () => Feddy.init({ projectId: 'fd_XXXXXXXXXXXXXXXX', launcher: false })
document.body.append(el)
}, [])
return <button onClick={() => Feddy.open()}>Support</button>
}init runs once per page; if the effect runs twice in development, the second call is ignored. Leave out launcher: false to get the floating launcher instead of your own button.
The project ID ships in your bundle and is public by design. Commit it. Do not put it in a secrets file or an environment variable.
Render it
Render <Support /> once, somewhere that stays mounted, such as your app shell or settings page.
Verify
Open the page, click the control, and send a message. It appears in your Feddy inbox. Reply from the inbox; the reply shows up in the panel.
Next steps
- Identify users so replies can also reach them by email and you see who wrote in.
- Unread badge to drive your own badge from
onUnreadCountChanged. - Web SDK reference for every option and call.