mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-26 13:48:33 +02:00
chore: new invite email template improvements (#9997)
https://linear.app/unleash/issue/2-3567/improve-the-look-of-the-unleash-instance-getting-started-email Follow-up to: https://github.com/Unleash/unleash/pull/9980 Refactored the new email template to use a table-based layout with inline styles for maximum compatibility across email clients, while preserving the original design.
This commit is contained in:
Nuno Góis
GitHub
parent
0e8f187948
commit
e9768f7363
@ -1,165 +1,78 @@
|
||||
<!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">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Welcome to Unleash</title>
|
||||
<style>
|
||||
/* /\/\/\/\/\/\/\/\/ CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
|
||||
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
|
||||
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
|
||||
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
|
||||
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
|
||||
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
|
||||
img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #EAEAED;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.preheader {
|
||||
display: none;
|
||||
font-size: 1px;
|
||||
color: #fff;
|
||||
line-height: 1px;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.logo-bar {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
.logo-bar > img {
|
||||
max-height: 36px;
|
||||
display: block;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
}
|
||||
.header img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 0;
|
||||
}
|
||||
.content {
|
||||
padding: 32px 24px 24px;
|
||||
}
|
||||
.content h1 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.content p {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.resources {
|
||||
padding: 0 24px 24px;
|
||||
}
|
||||
.resources h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.resources ul {
|
||||
padding-left: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
.resources ul li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.resources ul li a {
|
||||
color: #615BC2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.signature {
|
||||
padding: 0px 24px;
|
||||
}
|
||||
.footer {
|
||||
font-size: 12px;
|
||||
color: #3b3f44;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
}
|
||||
.footer a {
|
||||
color: #615BC2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<span class="preheader">
|
||||
Welcome to Unleash! You’ve been invited to your organization’s Unleash account – start experimenting with features today.
|
||||
</span>
|
||||
<div class="logo-bar">
|
||||
<img src="https://cdn.getunleash.io/unleash_logo_600.png" alt="Unleash logo" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<img src="https://cdn.getunleash.io/email-assets/email_header_welcome.png" alt="Welcome to Unleash" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>Welcome to Unleash {{ name }}!</h1>
|
||||
<p>
|
||||
You have been invited to your organization’s Unleash account.
|
||||
</p>
|
||||
{{# passwordLink }}
|
||||
<p>
|
||||
Start using Unleash by clicking the sign-up link below. Follow the
|
||||
steps provided to set your password and get started.
|
||||
</p>
|
||||
<p>
|
||||
<a href="{{{ passwordLink }}}" target="_blank" rel="noopener noreferrer" style="display:inline-block; padding:6px 20px; margin-top:8px; background-color:#6C65E5; color:#ffffff !important; text-decoration:none; border-radius:6px; font-weight:bold; font-size:14px;">Set up account</a>
|
||||
</p>
|
||||
{{/ passwordLink }}
|
||||
{{^ passwordLink }}
|
||||
<p>
|
||||
Start using Unleash by clicking the log in link below.
|
||||
</p>
|
||||
<p>
|
||||
<a href="{{{ unleashUrl }}}" target="_blank" rel="noopener noreferrer" style="display:inline-block; padding:6px 20px; margin-top:8px; background-color:#6C65E5; color:#ffffff !important; text-decoration:none; border-radius:6px; font-weight:bold; font-size:14px;">Log in</a>
|
||||
</p>
|
||||
{{/ passwordLink }}
|
||||
</div>
|
||||
<div class="resources">
|
||||
<h2>Useful resources</h2>
|
||||
<p>Once you are up and running, you might want to take a look at the following resources:</p>
|
||||
<ul>
|
||||
<li><a href="https://docs.getunleash.io" target="_blank" rel="noopener noreferrer">Documentation</a></li>
|
||||
<li><a href="https://github.com/unleash" target="_blank" rel="noopener noreferrer">Code examples</a></li>
|
||||
<li><a href="https://docs.getunleash.io/reference/sdks" target="_blank" rel="noopener noreferrer">SDKs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="signature">
|
||||
<p>Best,<br/>Your Unleash team</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>
|
||||
By starting to use Unleash, you are agreeing to our <a href="https://www.getunleash.io/terms-of-service" target="_blank" rel="noopener noreferrer">Terms of Service</a>
|
||||
<br />
|
||||
This email was sent to {{ recipient }}
|
||||
</p>
|
||||
</div>
|
||||
<body style="margin:0; padding:0; background-color:#eaeaed; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:#000;">
|
||||
<div style="display:none !important; font-size:1px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">
|
||||
Welcome to Unleash! You’ve been invited to your organization’s Unleash account – start experimenting with features today.
|
||||
</div>
|
||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#eaeaed">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<table width="600" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
||||
<tr>
|
||||
<td align="left" style="padding:24px;">
|
||||
<img src="https://cdn.getunleash.io/unleash_logo_600.png" alt="Unleash logo" style="max-height:36px; height:auto; width:auto; display:block;" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color:#ffffff; border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.05);">
|
||||
<tr>
|
||||
<td align="center">
|
||||
<img src="https://cdn.getunleash.io/email-assets/email_header_welcome.png" alt="Welcome to Unleash" style="width:100%; max-width:100%; height:auto; border:0; display:block;" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:32px 24px 24px; text-align:left;">
|
||||
<h1 style="font-size:24px; font-weight:bold; margin:16px 0;">Welcome to Unleash {{ name }}!</h1>
|
||||
<p style="font-size:16px; line-height:1.6; margin:16px 0;">You have been invited to your organization’s Unleash account.</p>
|
||||
{{# passwordLink }}
|
||||
<p style="font-size:16px; line-height:1.6; margin:16px 0;">Start using Unleash by clicking the sign-up link below. Follow the steps provided to set your password and get started.</p>
|
||||
<p style="margin:16px 0;">
|
||||
<a href="{{{ passwordLink }}}" target="_blank" style="display:inline-block; padding:10px 20px; background-color:#6c65e5; color:#ffffff; text-decoration:none; border-radius:6px; font-weight:bold; font-size:14px;">Set up account</a>
|
||||
</p>
|
||||
{{/ passwordLink }}
|
||||
{{^ passwordLink }}
|
||||
<p style="font-size:16px; line-height:1.6; margin:16px 0;">Start using Unleash by clicking the log in link below.</p>
|
||||
<p style="margin:16px 0;">
|
||||
<a href="{{{ unleashUrl }}}" target="_blank" style="display:inline-block; padding:10px 20px; background-color:#6c65e5; color:#ffffff; text-decoration:none; border-radius:6px; font-weight:bold; font-size:14px;">Log in</a>
|
||||
</p>
|
||||
{{/ passwordLink }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:0 24px 24px; text-align:left;">
|
||||
<h2 style="font-size:18px; margin:12px 0;">Useful resources</h2>
|
||||
<p style="font-size:16px; line-height:1.6; margin:16px 0;">Once you are up and running, you might want to take a look at the following resources:</p>
|
||||
<ul style="padding-left:24px; margin:0;">
|
||||
<li style="margin-bottom:8px;"><a href="https://docs.getunleash.io" target="_blank" style="color:#615bc2; text-decoration:underline;">Documentation</a></li>
|
||||
<li style="margin-bottom:8px;"><a href="https://github.com/unleash" target="_blank" style="color:#615bc2; text-decoration:underline;">Code examples</a></li>
|
||||
<li style="margin-bottom:8px;"><a href="https://docs.getunleash.io/reference/sdks" target="_blank" style="color:#615bc2; text-decoration:underline;">SDKs</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding:0 24px; text-align:left;">
|
||||
<p style="font-size:16px; line-height:1.6; margin:16px 0;">Best,<br />Your Unleash team</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="font-size:12px; color:#3b3f44; text-align:center; padding:24px;">
|
||||
<p style="margin:0;">
|
||||
By starting to use Unleash, you are agreeing to our
|
||||
<a href="https://www.getunleash.io/terms-of-service" target="_blank" style="color:#615bc2; text-decoration:underline;">Terms of Service</a><br />
|
||||
This email was sent to {{ recipient }}
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user