Widget Documentation
Collect feedback from your website visitors and receive it instantly via Telegram, Email, or your dashboard.
1Basic Installation
Add this script tag before the closing </body> tag:
<script defer src="https://feedgram.app/widget.js" data-token="YOUR_TOKEN"></script>Replace YOUR_TOKEN with the token from your dashboard.
2Next.js Installation
Use the Script component with afterInteractive:
import Script from 'next/script'
export default function Layout({ children }) {
return (
<>
{children}
<Script
src="https://feedgram.app/widget.js"
data-token="YOUR_TOKEN"
strategy="afterInteractive"
/>
</>
)
}3Position Options
Use data-position to change the widget position:
<!-- Bottom right (default) -->
<script defer src="https://feedgram.app/widget.js" data-token="YOUR_TOKEN" data-position="bottom-right"></script>
<!-- Bottom left -->
<script defer src="https://feedgram.app/widget.js" data-token="YOUR_TOKEN" data-position="bottom-left"></script>
<!-- Top right -->
<script defer src="https://feedgram.app/widget.js" data-token="YOUR_TOKEN" data-position="top-right"></script>
<!-- Top left -->
<script defer src="https://feedgram.app/widget.js" data-token="YOUR_TOKEN" data-position="top-left"></script>Configuration
| Attribute | Required | Default | Description |
|---|---|---|---|
data-token | Yes | — | Your unique widget token from the dashboard |
data-position | No | bottom-right | bottom-right, bottom-left, top-right, top-left |
Rating System
The widget includes three rating options:
Hot
Positive
Senseless
Neutral
Cold
Negative
Initial Setup
Connect your account to start receiving feedback:
Open @feedgramai_bot on Telegram
Search for the bot or click the link in your dashboard
Send /start command
The bot will reply with your unique Chat ID number
Register with your Chat ID
Copy the Chat ID and paste it into the registration form
Verify with 6-digit code
Enter the verification code sent to your Telegram
Install widget on your website
Copy the widget code from your dashboard and add it to your site
How It Works
User clicks feedback button
A floating button appears on your website
User submits feedback
They select a rating and optionally add a note
You get notified
Feedback is sent to Telegram/Email with page URL and details
View in dashboard
Access all collected feedback, AI analysis, and stats
Data Collected
When a user submits feedback, we collect:
| Field | Description |
|---|---|
| Rating | The selected rating (Hot, Senseless, or Cold) |
| Note | Optional text message (max 2000 characters) |
| Page URL | Full URL of the page where feedback was submitted |
| Hostname | The domain name of your website |
| User Agent | Browser information for debugging |
Security & Privacy
Input Sanitization
All inputs sanitized against XSS and injection attacks
Token Authentication
Each widget uses a unique token for request auth
CORS Protection
Cross-origin requests handled with security headers
No Personal Data
No IP addresses, cookies, or tracking collected
API Reference
Submit feedback directly via the API for advanced integrations.
/api/feedbackcurl -X POST https://feedgram.app/api/feedback \
-H "Content-Type: application/json" \
-d '{
"token": "YOUR_TOKEN",
"rating": "hot",
"note": "Great product!",
"pageUrl": "https://example.com/pricing",
"hostname": "example.com"
}'Request Body
| Field | Type | Required | Description |
|---|---|---|---|
token | string | Yes | Your widget token |
rating | string | No* | hot, senseless, or cold |
note | string | No* | Feedback message (max 2000 chars) |
pageUrl | string | No | Page URL where feedback was given |
hostname | string | No | Website hostname |
* At least one of rating or note is required
Troubleshooting
Widget not appearing
- Check the script tag is properly added to your HTML
- Verify the data-token attribute is correct
- Check browser console for JavaScript errors
- Ensure no z-index conflicts with other elements
Feedback not being sent
- Verify your widget token matches your dashboard
- Ensure Telegram verification is complete (send /start, register Chat ID, verify code)
- Check if you've reached your plan's feedback limit
- Check browser network tab for API errors
Not receiving Telegram messages
- Complete registration: /start → Chat ID → verify 6-digit code
- Check "Notify Telegram" is enabled in dashboard settings
- Confirm your Chat ID is correct in your dashboard
- Feedback is still saved in dashboard even if Telegram delivery fails