Примеры AMP писем
В статье рассмотрим примеры кода для создания шаблона письма с различными интерактивными элементами: FAQ, слайдер карточек товара и отзывы.
Перед отправкой AMP письма вам нужно подтвердить ваш адрес отправителя в Gmail. Читайте подробнее «Как отправлять AMP письма».
Письмо с AMP элементом «FAQ»
Раскрывающийся список вопросов и ответов.
<!doctype html>
<!-- This tells everyone that this is an AMPHTML email. `<html amp4email>` works too. -->
<html amp4email>
<!-- ## Head -->
<!-- -->
<head>
<!-- The charset definition must be the first child of the `<head>` tag. -->
<meta charset="utf-8">
<!-- The AMP runtime.-->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<style amp4email-boilerplate>body {
visibility: hidden
}</style>
<style amp-custom>
body {
background-color: #ffffff;
font-size: 18px;
color: #333333;
font-family: 'Segoe UI', Segoe, 'Open Sans', sans-serif;
width: 100%;
height: 100%;
Margin: 0;
padding: 0
}
.main-body {
max-width: 600px;
margin: 0 auto;
}
.main {
padding: 0 30px;
}
.header {
padding: 30px 0 25px 0;
border-bottom: solid 1px #D6E3E3;
margin-bottom: 40px;
}
.header .logo {
display: block;
margin: 0;
padding: 0;
border: 0 none;
}
.logo, .headers {
font-size: 22px;
line-height: 40px;
margin: 0 0 10px;
color: #666a6c;
font-family: "Segoe UI", Segoe, "Open Sans", sans-serif;
text-transform: uppercase;
display: block;
padding: 30px 0;
font-weight: lighter;
}
p {
font-family: 'Segoe UI', Segoe, 'Open Sans', sans-serif;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #333333;
padding: 0;
margin: 0 0 10px 0;
}
.text-strong {
font-weight: bold;
}
a {
color: #009fc1;
text-decoration: underline;
}
.accordion-header {
padding: 20px;
color: #333;
font-size: 18px;
font-weight: normal;
background-color: #fafafa;
border: 1px solid #ddd;
}
.accordion-info {
padding: 20px;
border: 1px solid #ccc;
text-align: left;
color: #666;
line-height: 1.4em;
font-size: 15px;
}
.center {
text-align: center;
padding-bottom: 20px
}
.footer {
padding: 30px 0 25px 0;
border-top: solid 1px #D6E3E3;
margin-top: 40px;
}
.location {
border: 1px solid #ddd;
}
.space {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="main-body">
<div class="main">
<header class="center header">
<div class="logo"><span>Your company name </span></div>
</header>
<section>
<p class="text-strong"> Hello</p>
<p>This is a test email from %company-name%. Please add this address to your whitelist, so we can send you
AMP
version of emails.</p>
<p class="text-strong">
This is important for us. Check out how we implement AMP elements below.
</p>
<div class="space"></div>
<p>Thank you for your interest in our hotel. If you have any questions, we will be pleased to answer
them.</p>
<p> Find the answers to frequently asked questions below.</p>
<h2 class="headers center">FAQ </h2>
<amp-accordion class="sample" expand-single-section>
<section>
<h4 class="accordion-header">Room types</h4>
<p class="accordion-info">Superior rooms — 27 square metres<br>
Studio rooms — 36 square metres<br>
Suites and Panthouses — 55-112 square metres<br>
</p>
</section>
<section>
<h4 class="accordion-header">Accessibility features</h4>
<p class="accordion-info">We understand that accessibility is important to our guests. That's why
our hotel has rooms that include
amenities such as braille lifts, roll-in shower, wheelchair available
on request.
</p>
</section>
<section>
<h4 class="accordion-header">What to see nearby</h4>
<p class="accordion-info">Situated opposite Big Ben and the Houses of Parliament, our hotel places
guests at the heart of central London.
The London Eye, the London Aquarium and the city’s finest theatres, restaurants and bars are
just steps away.</p>
</section>
<section>
<h4 class="accordion-header">Contact details</h4>
<p class="accordion-info">ADDRESS:<br>
365 Westminster Bridge Road<br>
London SE1 7UT, United Kingdom<br>
RESERVATIONS:<br>
+44 (0) 333 499 6114 (Hotel Direct)<br></p>
</section>
</amp-accordion>
<div class="bg-gray"><h2 class="headers center">Our location:</h2></div>
<div>
<amp-img class="location"
src="https://highthemes.com/wp-content/uploads/2017/12/google-map.png"
width="540" height="380"></amp-img>
</div>
<div class="bg-gray"></div>
</section>
<footer class="footer">
<p>Best regards, {{sender_name}}</p>
<p>{{email}}</p>
<p>{{sender_phone}}</p>
</footer>
</div>
</div>
</body>
</html>
Письмо с AMP элементом «Слайдер»
Прокрутка картинок с помощью боковых стрелок на изображении.
<!doctype html>
<html amp4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp4email-boilerplate>body {
visibility: hidden
}</style>
<style amp-custom>
body {
background-color: #ffffff;
font-size: 16px;
color: #333333;
font-family: 'Segoe UI', 'Avenir Next', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
width: 100%;
height: 100%;
Margin: 0;
padding: 0
}
.main-body {
max-width: 600px;
margin: 0 auto;
}
.main {
padding: 0 30px;
}
.header {
padding: 30px 0 25px 0;
border-bottom: solid 1px #D6E3E3;
margin-bottom: 40px;
}
p {
font-family: 'Segoe UI', 'Avenir Next', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #333333;
padding: 0;
margin: 0 0 10px 0;
}
.text-strong {
font-weight: bold;
}
a {
color: #009fc1;
text-decoration: underline;
}
.images {
background: #f1f2f4;
padding: 30px 20px;
}
.btn {
color: #fff;
background: #009fc1;
text-align: center;
padding: 10px 35px;
border: none;
border-radius: 3px;
line-height: 28px;
text-decoration: none;
font-size: 22px;
}
.center {
text-align: center;
padding-bottom: 20px
}
.footer {
padding: 30px 0 25px 0;
border-top: solid 1px #D6E3E3;
margin-top: 40px;
}
.amp-carousel-button:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="main-body">
<div class="main">
<header class="header">
<span>{{webversion}}</span>
</header>
<section>
<p class="text-strong"> Hello</p>
<p>This is a test email from %company-name%. Please add this address to your whitelist, so we can send you AMP
version of emails.</p>
<p class="text-strong">
This is important for us. Check out how we implement AMP elements below.
</p>
<h2> Best trip photos of summer 2019</h2>
<div class="images">
<amp-carousel width="800" height="900" layout="responsive" type="slides">
<amp-img
src="https://images.pexels.com/photos/1974856/pexels-photo-1974856.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="500" height="715" alt="a sample image"></amp-img>
<amp-img
src="https://images.pexels.com/photos/2422265/pexels-photo-2422265.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="500" height="715" alt="a sample image"></amp-img>
<amp-img
src="https://images.pexels.com/photos/2402799/pexels-photo-2402799.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="500" height="715" alt="a sample image"></amp-img>
<amp-img
src="https://images.pexels.com/photos/2422487/pexels-photo-2422487.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="500" height="715" alt="a sample image"></amp-img>
<amp-img
src="https://images.pexels.com/photos/1001780/pexels-photo-1001780.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="500" height="715" alt="another sample image"></amp-img>
</amp-carousel>
</div>
<div class="center "><a href="https://sendpulse.com" class="btn">Join us right now</a></div>
</section>
<footer class="footer">
<p>Best regards, {{sender_name}}</p>
<p>{{email}}</p>
<p>{{sender_phone}}</p>
</footer>
</div>
</div>
</body>
</html>
Письмо с AMP элементом «Слайдер группы товаров»
Прокрутка нескольких карточек товара с увеличением фотографии.
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp4email-boilerplate>body {
visibility: hidden
}</style>
<style amp-custom>
body {
background: #ffffff;
font-family: "Segoe UI", Segoe, "Open Sans", sans-serif;
font-size: 16px;
color: #333;
line-height: 21px;
}
.bg-gray {
background: #fff;
padding: 20px 0;
clear: both;
}
.wrapper {
background: #fff;
width: 600px;
margin: 0 auto;
}
.preheader {
color: #000;
padding: 20px;
background: #0b0b0b;
}
.menulist li {
float: left;
padding: 0px 10px;
list-style: none;
font-size: 18px;
}
.center {
text-align: center;
padding-bottom: 20px
}
input[type="text"],
input[type="email"] {
padding: 7px;
border-radius: 3px;
border: 1px solid #ddd;
margin-left: 10px;
margin-bottom: 10px;
}
textarea {
width: 450px;
height: 120px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.wrap p {
padding: 20px;
}
.preheader a {
color: #fff
}
.logo, .headers {
font-size: 22px;
line-height: 40px;
margin: 0 0 10px;
color: #666a6c;
font-family: "Segoe UI", Segoe, "Open Sans", sans-serif;
text-transform: uppercase;
display: block;
padding: 30px 0;
font-weight: bold;
font-style: italic;
font-weight: lighter;
}
.menulist li {
float: left;
padding: 16px;
font-size: 16px;
}
.describe {
font-size: 14px;
color: #808080;
}
.price {
font-size: 18px;
color: #ef291f;
}
.strike {
font-size: 18px;
text-decoration: line-through;
margin-right: 20px;
}
.content-cell p, .content-cell h3, .content-cell h4 {
margin: 0 0 9px 0;
}
input {
border: 1px solid #ccc;
padding: 7px 3px;
margin-bottom: 10px;
}
label {
padding: 0 15px;
}
.social img {
margin: 0 10px;
width: 32px;
height: 32px;
}
.dress_caption {
padding: 0 20px 20px;
}
amp-image-lightbox {
background: rgba(0, 0, 0, 0.75);
}
amp-image-lightbox > div > div {
top: 50%;
}
amp-image-lightbox .describe {
color: #f2f2f2
}
.lightbox-item amp-img:hover {
cursor: pointer;
}
.text-strong {
font-weight: bold;
}
.amp-carousel-button:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header preheader center">
<span>{{webversion}}</span>
</header>
<div class="center">
<span class="logo">Your logo company </span>
<hr>
</div>
<div class="emailbody">
<p class="text-strong"> Hello</p>
<p>This is a test email %company-name%. Please add this address to your whitelist so we can send you AMP version
of emails.</p>
<p class="text-strong">
This is important for us. Check out how we implement AMP elements below.
</p>
<div class="bg-gray center"><h1 class="headers"> Weeks Sale </h1>
<p>Shop new arrivals every week with new trends and styles for work or weekends.</p></div>
<div>
<amp-carousel height="600" layout="fixed-height" type="carousel">
<div class="lightbox-item">
<amp-img
src="https://images.pexels.com/photos/709802/pexels-photo-709802.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500"
width="300" height="450"></amp-img>
<div class="dress_caption">
<h3><span><strong>Red Pleated Wrap</strong></span></h3>
<p><span
class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
</p>
<p><span class="strike">$25</span> <span class="price">$22.85</span></p>
</div>
</div>
<div class="lightbox-item">
<amp-img
src="https://images.pexels.com/photos/1384219/pexels-photo-1384219.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500"
width="300" height="450"></amp-img>
<div class="dress_caption">
<h3><span><strong>Red Pleated Wrap</strong></span></h3>
<p><span
class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
</p>
<p><span class="strike">$25</span> <span class="price">$22.85</span></p>
</div>
</div>
<div class="lightbox-item">
<amp-img
src="https://images.pexels.com/photos/914472/pexels-photo-914472.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="300" height="450"></amp-img>
<div class="dress_caption">
<h3><span><strong>Red Pleated Wrap</strong></span></h3>
<p><span class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
</p>
<p><span class="strike">$25</span> <span class="price">$22.85</span></p>
</div>
</div>
<div class="lightbox-item">
<amp-img
src="https://images.pexels.com/photos/1390600/pexels-photo-1390600.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="300" height="450"></amp-img>
<div class="dress_caption">
<h3><span><strong>Red Pleated Wrap</strong></span></h3>
<p><span class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
</p>
<p><span class="strike">$25</span> <span class="price">$22.85</span></p>
</div>
</div>
<div class="lightbox-item">
<amp-img
src="https://images.pexels.com/photos/1620827/pexels-photo-1620827.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="300" height="450"></amp-img>
<div class="dress_caption">
<h3><span><strong>Red Pleated Wrap</strong></span></h3>
<p><span class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
</p>
<p><span class="strike">$25</span> <span class="price">$22.85</span></p>
</div>
</div>
<div class="lightbox-item">
<amp-img
src="https://images.pexels.com/photos/982585/pexels-photo-982585.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500"
width="300" height="450"></amp-img>
<div class="dress_caption">
<h3><span><strong>Red Pleated Wrap</strong></span></h3>
<p><span class="describe">Red Pleated Wrap Dress with Asymmetrical Tie</span>
</p>
<p><span class="strike">$25</span> <span class="price">$22.85</span></p>
</div>
</div>
</amp-carousel>
</div>
<div class="bg-gray"><h2 class="headers center">Our location:</h2></div>
<div>
<amp-img
src="https://highthemes.com/wp-content/uploads/2017/12/google-map.png"
width="600" height="450"></amp-img>
</div>
<div class="bg-gray"></div>
<footer class="footer">
<p>Best regards, {{sender_name}}</p>
<p>{{email}}</p>
<p>{{sender_phone}}</p>
</footer>
</div>
</div>
</body>
</html>
Письмо с AMP элементом «Динамические отзывы»
Просмотр отзывов, которые динамически подтягиваются в email.
<!doctype html>
<!-- This tells everyone that this is an AMPHTML email. `<html amp4email>` works too. -->
<html amp4email>
<!-- ## Head -->
<!-- -->
<head>
<!-- The charset definition must be the first child of the `<head>` tag. -->
<meta charset="utf-8">
<!-- The AMP runtime.-->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>body {
visibility: hidden
}</style>
<style amp-custom>
body {
background-color: #eee;
font-size: 16px;
font-weight: lighter;
color: #666666;
font-family: 'Helvetica Neue', Arial, sans-serif;
width: 100%;
height: 100%;
Margin: 0;
padding: 0
}
.bg-white {
background: #fff;
padding: 40px 20px 0;
}
.main-body {
max-width: 600px;
margin: 0 auto;
}
.main {
padding: 0 30px;
}
.header {
padding: 30px 0 25px 0;
border-bottom: solid 1px #D6E3E3;
margin-bottom: 40px;
}
p {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: lighter;
font-size: 16px;
line-height: 24px;
color: #666;
padding: 0;
margin: 0 0 10px 0;
}
.text-strong {
font-weight: bold;
}
a {
color: #ac7dff;
text-decoration: underline;
}
.btn {
background: #ac7dff;
color: #fff;
text-align: center;
padding: 7px 20px;
border: none;
line-height: 22px;
font-size: 16px;
font-weight: lighter;
}
.btn:hover {
cursor: pointer;
}
.center {
text-align: center;
padding-bottom: 20px
}
.testimonials {
padding: 30px;
}
.dash {
color: #999999;
}
.circle-img {
border-radius: 50px
}
.footer {
padding: 30px 0 25px 0;
border-top: solid 1px #D6E3E3;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="main-body">
<div class="main">
<header class="header">
<span>{{webversion}}</span>
</header>
<section>
<p class="text-strong"> Hello</p>
<p>This is a test email from %company-name%. Please add this address to your whitelist, so we can send you AMP
version of emails.</p>
<p class="text-strong">
This is important for us. Check out how we implement AMP elements below.
</p>
<section class="bg-white">
<p> You viewed this room earlier. Check out the reviews about it on our website. </p>
<div>
<amp-img
src="https://images.pexels.com/photos/1571468/pexels-photo-1571468.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
width="500" height="340"></amp-img>
</div>
</section>
<section class="testimonials bg-white">
<br>
<div [hidden]="testimonial1" class="center">
<amp-img
aria-describedby=""
src="https://img.stat-pulse.com/9dae6d62c816560a842268bde2cd317d/files/emailservice/userfiles/e87c2cc59bdd62b30b9245c0a00c5c32366067/20747/userpic.jpg"
width="74" height="74"></amp-img>
<p><span class="dash">—</span> <strong>Nemanja Sisakovic</strong> <span
class="dash">—</span></p>
<p class="center">
Stayed here with my family, beautiful view. The room was nice a bit dated but perfect for what we
needed. Thanks for a lovely stay!
</p>
<button class="btn" on="tap:AMP.setState({ testimonial1: true, testimonial2: false, testimonial3: true })">
Another review
</button>
</div>
<div hidden [hidden]="testimonial2" class="center">
<amp-img class="circle-img"
aria-describedby=""
src="https://images.pexels.com/photos/936229/pexels-photo-936229.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200"
width="100" height="100"></amp-img>
<p><span class="dash">—</span> <strong>Espeka Zambia</strong> <span
class="dash">—</span></p>
<p class="center">The balcony overlooking the street and with a glimpse of the Tower Bridge, although small, really made the room.
</p>
<button class="btn" on="tap:AMP.setState({ testimonial1: true, testimonial2: true, testimonial3: false })">
Another review
</button>
</div>
<div hidden [hidden]="testimonial3" class="center">
<amp-img class="circle-img"
aria-describedby=""
src="https://i.otzovik.com/2016/08/avatar/882187.jpg"
width="100" height="100"></amp-img>
<p><span class="dash">—</span> <strong>Lucy</strong> <span class="dash">—</span></p>
<p class="center">Our room had a fabulous view of Tower Bridge.
The room was spotlessly clean & had everything expected (except pen & pad by phone). <br>
Breakfast was amazing. We opted to have it in our room. Will happily stay again.
</p>
<button class="btn" on="tap:AMP.setState({ testimonial1: false, testimonial2: true, testimonial3: true })">
Another review
</button>
</div>
</section>
</section>
<footer class="footer">
<p>Best regards, {{sender_name}}</p>
<p>{{email}}</p>
<p>{{sender_phone}}</p>
</footer>
</div>
</div>
</body>
</html>Обновлено: 22.03.2024
или