Changing the look of the email sent from Review

Post Reply
LasseThid
Advanced member
Posts: 357
Joined: Tue Mar 03, 2015 2:30 pm
Location: Molndal, Sweden

Changing the look of the email sent from Review

Post by LasseThid »

We have used the Enfocus PDF Review Module for quite some time, but are now in the process of moving over to the Enfocus Review app.

For the Enfocus PDF Review Module I managed to change the look of the e-mail that is sent to the customer for approval to be a simple mail with custom text and the link to the page for the job collection and I'd like to get a similar looking mail sent from Enfocus Review, but so far I'm not having any luck at all... :lol:

If I sent the mail in HTML format I can customize the text the way I want it to look, but I get an Enfocus Switch logo at the top and a text saying Enfocus Switch notification followed by Dear Customer and at the end of the e-mail I get the (C) 2024 Enfocus BV footer and another Enfocus Switch logo.
If I send the mail in plain text format I don't get the Enfocus logos and footer, but on the other hand I can't make text bold or use the <a href="[Job.PrivateData:Key="ReviewURL"]"> to make the token a clickable word.

Any suggestions on how to customize the e-mail the way I want it to look?

Thanks in advance
Lasse
Enfocus Switch, Enfocus PitStop Server, Enfocus PDF Review, HP SmartStream& Kodak Prinergy with RBA
Offset 72x102, Offset Large Format, Digital Large Format and Digital print.
Top
User avatar
tdeschampsBluewest
Member
Posts: 93
Joined: Tue Jun 01, 2021 11:57 am

Re: Changing the look of the email sent from Review

Post by tdeschampsBluewest »

Hi,
For all our customer sending email, we strongly suggest to use html templating.

Within the "Send email" element, select the option named : Use a fixed template.
Then make it point on a .html file. This .html file can contain any switch variables, and they will be replaced on the fly while sending email.

If you are not fluent with HTML, you can create nice template with wysiwyg website like beefree
Later you can still tweak it with chat-gpt, and prompt like :
"Here is my html, i want to change the color of background in "XXX"

You'll find below is a base template to start with, and associate private data :

Code: Select all

[Job.PrivateData:Key="email.title"]
[Job.PrivateData:Key="email.subtitle"]
[Job.PrivateData:Key="email.body"]
[Job.PrivateData:Key="email.button.text"]
[Job.PrivateData:Key="email.button.link"]
[Job.PrivateData:Key="email.footer"]

Code: Select all

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if mso]>
				<xml>
					<o:OfficeDocumentSettings>
						<o:PixelsPerInch>96</o:PixelsPerInch>
						<o:AllowPNG/>
					</o:OfficeDocumentSettings>
				</xml>
				<![endif]-->
    <!--[if !mso]>
				<!-->
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
    <!--


					<![endif]-->
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      a[x-apple-data-detectors] {
        color: inherit !important;
        text-decoration: inherit !important;
      }

      #MessageViewBody a {
        color: inherit;
        text-decoration: none;
      }

      p {
        line-height: inherit
      }

      .desktop_hide,
      .desktop_hide table {
        mso-hide: all;
        display: none;
        max-height: 0px;
        overflow: hidden;
      }

      .image_block img+div {
        display: none;
      }

      @media (max-width:670px) {
        .desktop_hide table.icons-inner {
          display: inline-block !important;
        }

        .icons-inner {
          text-align: center;
        }

        .icons-inner td {
          margin: 0 auto;
        }

        .mobile_hide {
          display: none;
        }

        .row-content {
          width: 100% !important;
        }

        .stack .column {
          width: 100%;
          display: block;
        }

        .mobile_hide {
          min-height: 0;
          max-height: 0;
          max-width: 0;
          overflow: hidden;
          font-size: 0px;
        }

        .desktop_hide,
        .desktop_hide table {
          display: table !important;
          max-height: none !important;
        }
      }
    </style>
  </head>
  <body class="body" style="background-color: #F5F5F5; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
    <table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #F5F5F5;">
      <tbody>
        <tr>
          <td>
            <table class="row row-1" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
              <tbody>
                <tr>
                  <td>
                    <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 650px; margin: 0 auto;" width="650">
                      <tbody>
                        <tr>
                          <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
                            <div class="spacer_block block-1" style="height:30px;line-height:30px;font-size:1px;">&#8202;</div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <table class="row row-2" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
              <tbody>
                <tr>
                  <td>
                    <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #d4f7fa; color: #000000; width: 650px; margin: 0 auto;" width="650">
                      <tbody>
                        <tr>
                          <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 60px; padding-left: 25px; padding-right: 25px; padding-top: 5px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
                            <table class="image_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                              <tr>
                                <td class="pad" style="width:100%;padding-right:0px;padding-left:0px;">
                                  <div class="alignment" align="center" style="line-height:10px">
                                    <div style="max-width: 90px;">
                                      <img src="https://cdn-www.enfocus.com/sites/default/files/media/homepage/switch_icon.png" style="display: block; height: auto; border: 0; width: 100%;" width="90" alt="Image" title="Image" height="auto">
                                    </div>
                                  </div>
                                </td>
                              </tr>
                            </table>
                            <table class="paragraph_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
                              <tr>
                                <td class="pad" style="padding-left:15px;padding-right:10px;padding-top:20px;">
                                  <div style="color:#052d3d;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:38px;line-height:150%;text-align:center;mso-line-height-alt:57px;">
                                    <p style="margin: 0; word-break: break-word;">[Job.PrivateData:Key="email.title"]</p>
                                  </div>
                                </td>
                              </tr>
                            </table>
                            <table class="paragraph_block block-3" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
                              <tr>
                                <td class="pad" style="padding-left:15px;padding-right:10px;">
                                  <div style="color:#052d3d;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:34px;line-height:150%;text-align:center;mso-line-height-alt:51px;">
                                    <p style="margin: 0; word-break: break-word;">[Job.PrivateData:Key="email.subtitle"]</p>
                                  </div>
                                </td>
                              </tr>
                            </table>
                            <table class="paragraph_block block-4" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
                              <tr>
                                <td class="pad">
                                  <div style="color:#555555;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:18px;line-height:120%;text-align:center;mso-line-height-alt:21.599999999999998px;">
                                    <p style="margin: 0; word-break: break-word;">[Job.PrivateData:Key="email.body"]</p>
                                  </div>
                                </td>
                              </tr>
                            </table>
                            <table class="button_block block-5" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                              <tr>
                                <td class="pad" style="padding-bottom:10px;padding-left:10px;padding-right:10px;padding-top:20px;text-align:center;">
                                  <div class="alignment" align="center">
                                    <!--[if mso]>
																						<v:roundrect
																							xmlns:v="urn:schemas-microsoft-com:vml"
																							xmlns:w="urn:schemas-microsoft-com:office:word" href="[Job.PrivateData:Key="email.button.link"]" style="height:52px;width:375px;v-text-anchor:middle;" arcsize="29%" stroke="false" fillcolor="#00b0ea">
																							<w:anchorlock/>
																							<v:textbox inset="0px,0px,0px,0px">
																								<center dir="false" style="color:#ffffff;font-family:Tahoma, Verdana, sans-serif;font-size:16px">
																									<![endif]-->
                                    <a href="[Job.PrivateData:Key=" email.button.link"]" target="_blank" style="background-color:#00b0ea;border-bottom:0px solid transparent;border-left:0px solid transparent;border-radius:15px;border-right:0px solid transparent;border-top:0px solid transparent;color:#ffffff;display:inline-block;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:16px;font-weight:undefined;mso-border-alt:none;padding-bottom:10px;padding-top:10px;text-align:center;text-decoration:none;width:auto;word-break:keep-all;">
                                      <span style="padding-left:40px;padding-right:40px;font-size:16px;display:inline-block;letter-spacing:normal;">
                                        <span style="word-break: break-word; line-height: 32px;">[Job.PrivateData:Key="email.button.text"]</span>
                                      </span>
                                    </a>
                                    <!--[if mso]>
																								</center>
																							</v:textbox>
																						</v:roundrect>
																						<![endif]-->
                                  </div>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
            <table class="row row-3" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
              <tbody>
                <tr>
                  <td>
                    <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 650px; margin: 0 auto;" width="650">
                      <tbody>
                        <tr>
                          <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 60px; padding-top: 20px; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;">
                            <table class="paragraph_block block-1" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
                              <tr>
                                <td class="pad">
                                  <div style="color:#555555;font-family:'Lato', Tahoma, Verdana, Segoe, sans-serif;font-size:14px;line-height:150%;text-align:center;mso-line-height-alt:21px;">
                                    <p style="margin: 0; word-break: break-word;">[Job.PrivateData:Key="email.footer"]</p>
                                  </div>
                                </td>
                              </tr>
                            </table>
                            <table class="divider_block block-2" width="100%" border="0" cellpadding="10" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                              <tr>
                                <td class="pad">
                                  <div class="alignment" align="center">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="60%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
                                      <tr></tr>
                                    </table>
                                  </div>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
    </table>
</html>
Do you like the Enfocus Apps developed by Bluewest?
Feel free to leave a comment on the Appstore!
Top
LasseThid
Advanced member
Posts: 357
Joined: Tue Mar 03, 2015 2:30 pm
Location: Molndal, Sweden

Re: Changing the look of the email sent from Review

Post by LasseThid »

Thank you very much for the information.

I will have a look at it and see if I can somehow get something to work.
I'm not fluent with HTML in anyway, but I have some experience with copy/paste/modify/try again... :lol: :lol: :lol:

Update: After a blond hour or two where the elevator struggled to reach the top floor :lol: , I finally figured out what to do in order to make this look the way I want it to.

Again, thank you very much for your help. It's greatly appreciated!
Enfocus Switch, Enfocus PitStop Server, Enfocus PDF Review, HP SmartStream& Kodak Prinergy with RBA
Offset 72x102, Offset Large Format, Digital Large Format and Digital print.
Top
Post Reply

Return to “Review”