Templates build incorrectly render html body

akushyn · March 15, 2023, 1:56pm

Our clients started reply on the invoice email we send them that email incorrectly rendered.
It now look really ugly.

On other side, any normal browser renders it as it has to be.

Attached content of data to render.

I am using POST https://invoicing.co/api/v1/emails endpoint API

    email_data = {
        "entity": "invoice",
        "entity_id": invoice_id,
        "template": ninja_template_name,
        "body": body,
        "subject": subject,
    }

where body is what attached in template.txt file string.

Please advise ASAP.

hillel · March 15, 2023, 2:11pm

Hi,

@david any thoughts?

david · March 15, 2023, 9:40pm

Hi There,

I’ve put a fix in for this, can you advise if this is still an issue for you?

Also just to note, the template renders fine in web clients, however it looks broken when viewing from Outlook 365 client.

akushyn · March 16, 2023, 12:34pm

Hey @david

Unfortunately, fix doesn’t work.
I spend some time and rewritten the code to render and control sending templates using our internal system to avoid confusing rendering errors in the future.

Thanks.

shunpin · April 22, 2023, 10:11am

Is there any fix for this? Currently on v5.5.106-C114.
Not sure since when the emails started to render improperly, but nevertheless they’ve been sending in a broken state ever since.
It’s a bit embarrassing when you have clients. Since I don’t really send invoices to myself, I wasn’t really made aware of this problem.
Anyway, I figured I’d just redesign the email template from scratch and while the Preview pane renders the template properly, as soon as I save the template, it becomes broken again.
Saving the template seems to be adding unwanted things in the code.
Maybe because the template accepts markdown as well as html, so it might interpret some html as markdown or vice-versa?

Here’s my original template that I insert on the Settings pane, in the body section, if you check the preview pane, you’ll see how it renders fine:

<table style="border-collapse:collapse;border-spacing:0;font-size:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" width="450" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr height="50">
            <td align="left">
                <img style="border:none;padding:0;padding-bottom:10px;margin:0;" src="$company.logo" alt="FWS" width="70" border="0">
            </td>
            <td align="right" style="text-transform:uppercase;font-size:32px;color:#f36c34;">invoice</td>
        </tr>
        <tr>
            <td colspan="2">
                <table style="border-collapse:collapse;border-spacing:0;color:rgb(51,51,51);background-color:rgb(250,250,250);border-radius:3px;border-color:#ffffff;border-style:solid;border-top-color:#ffffff;border-bottom-color:#ffffff;" cellspacing="0" cellpadding="0" border="1">
                    <tbody>
                        <tr height="44">
                            <td style="font-family:sans-serif;font-size:12px;padding-left:15px;border-style:solid;border-color:#ffffff;border-left-width:0;border-right-width:0;border-bottom-width:1px;border-top-width:6px;border-top-color:#f36c34;border-top-style:solid;" colspan="2">
                                <span style="color:rgb(102,102,102);font-size:10px;font-weight:600;text-transform:uppercase;">Invoice no.</span>
                                <br>
                                <span style="color:#0073ff;">$invoice.number</span>
                            </td>
                        </tr>
                        <tr height="44">
                            <td style="font-family:sans-serif;font-size:12px;padding-left:15px;border-style:solid;border-color:#ffffff;border-top-width:0px;border-left-width:0;border-right-width:1px;border-bottom-width:1px;" width="225">
                                <span style="color:rgb(102,102,102);font-size:10px;font-weight:600;text-transform:uppercase;">due by</span>
                                <br>
                                <span style="color:#0070c9;">$invoice.due_date</span>
                            </td>
                            <td style="font-family:sans-serif;font-size:12px;padding-left:15px;border-style:solid;border-color:#ffffff;border-top-width:0px;border-left-width:0;border-right-width:0;border-bottom-width:1px;" width="225">
                                <span style="color:rgb(102,102,102);font-size:10px;font-weight:600;text-transform:uppercase;">Balance Due</span>
                                <br>
                                <b>$amount</b>
                            </td>
                        </tr>
                        <tr height="90">
                            <td style="font-family:sans-serif;font-size:12px;padding-left:15px;padding-right:15px;border-style:solid;border-color:#ffffff;border-top-width:0px;border-left-width:0;border-right-width:0;border-bottom-width:0px;padding-top:8px;padding-bottom:8px;" colspan="2">
                                <br>
                                Dear $contact.first_name,
                                <br>
                                <br>
                                To view your invoice, please click the button below:
                                <br>
                                <br>
                                <div style="text-align:center;">
                                    <div style="display:inline-block;width:190px;padding-bottom:8px;">
                                        <table cellspacing="0" cellpadding="0">
                                            <tbody>
                                                <tr>
                                                    <td align="center" width="190" height="44" bgcolor="#0b4d78" style="-webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px;color:#ffffff;display:block;">
                                                        <a href="$view_url" style="font-size:16px;font-weight:bold;font-family:sans-serif;text-decoration:none;line-height:44px;width:100%;display:inline-block">
                                                            <span style="color:#ffffff;">View Invoice</span>
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center" style="font-family:sans-serif;font-size:12px;color:rgb(150,150,150);padding-top:8px;">Copyright © 2023 My Company Name, Inc.</td>
        </tr>
    </tbody>
</table>

Now save the template and the code becomes broken:

| ![FWS]($company.logo) | invoice |
| :-- | --: |
|   <table style="border-collapse:collapse;border-spacing:0;color:rgb(51,51,51);background-color:rgb(250,250,250);border-radius:3px;border-color:#ffffff;border-style:solid;border-top-color:#ffffff;border-bottom-color:#ffffff;" cellspacing="0" cellpadding="0" border="1"><tbody><tr height="44"><td style="font-family:sans-serif;font-size:12px;padding-left:15px;border-style:solid;border-color:#ffffff;border-left-width:0;border-right-width:0;border-bottom-width:1px;border-top-width:6px;border-top-color:#f36c34;border-top-style:solid;" colspan="2"><span style="color:rgb(102,102,102);font-size:10px;font-weight:600;text-transform:uppercase;">Invoice no.</span><br><span style="color:#0073ff;">$invoice.number</span></td></tr><tr height="44"><td style="font-family:sans-serif;font-size:12px;padding-left:15px;border-style:solid;border-color:#ffffff;border-top-width:0px;border-left-width:0;border-right-width:1px;border-bottom-width:1px;" width="225"><span style="color:rgb(102,102,102);font-size:10px;font-weight:600;text-transform:uppercase;">due by</span><br><span style="color:#0070c9;">$invoice.due_date</span></td><td style="font-family:sans-serif;font-size:12px;padding-left:15px;border-style:solid;border-color:#ffffff;border-top-width:0px;border-left-width:0;border-right-width:0;border-bottom-width:1px;" width="225"><span style="color:rgb(102,102,102);font-size:10px;font-weight:600;text-transform:uppercase;">Balance Due</span><br><b>$amount</b></td></tr><tr height="90"><td style="font-family:sans-serif;font-size:12px;padding-left:15px;padding-right:15px;border-style:solid;border-color:#ffffff;border-top-width:0px;border-left-width:0;border-right-width:0;border-bottom-width:0px;padding-top:8px;padding-bottom:8px;" colspan="2"><br>Dear $contact.first_name,<br><br>To view your invoice, please click the button below:<br><br><div style="text-align:center;"><div style="display:inline-block;width:190px;padding-bottom:8px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td align="center" width="190" height="44" bgcolor="#0b4d78" style="-webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px;color:#ffffff;display:block;"><a href="$view_url" style="font-size:16px;font-weight:bold;font-family:sans-serif;text-decoration:none;line-height:44px;width:100%;display:inline-block"><span style="color:#ffffff;">View Invoice</span></a></td></tr></tbody></table></div></div></td></tr></tbody></table>   |  |
| Copyright © 2023 My Company Name, Inc. |  |

shunpin · April 25, 2023, 11:31pm

EDIT: While the template does seem broken after saving it, the email generated does render correctly. So all good