How to add CSS in mailto body ?

[shruti25]

Hello everyone,

I want to add css in mailto body and it is link to a reject button in email. I have tried with style and font tag but it seems it is working on that notification and it is not showing in outlook.

code:

var grRITM = new GlideRecord('sc_req_item');

    grRITM.addQuery('sys_id', current.document_id);

    grRITM.query();

    if (grRITM.next()) {

    var instance = gs.getProperty("instance_name"); //mail-id

        var app = "approve";

        var body = "<span style='color: red;'>*</span>";

        var mark = email.watermark;

        var approveLink = "mailto:" + instance + "?subject=Re:" + grRITM.number + "-" + app + "&body=%0D%0A" + mark + "";

            var approveButton = "<a href=" + approveLink + "><span style='background: #1E9BDF;padding: 8px 11px;color: white;'>Approve</a>";

        var rej = "reject";

        //link for reject button

         var rejectLink = "mailto:" +  instance + "?subject=Re:" + grRITM.number + "-" + rej + "&body="+"%0D%0A"+body+"&nbsp;"+"Please"+"&nbsp;"+"Provide"+"&nbsp;"+"a"+"&nbsp;"+"reason"+"&nbsp;"+"for"+"&nbsp;"+"rejecting:"+mark+"";

        //reject button

        var rejectButton = "<a href=" + rejectLink + "><span style='background: #dadada;padding: 8px 11px;color: black;'>Reject</a>";

        template.print('<p><p style="font-family: calibri; font-size: 14.5px"><a href="mailto:' + instance + current.sysapproval.getDisplayValue() + '&body=My reason for rejection follows >>> ' + mark + '%20 target="_top"><b>I Reject</b></a></p>');

        //print approval and reject button

        template.print(approveButton + "&nbsp;&nbsp;&nbsp;" + rejectButton);

        var link = '<a title="here" href="sp?id=sc_request&amp;is_new_order=true&amp;table=sc_req_item&amp;sys_id=' + grRITM.request + '">here</a>';

        template.print("<br/><br/><br/>Please click " + link + " to view more details of this request on the portal.");

    }

Any guidance or tips would be greatly appreciated!

Thank you!!

[Sourabh26]

Hi,

If you want to add the CSS in mailto template then you don't need to define the CSS instead of that simply use the Message HTML text editor and define your text and variables. It will add the related CSS itself.

If you want to add in the notification separately then define the email script and use Message utility for CSS.

Mark this as Helpful/Correct, if Applicable.

Regards,

Sourabh

[shloke04]

Hi,

My suggestion here will be even say if you got the CSS working, it might not render properly in other outlook or web outlook due to factors such as Browser or version not updated.

Also this will require extensive testing effort as well.(just to note)

I have seen in my practical experience similar behavior, so we went with Images for Approve and Reject button.

Please follow the step by step guide from Jaspal which is really good and you can consider for your implementation and works fine till the latest release of ServiceNow.

https://community.servicenow.com/community?id=community_blog&sys_id=8080e8dc1babb380d01143f6fe4bcb0e

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

[shloke04]

Hi,

If you still want to go down the path of adding custom CSS, then please refer the below blog from Steve which covers this in detail:

https://community.servicenow.com/community?id=community_blog&sys_id=438c2ae1dbd0dbc01dcaf3231f9619fe

https://community.servicenow.com/community?id=community_blog&sys_id=cd9daa69dbd0dbc01dcaf3231f961963

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke