Search code examples
ruby-on-railsemailactionmailerrails-api

ActionMailer email preview is not the same as one user receives in production

I am using Rails 6 and ActionMailer to send an email when the user joins. It is also probably very important to mention that I use API only application and I host it on Heroku.

I have an .html.erb view setup and it looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
  <div style="width: 100%;display: flex;flex-direction: column;align-items: center;padding: 15px;background-color: white;font-family: 'Helvetica';color: #2c3e50">
    <h1>Welcome to company!</h1>

    <div style="height: 1px;background-color: dimgrey;width: 50%;margin-top: 10px; margin-bottom: 20px;"></div>

    <h4 style="margin:0">Want to learn more about our platform?</h4>
    <p style="margin-bottom: 30px">Check out <a href="#">this</a> quick video guide.</p>

    <h4 style="margin:0">Join our Discord server</h4>

    <h4 style="margin:0">Follow us on social media</h4>
    <p style="margin-bottom: 30px">Some icons with social media</p>


    <%= link_to "Create Password", @url, style: "color: white;padding:10px;border-radius:10px;margin-bottom:20px" %>
  </div>
</body>
</html>

Now, this code in preview would give this kind of view good email

And that is good, that is what I want.

But when user receieves it in production it looks something like this bad email

Am I using something that I shouldn't? How do I make it look like it looks like in the preview.

Here are some more files that might interest you:

Stuff I added to production.rb regarding the mailer:

  config.action_controller.asset_host = 'https://myapponheroku'
  config.action_mailer.asset_host = config.action_controller.asset_host

  config.action_mailer.perform_caching = false

  config.action_mailer.delivery_method = :smtp
  host = 'myapponheroki'
  config.action_mailer.default_url_options = { host: host }

  # smtp settings here

Do I have to add anything else here to make it work?

My mailer is located in app/views/user_mailer

Please ask if you need any more code snippets or information.

Solution

  • What email client was used for that screenshot? Could just be an email client issue and flex. Maybe to debug, you could change your view to use just a regular table and see if that fixes the formatting.

    Also, I have used these in the past with success. They usually are handled by most major email clients pretty well.

    https://litmus.com/community/templates