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.

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

HTML emails from Talk #2424

Open
lriggle-strib opened this issue Jul 26, 2019 · 7 comments

Comments

@lriggle-strib
Copy link

commented Jul 26, 2019

Description

What is the recommended way for implementing custom email templates that include HTML? We are looking to include branding in the emails Talk generates so they look less like junk mail.

Background Information

I remember briefly touching on the idea of custom email templates during our Talk implementation but I do not remember what the response was. Additionally, I am unsure how HTML within the email text itself would work since text is controlled via translation yaml files.

Example

When I sign up for email notifications, the email I get looks like this:

[ARTICLE TITLE]
[USERNAME] replied to your comment: [COMMENT PERMALINK URL]

You received this notification because you are a commenter on [ORGANIZATION NAME] and you opted in to receive notifications.

Unsubscribe from comment notifications

It is text only and includes a very long URL directly to the comment that might look kind of spammy.

The business people are asking if the following is possible:

  • HTML Email template so that there is consistent branding in all emails sent from Talk
  • HTML email text so that long comment URLs can be buried within link tags and therefore look less spammy
  • Modify the Permalink itself to include the fragment #comments so that the comments display on the article auto-expands and becomes visible.
    • By default we hide the comment interface behind a show/hide link. Including #comments in the URL expands it by default
    • I think this can be accomplished by modifying the existing category plugins, but if there's a recommended way of doing that, it would be handy to know.

@kgardnr kgardnr added the question label Jul 26, 2019

@kgardnr

This comment has been minimized.

Copy link
Member

commented Jul 26, 2019

Hey @lriggle-strib you should be able to find information on this here: https://docs.coralproject.net/talk/integrating/notifications#customizing-notifications

Let us know if that helps!

@lriggle-strib

This comment has been minimized.

Copy link
Author

commented Jul 26, 2019

@kgardnr It says on that doc that email templates are text-based, does that mean Talk doesn't support HTML email template at all?

@lriggle-strib

This comment has been minimized.

Copy link
Author

commented Jul 29, 2019

@kgardnr Ok, strike that previous comment, I see that one of the notification templates being registered has an HTML extension. However what I'm still struggling to understand is how to make the application actually utilize the HTML template, because it appears that all the emails out of our talk application are being sent in plain text. Am I missing something?

@lriggle-strib

This comment has been minimized.

Copy link
Author

commented Jul 31, 2019

@kgardnr Is there something additional that I need to do to ensure that the correct HTML template is used on the email?

@kgardnr

This comment has been minimized.

Copy link
Member

commented Aug 2, 2019

Hey @mkonikov how did you all address this? If you have a moment, would you help explain to @lriggle-strib? Thank you!

@mkonikov

This comment has been minimized.

Copy link
Contributor

commented Aug 5, 2019

@lriggle-strib

You can override the default email templates with your own as noted here: https://github.com/coralproject/talk/blob/master/plugins/talk-plugin-notifications/server/connect.js#L16-L18

So we have a custom plugin that connects our template overrides - something like this:

module.exports = {
  connect: (connectors) => {
    const { services: { Mailer }, graph: { Context } } = connectors;
    ['notification', 'notification-digest'].forEach(name => {
      Mailer.templates.register(
        path.join(__dirname, 'emails', `${name}.html.ejs`),
        name,
        'html'
      );
    });
    Mailer.registerHelpers({ linkify });
  }
};

We then simply have custom notification templates like this:

<p style="/*styles here*/">
  <%= linkify(body, {nl2br: true, format: () => 'View Comment'}) %>
</p>
<p style="/*styles here*/">
  <%= t('talk-plugin-notifications.templates.footer', organizationName) %>
</p>
<p style="/*styles here*/">
  <a style="/*styles here*/"
    href="<%= BASE_URL %>account/unsubscribe-notifications#<%= unsubscribeToken %>"
    target="_blank"><%= t('talk-plugin-notifications.templates.links.unsubscribe') %></a>
</p>

Also notice that we add the helper Linkify, Mailer.registerHelpers({ linkify });. This allows us to change the text of the link in the email from the full URL to the text of our choice, in this case 'View Comment'.

@lriggle-strib

This comment has been minimized.

Copy link
Author

commented Aug 5, 2019

Thank you @mkonikov!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.