The CSS of the Sendgrid template is being overlooked

I have utilized Sendgrid to create the template mentioned below:

https://i.sstatic.net/TFQfl.png

In order to send this template using my Node server, I have developed the module provided in the code snippet:

/*
 * Created by root on 6/6/16.
 */
var path = require('path'),
    emailTemplates = require('email-templates'),
    async = require("async"),
    mailConfig = require('../config/email.json'),
    templates = require('../config/emailTemplates.json'),
    _ = require('lodash'),
    sendgrid = require('sendgrid')(mailConfig.sendGridApiKey);
var mymailer = {};
// Function to send an email to one or multiple users
mymailer.sendTemplate = function (template_id, to, from, subject, keyReplacer, text) {
        var email = new sendgrid.Email();
        var templateKey = templates[template_id];
        if (templateKey) {
            email.setSmtpapiTos(to);
            email.subject = subject;
            email.from = from;
            email.text = text;
            email.html = '';
            email.setFilters({
                'templates': {
                    'settings': {
                        'enable': 1,
                        'template_id': templateKey
                    }
                }
            });
            email.smtpapi.header.sub = createSub(keyReplacer);
            sendgrid.send(email);
        }
        else {
            console.log('incorrect key');
        }
};
    
function createSub(keyReplacer) {
        var finalObject = {};
        if (keyReplacer) {
            _.forEach(keyReplacer, function (value, key) {
                var k = ':' + key;
                finalObject[k] = [value];
            })
        }
        return finalObject;
}
    

module.exports = mymailer;

However, when I receive the email, it appears stripped of both CSS and images.

It is displayed like this:

https://i.sstatic.net/MIV4o.png

It seems that some settings are missing. I need help identifying which ones to try.

HTML Template

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" data-dnd="true">
...
  </table>
</body>
</html>

Answer №1

Your code may not work well with email clients because they do not support embedded CSS. It is recommended to use inline styles within tags and utilize tables for layout in email templates.

Here are some tips to help you address this issue:

TIPS

This will not work:

<style media="screen">
    h1{
        color: red;
    }
</style>

<h1>I like turtles</h1>

This will work:

<h1 style="color:red;">I like turtles</h1>

HELPFUL SOURCES

You can refer to the following sources for more information on creating email templates:

  1. Source 1
  2. Source 2

Additionally, there are tools available, such as Zurb's email inliner, that can convert embedded CSS to inline CSS to overcome this challenge.

I hope these suggestions will assist you in resolving your issue. Best of luck! :)

Answer №2

Encountered an issue, resolved it successfully by making the following adjustment:

 Content content = new Content("text/plain", notification.getContent());

Changed to:

  Content content = new Content("text/html", notification.getContent());

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the power of font awesome icons as background images within React applications

I am facing an issue with my dropdown menu. I have styled the caret using CSS background-image property, but now I would like to use a Font Awesome icon instead. I attempted to implement two different styles for the background image with no success. The d ...

The images were uploaded, but unfortunately they are not adapting to different screen sizes

I recently created a website that is optimized for tablet screens and included images. However, I noticed an unwanted gap between the first column and third column that needs to be fixed. My plan is to adjust the layout using Bootstrap code or another meth ...

Exploring cross-browser compatibility with the use of CSS3 and JavaScript

Starting a new project to create a fresh website. It seems like many people are leaning towards CSS3 and AJAX, neglecting browsers without JavaScript support. They resort to workarounds like enabling CSS3 through JavaScript in older browsers. Is this the ...

What is the best method for accommodating various web devices effectively?

Those deciding to close this as not conducive, please read through the entire post. Specific questions will be posed at the end. Seeking practical examples and strategies. Situation As more and more people use devices like smart-phones and tablets to acce ...

Grid item overlay

Currently, I am facing an issue with React where I am attempting to place an overlay on top of each grid item in a grid. Despite trying multiple approaches, the overlay appears beneath each grid item instead of over it. Even setting the position: absolute ...

Creating a Background Cutout Effect with CSS Using Elements instead of Images

I'm working on creating a unique visual effect that simulates a "window" where the div placed above all other elements acts like a window, allowing the background color to show through. Take a look at this example for reference. My goal is to make th ...

Can Highchart dynamically adjust color choices based on the quantity of data points available?

I am trying to figure out how to import a specific color palette into my column graph. I want to use different color palettes based on the number of data points in my graph - for 3 or fewer points, I want to use the top row colors, for 4 points I want to u ...

The button can only be edited using Internet Explorer

My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also b ...

Challenges in customizing the bootstrap navigation bar links

Having an issue with the bootstrap navbar link displaying on small devices. Here is the template I'm using: https://i.sstatic.net/jSy1b.png The last item is displaying in two lines. ...

Creating an inner shadow effect for geometric shapes with text inside - a step-by-step guide!

Is it possible to apply an inner shadow to geometric shapes with text inside using CSS? This is the effect I want to achieve: https://i.stack.imgur.com/XcGS2.png I followed the code provided in this thread: Required pentagon shape with right direction ...

Experiencing a problem with JQuery Offset when a fixed position is applied to a

My website has a page layout and style similar to the example provided in this JsFiddle. When I use JQuery to click on a button, the content is displayed correctly as shown below: However, if I scroll down the page first and then click the button, the co ...

Safari's CSS Hacking Problem

After testing the code below, it appears to be working on both Safari and Chrome. I am seeking a hack specifically for Safari, not Chrome .contactDiv img:not(:root:root) { margin-top:-75px; } @media screen and (-webkit-min-device-pixel-ratio:0) { ...

Transition CSS applied only to links containing images

I am trying to figure out how to apply a transition effect only on links that have images, rather than text. Specifically, I want the transition effect to be applied only to the second link in the following example: <a href="#">no image</a> &l ...

Showcasing an item hidden behind text and a dropdown menu

I have made changes to the background image in my Wordpress theme and now I want to display another image on top of the white content area. To achieve this, I used the following code: img style="position: absolute; top:244px; left: 220px;" src="http://ww ...

The setInterval function does not function properly in IE8 when set to 0

I have a function called changeColor that updates the styling of certain elements in my HTML. In order to apply this function, I am using a timer like so: var timer = setInterval(changeColor,0); The issue I am encountering is that setting the time interv ...

The x-axis values in Amchart are transitioning rather than shifting

I'm facing an issue with my x-axis values as I'm using real-time amcharts. The x-axis values change every 3 seconds, but instead of smoothly moving, they abruptly change to the next value. I would like it to slide smoothly like this example: htt ...

Performing PHP MySQL table database insertion utilizing the $_GET approach using Codeigniter-3 and Dropzone-4.1 plugin

Currently working with CodeIgniter 3 and running into an issue with "id_case" showing as undefined index. When I click a link in index.php: <?php echo "<td><a href='/ci_dropzone/?id_case=".$row['id_case']."'>Upload File ...

Configuring static files in Django for hosting a website in production mode

I have been attempting to serve my static files from the same production site in a different way. Here are the steps I took: First, I updated the settings.py file with the following: DEBUG = False ALLOWED_HOSTS = ['12.10.100.11', 'localhos ...

The box inside a MUI TextField input is consistently visible

My form utilizes MUI Form within a Dialog, but I am facing an issue where the TextField always displays with the border of a filled variant instead of the standard look. Additionally, when trying to integrate an Input from the NextUi library, I encountered ...

What steps can I take to stop my html table from expanding beyond its intended size

There are instances where the length of a data piece in one of my table cells causes it to expand and distort the overall layout of the table. Is there a way to avoid this from happening? ...