Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

A pretty HTML template for the competition announcement email #141

Open
AlphaSheep opened this issue Aug 16, 2023 · 6 comments
Open

A pretty HTML template for the competition announcement email #141

AlphaSheep opened this issue Aug 16, 2023 · 6 comments
Assignees
@elfishhenry
Labels
enhancement help wanted

Comments

@AlphaSheep
Copy link
Member

AlphaSheep commented Aug 16, 2023 •
edited
Loading

The current competition announcement emails are sent in a text format and are quite ugly. Let's revamp our competition announcement emails with a new and visually appealing HTML template.

The email template should be clear, minimalist design, and contain all information a person would need - competition name, venue, city, dates, and a registration link.

This update will not only make our announcements stand out but also provide a better user experience for our members. Feel free to share any design ideas or suggestions to make our competition announcement emails more attractive and user-friendly.
@elfishhenry
Copy link
Contributor

Starting to work on this.

@elfishhenry
Copy link
Contributor

elfishhenry commented Aug 12, 2024 •
edited
Loading 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CubingZA Competition Announcement</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }
    .container {
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 5px;
    }
    h1 {
      color: #333;
    }
    p {
      line-height: 1.6;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>New Cubing Competition: {{competitionName}}</h1>
    <p>Hi {{userName}},</p>
    <p>Get ready for the <strong>{{competitionName}}</strong> competition!</p>
    <p><strong>Venue:</strong> {{venue}}<br>
       <strong>City:</strong> {{city}}<br>
       <strong>Dates:</strong> {{startDate}} - {{endDate}} </p> 
    <p>Don't miss out on this exciting event. Register now!</p>
    <a href="{{registrationLink}}" class="button">Register Now</a>
    <p>Regards,<br>
       The CubingZA Team</p>
  </div>
</body>
</html>

image

Will this work and are any improvements needed?

That should output something like this:

@AlphaSheep
Copy link
Member Author

Yes, this is already much better! You could save this template to server/components/notificationEmailer/notification.template.html, and load it into notificationEmailer.js using Node's fs.readFile . You'd then need to do the necessary substitutions manually (using .replace) and set the html property of the object you send (see the Mailgun documentation here).

If you do choose to do this, please work in a branch with this change only, because the email stuff needs extensive manual testing on a staging server that is hooked up to a Mailgun sandbox domain, and it will have to wait until I have some time to do that. I don't want that to hold up any other changes in the mean time.

@elfishhenry
Copy link
Contributor

Alright, I'll see what I can do.

@elfishhenry
Copy link
Contributor

I'll start this tomorrow.

elfishhenry added a commit to elfishhenry/CubingZA-Website that referenced this issue Aug 17, 2024
@elfishhenry
Added html template for A pretty HTML template for the competition an…
bf249cb 
…nouncement email CubingZA#141, with my HTML.
@elfishhenry
Copy link
Contributor

Should've fixed it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@elfishhenry elfishhenry

Labels
enhancement help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@AlphaSheep @elfishhenry