Find it on GitHub: /edgee-cloud/sendgrid-component

A WebAssembly component that provides a simple way to send emails via SendGrid directly from the edge. This component can be mapped to a specific endpoint (like /contact) and supports both static text and dynamic email templates.

​
Features

  • SendGrid Integration: Direct integration with SendGrid’s email API
  • Template Support: Use SendGrid’s dynamic email templates
  • Configurable Endpoint: Set custom paths for your email sending endpoint
  • Edge Performance: Fast email processing directly at the edge
  • Static and Dynamic Content: Support for both static text and templated emails
  • WebAssembly Performance: Secure, fast execution in a sandboxed environment

​
Getting Started

To integrate SendGrid with your project:

  1. Create a SendGrid account and generate an API key
  2. Verify your sender email address in SendGrid
  3. Open the Edgee console and navigate to your project’s Components
  4. Select “Add a component” and choose edgee/sendgrid from the list of available edge functions
  5. Configure the following settings:
    • API Key: Your SendGrid API key
    • From Email: Your verified sender email address
    • Subject: Default email subject line (optional)
    • Template ID: SendGrid template ID for dynamic emails (optional)
    • Path Configuration: Set the email sending endpoint path (e.g., /contact)
  6. Click Save to activate the email sending endpoint

​
Usage

Once configured, you can send emails by making POST requests to your configured endpoint:

// Send static text email
await fetch('/contact', {
  method: 'POST',
  body: JSON.stringify({
    "message": "Hello world!",
    "email": "test@example.com"
  })
});

// Send dynamic template email
await fetch('/contact', {
  method: 'POST',
  body: JSON.stringify({
    "data": {"name": "John Doe"},
    "email": "test@example.com"
  })
});

​
Request Formats

​
Static Text Email

{
  "message": "Your email message content",
  "email": "recipient@example.com"
}

​
Dynamic Template Email

{
  "data": {"name": "Dynamic template variable"},
  "email": "recipient@example.com"
}

​
Template Support

If you configure a template_id, the component will use SendGrid’s dynamic template system with the provided data in the data field.

​
Use Cases

  1. Contact Forms: Process contact form submissions
  2. Transactional Emails: Order confirmations and notifications
  3. User Onboarding: Welcome emails and account setup
  4. Support Tickets: Automated support email responses
  5. Marketing Communications: Newsletter and promotional emails
  6. System Notifications: Alert emails for system events

​
Example Integrations

​
Order Confirmation Email

fetch('/order/confirm', {
  method: 'POST',
  body: JSON.stringify({
    customer_name: 'John Doe',
    order_number: 'ORD-001',
    order_total: '$99.99',
    items: [
      {name: 'Product A', quantity: 1, price: '$99.99'}
    ],
    shipping_address: '123 Main St, City, State 12345'
  }),
})
.then(response => response.json())
.then(data => {
  console.log('Email sent:', data);
});

​
Welcome Email

fetch('/welcome/email', {
  method: 'POST',
  body: JSON.stringify({
    email: 'user@example.com',
    data: {
      name: 'John',
    }
  })
});

​
Error Handling

The edge function provides comprehensive error handling:

  • 400 Bad Request: Invalid request format or missing required fields
  • 401 Unauthorized: Invalid API key or authentication failure
  • 403 Forbidden: Insufficient permissions or suspended account
  • 413 Payload Too Large: Email content or attachments too large
  • 429 Too Many Requests: Rate limit exceeded
  • 500 Internal Server Error: SendGrid API error