Vue
Load the Feddy widget in onMounted 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:
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
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)
})
const open = () => Feddy.open()
</script>
<template><button @click="open">Support</button></template>The template cannot reach the Feddy global directly, which is why open is declared in the script. 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.