I have a Rails webapp deployed in an Amazon EC2 instances that is using email templates in html with a header and logo and SES Amazon email service to send notification emails.
The emails are sent and correctly and they are displayed perfectly in all mail clientes (i.e. gmail, hotmail) even my mobile phone but in the Mac mail, where the logo is not displayed correctly.
Please, see a screenshot attached.
UPDATE:
I´m testing with Chrome and a Gmail account. If I open exactly same email in both (Mac mail and Chrome) I can see it right in Chrome, however, I see it wrong in Mail. I have checked the logo size is not been respected from CSS in Mail.
Please, see an screenshot from Gmail in Chrome. I see it right on mobiles too.
I attach the Rails code to generate the email:
In email_service.rb:
# booking request admin
def send_booking_request_admin_notification(customer, provider, boat, booking)
#customer = customer
#provider = provider
#boat = boat
#booking = booking
attachments.inline['logo.png'] = File.open("#{Rails.root.to_s + '/app/assets/images/logo.png'}", "rb") {|io| io.read}
mail(from: APP_CONFIG['YANPY_EMAIL_FROM'], to: APP_CONFIG['YANPY_EMAIL_FROM'], subject: t('booking_request_Yanpy_subject', user_email: customer.email , owner_email: provider.email, booking_code: booking.code))
end
In send_booking_request_admin_notification.erb:
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
<link rel="stylesheet" type="text/css" href="https://s3-eu-west-1.amazonaws.com/yanpy.dev/css/emails.css">
</head>
<body>
<div id="nav-bar">
<%= image_tag attachments['logo.png'].url, alt: 'Yanpy', size: '87x30', :class => "logo" %>
</div>
<div id="mail-content">
<h4><%= t('admin_hello') %></h4>
<p><%= t('booking_request_Yanpy_content_1', user_email: #customer.email, boat_name: #boat.name , owner_email: #provider.email, booking_code: #booking.code) %></p>
<p><%= t('admin_goodbye_1') %></p>
<p><%= t('admin_goodbye_2') %></p>
</div>
</body>
</html>
I have tried to reproduce the issue by resizing the browser Chrome windows in height and width but I couldn´t.
UPDATE 2:
I attach the relevent HTML code from Gmail in Chrome (working):
<div style="background:#f8f8f8;margin:0px;padding:0px" bgcolor="#f8f8f8">
<div style="background:#1b1b1b linear-gradient(to bottom,#222,#111);border:#252525;min-height:50px;width:100%">
<img alt="Yanpy" height="30" src="?ui=2&ik=836c81b94f&view=fimg&th=149e8a5ae9582fb1&attid=0.1&disp=emb&attbid=ANGjdJ8q_xSPAswkC2fDqsoAHPR0qKIUHUDjW45HorJli1u9zmcocdWFYXYi2rysx9cYcvsx7KJScrWLqDHBAOP-5W5g7LynDaj0cnMtQyS_P7D3A8ihhvpRKBLttmw&sz=w174-h60&ats=1416947426145&rm=149e8a5ae9582fb1&zw&atsh=1" width="87" style="margin-left:20px;margin-top:10px" class="CToWUd">
</div>
Now, from Mac Mail not working (note: I´m not sure if this is the real code, I don´t know how to get it from Mail. I just forwarded the email to a Hotmail account and got it from there):
<div style="background-color:rgb(248, 248, 248);padding:0px;font-family:Helvetica;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;"><div style="background-color:rgb(27, 27, 27);border:rgb(37, 37, 37);height:50px;width:727px;background-position:initial initial;">
<img id="ecx52214002-0011-49E6-B577-6C08A8DA9C9E" height="121" width="352" src="https://dub126.afx.ms/att/GetInline.aspx?messageid=5293f1b7-74df-11e4-9417-00237de45652&attindex=0&cp=-1&attdepth=0&imgsrc=cid%3a32FDE1B1-DA1A-4A66-B63C-BBB067B5AB81%40Home&cid=ed5bb1624ed90a36&shared=1&hm__login=roberto.chingon&hm__domain=hotmail.com&ip=10.148.132.8&d=d3103&mf=0&hm__ts=Wed%2c%2026%20Nov%202014%2008%3a11%3a10%20GMT&st=roberto.chingon&hm__ha=01_745f8f086a98f87d549a0721ddd5738b4bfecce8795f549762672eea9f5cf5ba&oneredir=1"></div><div style="padding:20px;"><h4>Hola Admin,</h4><p>El usuario prueba se ha registrado con el email<span class="ecxApple-converted-space"> </span>propietario.yanpy3#gmail.com<span class="ecxApple-converted-space"> </span>correctamente.</p><p>Un saludo,</p><p>El equipo de Yanpy.</p></div></div>
Apple Mail uses WebKit rendering engine similar to Outlook for Mac, you should try to test it with WebKit browsers like Chrome and Safari.
I fixed it. Working with emails you have to develop like an old school HTML, I mean, you cannot link to external CSS files. Instead, you should add your css properties directly in the HTML template. Even better if it´s inline css in the style attribute of the tags.
Related
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 this 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
And that is good, that is what I want.
But when user receieves it in production it looks something like this
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.
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
So I had (most) of the following setup working on a Twilio test number last week. I was running from localhost:300 using ngrok to receive the POST from twilio. Everything worked great: didn't need blank-response.xml.erb, just rendered :nothing => true and the message came in and was handled by the controller - simple.
Today I am trying to deploy the app on heroku (and am switching credentials to a paid account) and keep recieving the following error in the Twilio console:
12200 Schema validation warning
Cvc-elt.1: Cannot find the declaration of element 'html'.
I have tried rendering the xml response a half dozen different ways with the most textbook version outlined below. My problem is the response never changes (from what's also listed below). I don't know if I'm missing something stupid or if Heroku hates Twilio or what and I'm at a loss as to what to do at this point. Any help is welcome!
Code samples
url (Twilio webhook):
http://www.mycoolurl.com/confirmation
routes.rb:
post 'confirmation' => 'appointments#confirm'
appointments_controller:
def confirm
incoming_message_body = params["Body"]
from_number = params["From"]
if incoming_message_body.downcase.match("yes")
puts "CONFIRMED for #{from_number}"
elsif incoming_message_body.downcase.match("no")
puts "CANCELED for #{from_number}"
end
render 'blank-response.xml.erb', :content_type => 'text/xml'
end
blank-response.xml.erb
<?xml version="1.0" encoding="UTF-8"?>
<Response></Response>
Response from my Rails App:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Cool Website</title>
<META name="description" content="some stupid blurb about this site">
<META name="keywords" content="a bunch of cool keywords">
</head>
<frameset rows="100%,*" border="0">
<frame src="https://cool-name-24253.herokuapp.com/confirmation" frameborder="0" />
<frame frameborder="0" noresize />
</frameset>
<!-- pageok -->
<!-- 06 -->
<!-- -->
</html>
I've created a mailer in my Rails 4 application, which works perfectly well when there are no attachments to the emails. However, when I add a pdf attachment to the emails, I get the following error when I try to preview the email at .../rails/mailers/donor_mailer/thankyou_mail_preview
NoMethodError in Rails::Mailers#preview
Showing /usr/local/rvm/gems/ruby-2.1.5#rails4/gems/railties-4.1.6/lib/rails/templates/rails/mailers/email.html.erb where line #95 raised:
<iframe seamless name="messageBody" src="?part=<%= Rack::Utils.escape(#part.mime_type) %>"></iframe>
However, I don't get this error, or any issues at all actually, when sending the emails themselves, only with the preview. Has any one else experienced this, and know how to fix this / knows the direction I should be heading in. Could this cause any further issues down the line with my emails, or is it just a problem with the preview feature?
My Mailer is as follows:
class DonorMailer < ActionMailer::Base
default from: "user#gmail.com"
def thankyou_email(computer)
#computer = computer
#donor = computer.donor
attachments["some.pdf"] = File.read("path/to/pdf/some.pdf")
mail(to: #donor.donor_email, subject: "Thank you")
end
end
and template is:
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<p>Email content here</p>
</body>
</html>
I tried adding :pdf to my MIME types to no avail.
Thank you
I'm building an integration/feature test where an invite email is generated, and in the rspec test I want to be able to grab the link then follow it for downstream testing.
Here is how I grab the email:
last_delivery = ActionMailer::Base.deliveries.last
and the body appears as follows:
puts last_delivery.body
----==_mimepart_54cc1b76a8d12_d673ffe1c74c22869b6
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit
<html>
<body>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
</head>
<body>
<h1>You have a pending invite!</h1>
<p>To join, please follow the link below and login or signup.</p>
Your Invite
</body>
</html>
</body>
</html>
----==_mimepart_54cc1b76a8d12_d673ffe1c74c22869b6--
The id of the Invite will probably change between test runs, so is it possible and how can I extract the link to use to follow?
You could try using Nokogiri to parse the url from the link:
doc = Nokogiri::HTML.parse(last_delivery.body)
url = doc.css("a").map { |link| link[:href] }.first
Rather than this approach, why not just have a feature that sends the invite and another that simulates the user signing up via an invite link?
feature "User sends invite" do
scenario "to a valid email address" do
# ...
expect(page).to have_content "Your invite was sent to user#example.com"
end
end
feature "Invitee signs up" do
scenario "by accessing an invite link" do
invite = Invite.create
visit invite_path(invite)
# ...
end
end
I've only found solutions that work in Rails 3, so far. How can I force emails sent with ActionMailer to be formatted as HTML, rather than plaintext?
/app/models/franklin.rb (the mailer)
class Franklin < ActionMailer::Base
def activation(user)
recipients user.email
from "activation#rit.oncampusapp.net"
content_type = "text/html"
subject "OnCampus # RIT Registration"
body :user => user
end
end
/app/views/franklin/activation.html.erb
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<body>
Hi <%= #user.full_name %>,
This is your activation email for OnCampus # RIT. All you have to do is click the link below, and you'll be able to log in.
<%= link_to "Activate My Account!", "http://rit.oncampusapp.net/admin/activate?key=#{#user.activation_key}"%>
We hope to see you soon! :D
-- The OnCampus Team
</body>
</html>
Have you tried setting in the activation action content_type "text/html" instead of content_type = "text/html"
Just paste this in your notifier/mailer model method - this will solve your problem
content_type "text/html"