Svelte

By the end of this page your app will have a Support button that opens Feddy, 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 when your component mounts.

Add a component

The component loads the script once, then tells Feddy which project this is. launcher: false turns off the floating chat button so your own button is the way in:

Support.svelte

<script>
  import { onMount } from 'svelte'
  onMount(() => {
    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)
  })
</script>

<button onclick={() => Feddy.open()}>Support</button>

On Svelte 4, write the handler as on:click instead of onclick. Leave out launcher: false if you’d rather have the floating button instead of your own.

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 once

Put <Support /> somewhere that stays mounted, such as your root layout or settings page. The widget keeps its own styles, so it never clashes with your CSS.

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 a count on your Support button when a reply is waiting.

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