mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-31 13:47:02 +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">
|
<!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">
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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>
|
<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>
|
</head>
|
||||||
<body>
|
<body style="margin:0; padding:0; background-color:#eaeaed; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:#000;">
|
||||||
<span class="preheader">
|
<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.
|
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>
|
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user