How to send a table in a sendGrid email

Ask the community
,
1

I need to create a table of information (price, name, and sku) using sendGrid. The data is from my wix database. I already created the email letter, and have built the table using strings with “\t” tabs and line feeds to control the rows and columns. But since sendGrid uses a variable width font, and I do not klnow how I can change the font for the table in sendGrid (sendGrid told me I cannot change it which makes no sense to me), it does not snap to columns and so looks amateurish in the resultant email.

Bottom line is I need to add the table of data as an attachment, or as part of the email, and have it look good. Does anyone have any thoughts on how to do accomplish this? Or how to create a table in a file which I can use as an attachment? I use sendGrid now, but would entertain another email API company if not possible in sendGrid.

By the way I have tried to get support from sendGrid, but they told me don’t know anything about velo and so do not explicitly support it.

2

Sendgrid lets you create an HTML template.
On Wix side create the table html string and send it to send grid as variable.
To style it, use css on sendgrid template where you may be able to use font-family property or use inline style in the string you create on Wix side (but either way I think that whether or not it’ll be displayed depends on the recipient email service).
Alternatively you can create a pdf file on Wix side and attach it to the mail (you can try using an NPM such as pdfkit).

3

Thanks for your suggestions. I have never written HTML or CSS so don’t how to use templates. Currently I am creating the “body” in velo and supplying it to sendGrid email. Is there a way in velo to convert the Wix table I have already built and display on my web page into HTML/CSS code I can include in the “body”?

Thanks for the pdf file idea. I was not aware this was possible and will certainly look into pdfkit.

4

The pdfTable looked interesting, but have no idea how to implement it. I tried the sandbox in npm to test it out but every example I copy/paste’d failed for one reason or another. Seems like a huge learning curve.

5

J.D., do you have an example of creating HTML? And then sending in SendGrid? Thanks.

6

@jimyaccino In sendgrid tamplates, select an html template, then you should write the html for the non-dynamic part and leave space for the dynamic part.
For example, let’s say you want to show a table where the column names are nown but the body rows are dynamic, then on send grid, you create something like:

<html>
    <head>
        <!-- put here css etc.. -->
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Score</th>
                </tr>
            </thead>
            <tbody>
                {{{tableBody}}} <!-- this is the dynamic variable -->
            </tbody>
        </table>
    </body>
</html>

And on your wix site prepare the table contents.
Let’s say you have an array of members you pull from the collection and you wish to display in the table. So first create the html string:

const tableBody = '';
members.forEach(m => {
tableBody += `<tr><th>${m.name}</th><th>${m.email}</th><th>${m.score}</th></tr>`;
});

Then send it to Sengrid.
I use the @sendgrid/mail NPM, but you can install other packages as well.
So in this example I’d pass the parameters to memberTable function as follwing:

//backend/email.jsw 
import sgMail from '@sendgrid/mail';
import { getSecret } from 'wix-secrets-backend';
const getKey = () => getSecret("email-key");//this function gets the API KEY you copied from Sengrid and stored in your website Secret Manager
export async function memberTable(addressee, sendEmail, tableBody) {
    const key = await getKey();
    sgMail.setApiKey(key);
    const msg = {
        to: addressee,//the email address you want to sent to 
        from: sendEmail,
        templateId: ' d-084025b9e5ccdc1ed999dbbd65ff0ad2',//copy the template key from Sendgrid
        dynamic_template_data: {
          tableBody
        },
    };
    return sgMail.send(msg).catch(err => err);
}