Building Rich Notifications: Beyond Plain Text Messages

Traditional SMS is limited to 160 characters of plain text. But modern users expect rich, interactive experiences even in their notifications. In this guide, we'll explore how to create engaging messages that go far beyond what SMS can offer.

The Limitations of SMS

SMS was designed in the 1980s for a world of simple text messages. Today's constraints include:

Rich Message Types in Inbox

Inbox supports several rich message types that transform user engagement:

1. Interactive Buttons

Add action buttons that users can tap directly from the notification:

{
  "to": "+15551234567",
  "type": "custom",
  "body": {
    "title": "Order Confirmation",
    "content": "Your order #A-123 has been confirmed and will be delivered tomorrow.",
    "actions": [
      {
        "label": "Track Order",
        "url": "https://mystore.com/track/A-123",
        "type": "url"
      },
      {
        "label": "Change Address",
        "action": "change_address",
        "type": "callback"
      }
    ]
  }
}

2. Media Attachments

Include images to make messages more engaging:

{
  "to": "+15551234567",
  "type": "custom",
  "body": {
    "title": "Your food is ready!",
    "content": "Your delicious burger and fries are ready for pickup.",
    "media": {
      "type": "image",
      "url": "https://restaurant.com/images/order-ready.jpg",
      "alt": "Burger and fries on a tray"
    },
    "actions": [
      {
        "label": "I'm on my way",
        "action": "confirm_pickup",
        "type": "callback"
      }
    ]
  }
}

3. Structured Content

Create organized, scannable content with proper formatting:

{
  "to": "+15551234567",
  "type": "transaction",
  "body": {
    "transaction_id": "pay_1234567890",
    "type": "payment",
    "amount": 24.99,
    "currency": "USD",
    "status": "completed",
    "merchant": "Coffee Corner",
    "description": "2x Latte, 1x Croissant",
    "timestamp": "2025-01-15T08:30:00Z",
    "receipt_url": "https://coffee-corner.com/receipt/pay_1234567890"
  }
}

Design Principles for Rich Messages

1. Hierarchy and Scanning

Users scan messages quickly. Use clear hierarchy:

Title: Most important information first
Content: Supporting details
Actions: Clear next steps

2. Progressive Disclosure

Don't overwhelm users with information:

{
  "title": "Package Delivered",
  "content": "Your Amazon order has been delivered to your front door.",
  "actions": [
    {
      "label": "View Details",
      "url": "https://amazon.com/order/details",
      "type": "url"
    }
  ]
}

3. Actionable Content

Every message should have a clear purpose:

Informational: "Your flight is delayed by 30 minutes"
Actionable: "Confirm your appointment" + [Confirm] [Reschedule]
Transactional: "Payment received" + [View Receipt]

Message Templates

E-commerce Order Updates

{
  "to": "+15551234567",
  "type": "delivery",
  "body": {
    "order_id": "ORD-2024-001",
    "status": "shipped",
    "tracking_number": "1Z999AA1234567890",
    "tracking_url": "https://fedex.com/track/1Z999AA1234567890",
    "carrier": "FedEx",
    "estimated_delivery": "2025-01-16T18:00:00Z",
    "items": [
      {
        "name": "Wireless Headphones",
        "quantity": 1,
        "image": "https://store.com/images/headphones.jpg"
      }
    ]
  }
}

Appointment Reminders

{
  "to": "+15551234567",
  "type": "event",
  "body": {
    "title": "Dentist Appointment Tomorrow",
    "start_time": "2025-01-16T10:00:00Z",
    "end_time": "2025-01-16T11:00:00Z",
    "location": "Smile Dental, 456 Oak Ave",
    "description": "Regular cleaning and checkup",
    "reminder_minutes": 60,
    "organizer": "Dr. Johnson",
    "actions": [
      {
        "label": "Confirm",
        "action": "confirm_appointment",
        "type": "callback"
      },
      {
        "label": "Reschedule",
        "url": "https://smiledental.com/reschedule",
        "type": "url"
      }
    ]
  }
}

Financial Notifications

{
  "to": "+15551234567",
  "type": "transaction",
  "body": {
    "transaction_id": "txn_low_balance_alert",
    "type": "alert",
    "amount": 25.00,
    "currency": "USD",
    "status": "warning",
    "description": "Low balance alert",
    "timestamp": "2025-01-15T14:30:00Z",
    "balance": 25.00,
    "actions": [
      {
        "label": "Add Funds",
        "url": "https://mybank.com/add-funds",
        "type": "url"
      },
      {
        "label": "View Account",
        "url": "https://mybank.com/account",
        "type": "url"
      }
    ]
  }
}

Best Practices

1. Keep It Concise

Even with rich formatting, respect users' time:

Title: 50 characters or less
Content: 2-3 sentences maximum
Actions: 2-3 buttons maximum

2. Use Appropriate Message Types

Choose the right message type for your content:

OTP: Authentication codes
Delivery: Order and shipping updates
Transaction: Financial notifications
Event: Calendar and appointment reminders
Custom: Everything else

3. Test Across Devices

Rich messages render differently on various devices:

iOS: Native notification styling
Android: Material Design components
Different screen sizes: Ensure readability

4. Provide Fallbacks

Always include essential information in the main content:

{
  "title": "Flight Delayed",
  "content": "Flight AA123 to NYC delayed 45 minutes. New departure: 3:45 PM.",
  "actions": [
    {
      "label": "View Details",
      "url": "https://airline.com/flight/AA123"
    }
  ]
}

Measuring Engagement

Track how users interact with your rich messages:

Key Metrics

Open rate: How many users view the message
Click-through rate: How many tap action buttons
Conversion rate: How many complete desired actions
Time to action: How quickly users respond

A/B Testing

Test different message formats:

// Version A: Simple text
{
  "title": "Order shipped",
  "content": "Your order will arrive tomorrow."
}

// Version B: Rich with actions
{
  "title": "Order shipped",
  "content": "Your order will arrive tomorrow between 2-6 PM.",
  "actions": [
    {"label": "Track Package", "url": "..."},
    {"label": "Change Delivery", "url": "..."}
  ]
}

Implementation Tips

1. Start Simple

Begin with basic rich messages and gradually add complexity:

1. **Week 1**: Add titles and better content structure
2. **Week 2**: Include action buttons
3. **Week 3**: Add images and media
4. **Week 4**: Implement custom message types

2. Use Templates

Create reusable templates for common scenarios:

const templates = {
  orderShipped: (orderData) => ({
    type: 'delivery',
    body: {
      order_id: orderData.id,
      status: 'shipped',
      tracking_number: orderData.tracking,
      estimated_delivery: orderData.eta
    }
  }),

  appointmentReminder: (appointment) => ({
    type: 'event',
    body: {
      title: appointment.title,
      start_time: appointment.start,
      location: appointment.location,
      reminder_minutes: 60
    }
  })
};

3. Handle Callbacks

Process action button callbacks in your webhook handler:

app.post('/webhooks/inbox', (req, res) => {
  const event = req.body;

  if (event.type === 'message.action') {
    const { action, message_id, to } = event.data;

    switch (action) {
      case 'confirm_appointment':
        confirmAppointment(message_id, to);
        break;
      case 'change_address':
        initiateAddressChange(message_id, to);
        break;
    }
  }

  res.status(200).send('OK');
});

Conclusion

Rich notifications transform user engagement by providing:

Better user experience with interactive elements
Higher engagement rates through compelling visuals
Reduced support burden with self-service actions
Improved conversion through clear calls-to-action

Start implementing rich messages today and see the difference in user engagement and satisfaction.

Next Steps

[Explore message schemas](/docs/schemas)
[Set up webhooks for action handling](/docs/webhooks)
[View rich message examples in the dashboard](/dashboard/send)
[Join our developer community](https://discord.gg/inbox)