Widget Installation Guide

// webhook-handler.js
const express = require('express');
const axios = require('axios');
const app = express();

// Your Slack Webhook URL (store in environment variable)
const SLACK_WEBHOOK_URL = process.env.SLACK_WEBHOOK_URL;

app.use(express.json());

// Webhook endpoint that Feedbask will call
app.post('/webhooks/feedbask', async (req, res) => {
  try {
    const { event_type, data, program } = req.body;
    
    // Build Slack message based on event type
    let slackMessage;
    
    if (event_type === 'new_bug_report') {
      slackMessage = formatBugReportForSlack(data, program);
    } else if (event_type === 'new_feature_request') {
      slackMessage = formatFeatureRequestForSlack(data, program);
    } else if (event_type === 'test') {
      slackMessage = formatTestMessageForSlack(data);
    }
    
    // Send to Slack
    if (slackMessage) {
      await axios.post(SLACK_WEBHOOK_URL, slackMessage);
    }
    
    // Always respond quickly to Feedbask
    res.status(200).json({ received: true });
  } catch (error) {
    console.error('Webhook processing error:', error);
    // Still return 200 to prevent retries if it's our error
    res.status(200).json({ received: true, error: true });
  }
});

// Format bug report using Slack Block Kit
function formatBugReportForSlack(data, program) {
  const severityEmoji = {
    critical: '🔴',
    high: '🟠',
    medium: '🟡',
    low: '🟢'
  };
  
  return {
    blocks: [
      {
        type: "header",
        text: {
          type: "plain_text",
          text: "🐛 New Bug Report",
          emoji: true
        }
      },
      {
        type: "section",
        fields: [
          {
            type: "mrkdwn",
            text: `*Title:*\n${data.title}`
          },
          {
            type: "mrkdwn",
            text: `*Severity:*\n${severityEmoji[data.severity] || '⚪'} ${data.severity}`
          },
          {
            type: "mrkdwn",
            text: `*Reporter:*\n${data.reporter_name} (${data.reporter_email})`
          },
          {
            type: "mrkdwn",
            text: `*Status:*\n${data.status}`
          }
        ]
      },
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: `*Description:*\n${data.description}`
        }
      },
      // Add context information if available
      ...(data.user_context ? [{
        type: "context",
        elements: [
          {
            type: "mrkdwn",
            text: `📱 ${data.user_context.browser} | 💻 ${data.user_context.os} | 📐 ${data.user_context.screen_size}`
          }
        ]
      }] : []),
      // Add user properties if available
      ...(data.user_properties && Object.keys(data.user_properties).length > 0 ? [{
        type: "section",
        text: {
          type: "mrkdwn",
          text: `*User Properties:*\n${Object.entries(data.user_properties)
            .map(([key, value]) => `• ${key}: ${value}`)
            .join('\n')}`
        }
      }] : []),
      // Add action buttons
      {
        type: "actions",
        elements: [
          ...(data.screenshot_url ? [{
            type: "button",
            text: {
              type: "plain_text",
              text: "View Screenshot",
              emoji: true
            },
            url: data.screenshot_url,
            style: "primary"
          }] : []),
          {
            type: "button",
            text: {
              type: "plain_text",
              text: "View in Feedbask",
              emoji: true
            },
            url: `${program.website_url}/dashboard/bugs/${data.id}`
          }
        ]
      },
      {
        type: "divider"
      },
      {
        type: "context",
        elements: [
          {
            type: "mrkdwn",
            text: `From *${program.name}* | Bug ID: ${data.id}`
          }
        ]
      }
    ]
  };
}

// Format feature request using Slack Block Kit
function formatFeatureRequestForSlack(data, program) {
  const priorityEmoji = {
    critical: '🚨',
    high: '⚡',
    medium: '📌',
    low: '💭'
  };
  
  return {
    blocks: [
      {
        type: "header",
        text: {
          type: "plain_text",
          text: "✨ New Feature Request",
          emoji: true
        }
      },
      {
        type: "section",
        fields: [
          {
            type: "mrkdwn",
            text: `*Title:*\n${data.title}`
          },
          {
            type: "mrkdwn",
            text: `*Priority:*\n${priorityEmoji[data.priority] || '📋'} ${data.priority}`
          },
          {
            type: "mrkdwn",
            text: `*Requester:*\n${data.requester_name} (${data.requester_email})`
          },
          {
            type: "mrkdwn",
            text: `*Upvotes:*\n👍 ${data.upvotes || 0}`
          }
        ]
      },
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: `*Description:*\n${data.description}`
        }
      },
      // Add user properties if available
      ...(data.user_properties && Object.keys(data.user_properties).length > 0 ? [{
        type: "section",
        text: {
          type: "mrkdwn",
          text: `*User Properties:*\n${Object.entries(data.user_properties)
            .map(([key, value]) => `• ${key}: ${value}`)
            .join('\n')}`
        }
      }] : []),
      {
        type: "actions",
        elements: [
          {
            type: "button",
            text: {
              type: "plain_text",
              text: "View in Feedbask",
              emoji: true
            },
            url: `${program.website_url}/dashboard/features/${data.id}`,
            style: "primary"
          }
        ]
      },
      {
        type: "divider"
      },
      {
        type: "context",
        elements: [
          {
            type: "mrkdwn",
            text: `From *${program.name}* | Feature ID: ${data.id}`
          }
        ]
      }
    ]
  };
}

// Format test webhook message
function formatTestMessageForSlack(data) {
  return {
    blocks: [
      {
        type: "section",
        text: {
          type: "mrkdwn",
          text: "✅ *Feedbask Webhook Test*\n\nYour webhook integration is working correctly!"
        }
      },
      {
        type: "context",
        elements: [
          {
            type: "mrkdwn",
            text: `Test message received at ${new Date().toISOString()}`
          }
        ]
      }
    ]
  };
}

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Webhook handler running on port ${PORT}`);
});

# .env file
SLACK_WEBHOOK_URL=https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXX
PORT=3000