Email notifications on portal actions

Implementing Email Notifications on Portal Actions allows users to be notified of important activities within a web portal, such as updates, approvals, new submissions, or changes in status. These notifications can enhance user experience and provide timely information about specific portal actions.

Step 1: Define the Requirements

Before diving into implementation, identify the key elements of your email notification system:

1. User Actions Triggering Notifications: Determine the actions within the portal that will trigger email notifications. These could include:
   • User registration or profile updates
   • Form submissions
   • Content approval or rejection
   • Change in status (e.g., order status change, task completion)
   • Password reset requests
   • Comments or interactions on posts
2. Email Content: Define the structure and content of the email that will be sent. Ensure it includes relevant details and instructions for the recipient.
3. Notification Frequency: Decide if the notifications should be sent in real-time or in batches (e.g., daily or weekly summaries).
4. User Preferences: Allow users to customize their email preferences (opt-in or opt-out of certain notifications).

Step 2: Database/Storage Setup

To track the actions and related data for email notifications, ensure that the database stores relevant information for each portal action.

Example Data Structure (Database or SharePoint List):

Notification ID	User ID	Action Type	Action Date	Email Sent Status
1	101	Form Submission	2025-04-23 10:00:00	Pending
2	102	Profile Update	2025-04-23 10:05:00	Sent
3	103	Task Completed	2025-04-23 10:10:00	Pending

This table can be used to track the action types, users, and the status of email notifications.

Step 3: Triggering Email Notifications

Determine where the trigger for sending an email notification will occur. It could be an action from a portal form, API call, or back-end event (like a status change). For example, when a user submits a form, an API call will trigger to send an email notification.

Example Trigger (Form Submission):

When a form is submitted, a back-end function could be invoked to send an email notification to the relevant recipient (administrator, user, etc.).

// Example JavaScript function to send email upon form submission
function sendEmailNotification(userEmail, actionType, details) {
  const emailContent = `
    <h3>${actionType} Notification</h3>
    <p>Dear User,</p>
    <p>Your recent action of type <strong>${actionType}</strong> has been processed.</p>
    <p><strong>Details:</strong> ${details}</p>
    <p>Thank you for using our portal.</p>
  `;
  
  const emailSubject = `${actionType} Notification`;
  
  // Assuming you use an email service like SendGrid or SMTP for sending emails
  sendEmailViaService(userEmail, emailSubject, emailContent);
}

// Call the sendEmailNotification function after form submission
document.getElementById("form-submit-button").addEventListener("click", function() {
  const userEmail = getUserEmail();  // Fetch user email
  const actionType = "Form Submission";  // Example action
  const details = "Your form has been successfully submitted and is under review.";
  sendEmailNotification(userEmail, actionType, details);
});

In this example, once a form is submitted, the sendEmailNotification function is called, and it sends an email based on the action type and relevant details.

Step 4: Email Sending Service

To send emails, you’ll need an email sending service. There are several options, such as:

• SMTP Server: Set up your own email server (e.g., using PHP mail or similar).
• Email API Providers: Use an external service like:
  • SendGrid
  • Mailgun
  • Amazon SES
  • SMTP2GO

These services provide easy-to-use APIs for sending email notifications and often include features like email tracking, templates, and spam protection.

Example Using SendGrid (Node.js):

const sgMail = require('@sendgrid/mail');

sgMail.setApiKey('YOUR_SENDGRID_API_KEY');

const sendEmailViaService = (recipientEmail, subject, content) => {
  const msg = {
    to: recipientEmail,
    from: 'your-email@domain.com',
    subject: subject,
    html: content,
  };

  sgMail
    .send(msg)
    .then(() => {
      console.log('Email sent successfully');
    })
    .catch((error) => {
      console.error(error);
    });
};

Step 5: Email Template Design

Design a clean and professional email template that will be used for notifications. The template should include:

1. Header: A clear subject line that indicates the action.
2. Body: A message with details about the action.
3. Footer: Contact information or a link to the portal for more actions.

Example HTML Email Template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Notification</title>
</head>
<body>
  <table style="width: 100%; max-width: 600px; margin: 0 auto; background-color: #f9f9f9; padding: 20px; border-radius: 8px;">
    <tr>
      <td style="background-color: #0073e6; color: white; padding: 10px; text-align: center; border-radius: 8px 8px 0 0;">
        <h1>${subject}</h1>
      </td>
    </tr>
    <tr>
      <td style="padding: 20px; font-size: 16px; line-height: 1.6;">
        <p>Dear User,</p>
        <p>Your recent action of type <strong>${actionType}</strong> has been processed.</p>
        <p><strong>Details:</strong> ${details}</p>
        <p>Thank you for your engagement with our portal.</p>
      </td>
    </tr>
    <tr>
      <td style="text-align: center; padding: 10px; background-color: #0073e6; color: white; border-radius: 0 0 8px 8px;">
        <p>For more information, visit <a href="https://your-portal-url.com" style="color: white;">our portal</a>.</p>
      </td>
    </tr>
  </table>
</body>
</html>

Step 6: Handling User Preferences

Allow users to customize their email notification preferences, such as enabling or disabling specific notifications.

• Settings Page: Provide an interface where users can select the types of notifications they want to receive.
• Email Preference Table: Track user preferences in a database.

Example Preference Table:

User ID	Notification Type	Email Enabled
101	Form Submission	True
102	Profile Update	False
103	Task Completed	True

Step 7: Testing and Monitoring

Ensure that the system works as expected by testing various actions that trigger emails:

• Test Different Action Types: Submit forms, complete tasks, update profiles, etc.
• Monitor Email Deliverability: Track open rates, click rates, and any issues like undelivered emails.
• Handle Errors: Implement error handling in case the email service fails.