Next.js

By the end of this page your site will have a chat button that opens Feddy on every page, and a message sent from it will be sitting in your inbox. It takes about five minutes.

Before you start

A Feddy project and its project ID. You’ll find the ID under Settings → Install in the dashboard. No project yet? Create one first.
Nothing to install from npm. The widget is one script loaded from Feddy’s servers after the page is interactive.

Add a client component

Next.js has a built-in Script component for loading scripts like this one. It needs to know when the script has finished loading so it can tell Feddy which project this is, and that callback only works in a client component, hence the 'use client' line:

app/support.tsx

'use client'
import Script from 'next/script'

export function Support() {
  return (
    <Script
      src="https://core.feddy.app/sdk/feddy.js"
      strategy="afterInteractive"
      onLoad={() => Feddy.init({ projectId: 'fd_XXXXXXXXXXXXXXXX' })}
    />
  )
}

The project ID isn’t a secret. It’s visible in your bundle, so anyone can find it, and that’s fine: it only tells Feddy which inbox a message belongs to. Commit it like any other setting. There’s nothing to protect, so keep it out of your secrets file.

Render it from the root layout

app/layout.tsx

import { Support } from './support'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Support />
      </body>
    </html>
  )
}

Because the root layout wraps every page, the widget loads once and stays put as users move around your site.By default, a floating chat button appears bottom-right. If you’d rather open Feddy from your own button, pass launcher: false to init and call Feddy.open() when the button is clicked.

Send yourself a message

Open the page, click the button, and send a message. Then open your inbox at dash.feddy.app: it’s there, with the page URL and browser alongside.Reply from the inbox. Back on the page, the reply appears in the panel.

That’s the whole loop: a visitor writes in, you answer, and the answer reaches them on your site.

Next steps

Identify users

Tell Feddy who’s logged in, so you see their name in the inbox and replies can reach them by email.

Unread badge

Show the count on your own element when you’ve turned the floating button off.

Conversations

What you’re looking at in the inbox, and what happens on its own.

Web SDK reference

Every option and call in the widget.

Get started

Quickstart

Learn

Guides

Before you start

Next steps

Identify users

Unread badge

Conversations

Web SDK reference

​Before you start

​Next steps

Identify users

Unread badge

Conversations

Web SDK reference

Before you start

Next steps