Feedback Widget Tools

NPM Package Installation

npm install @trame.sh/widget

// In your application code:
import { TrameWidget } from '@trame.sh/widget';

TrameWidget.init({
  projectId: 'proj_abc123',
  apiKey: 'tk_pub_your_api_key_here',
  theme: 'auto',              // 'light' | 'dark' | 'auto'
  position: 'bottom-right',   // 'bottom-right' | 'bottom-left'
  triggerLabel: 'Feedback',   // Button text
});

CDN Script Tag

<script>
!function(w,d,i,s){function l(){if(!d.getElementById(i)){
  var f=d.getElementsByTagName(s)[0],e=d.createElement(s);
  e.type="text/javascript";e.async=true;e.id=i;
  e.src="https://widget.trame.dev/v1/trame-widget.js";
  f.parentNode.insertBefore(e,f)}}if("function"!=typeof w.Trame){
  var c=function(){c.q.push(arguments)};c.q=[];w.Trame=c;
  "complete"===d.readyState?l():w.addEventListener("load",l,false)
}}(window,document,"trame-widget-js","script");

Trame('init', {
  projectId: 'proj_abc123',
  apiKey: 'tk_pub_your_api_key_here',
});
</script>

Initial Setup

Set up feedback collection for a new project:

You: "Create a feedback API key for my Task Manager project labeled Production"

Your AI assistant (internally calls create_api_key):
✓ API Key created: tk_pub_a1b2c3d4e5f6g7h8...
⚠️  Save this key now - it won't be shown again!

You: "Great, now show me how to integrate it"

Your AI assistant: Here's how to add the widget to your application:
[Shows NPM or CDN integration code with your API key]

Reviewing Feedback

Regularly review and process user feedback:

You: "Show me recent feedback for the Task Manager project"

Your AI assistant (internally calls list_feedback):
✓ 5 new feedback items:
1. Dashboard loads slowly (Jane Doe)
2. Export to CSV feature request (John Smith)
3. Mobile menu bug (Anonymous)
...

You: "The dashboard performance issue looks important. 
     Let me create a feature for that, then archive this feedback"

Your AI assistant: I'll help you create a feature and archive the feedback.
[Creates feature, then archives feedback items]

Key Rotation

Rotate API keys for security best practices:

You: "List API keys for my Task Manager project"

Your AI assistant (internally calls list_api_keys):
✓ 2 API keys found:
1. tk_pub_old... (Production) - Active since 2024-01-01
2. tk_pub_staging... (Staging) - Active

You: "Create a new production key, I want to rotate the old one"

Your AI assistant (internally calls create_api_key):
✓ New key created: tk_pub_new...

You: "Now revoke the old production key"

Your AI assistant (internally calls revoke_api_key):
✓ Old production key revoked successfully!

Extracting Actionable Features

Use agentic CLI to analyze feedback and extract feature requests:

You: "Review all feedback for my project and identify common themes"

Your AI assistant (internally calls list_feedback):
[Analyzes feedback submissions]

I found 3 common themes:
1. Performance (5 mentions) - Dashboard and report loading
2. Export Features (3 mentions) - CSV, PDF export requests
3. Mobile UI Issues (2 mentions) - Menu and responsive layout

You: "Create features for the top 2 themes"

Your AI assistant: I'll create features for performance improvements and export functionality.
[Creates features, links related feedback IDs in spec_content]

API Key Management

• Use descriptive labels for keys (Production, Staging, Development)
• Create separate keys for different environments
• Rotate keys regularly (quarterly or after team changes)
• Revoke keys immediately if compromised
• Store keys securely (environment variables, secret managers)

Feedback Processing

• Review feedback regularly (daily or weekly)
• Archive feedback after extracting actionable items
• Use natural language to ask your AI assistant to identify patterns
• Link feedback IDs to features/plans for traceability
• Keep active feedback list focused by archiving processed items

Widget Integration

• Test the widget in staging before production deployment
• Use theme: 'auto' to match user's system preferences
• Customize trigger label to fit your application's language
• Consider providing user context (name, email) when available
• Monitor submission rates and adjust widget placement if needed

Agentic Workflow

• Ask your AI assistant to analyze feedback for common themes
• Use natural language to filter and search feedback
• Create features directly from feedback insights
• Archive feedback in batches after processing
• Review archived feedback periodically for missed patterns