ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ 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&amp;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&amp;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&amp;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">&mdash;</span> <strong>Nemanja Sisakovic</strong> <span
 class="dash">&mdash;</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">&mdash;</span> <strong>Espeka Zambia</strong> <span
 class="dash">&mdash;</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">&mdash;</span> <strong>Lucy</strong> <span class="dash">&mdash;</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

ΠžΡ†Π΅Π½ΠΈΡ‚Π΅, насколько ΠΏΠΎΠ»Π΅Π·Π½Π° ΡΡ‚Π°Ρ‚ΡŒΡ "ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ AMP писСм"

ΠžΡ†Π΅Π½ΠΊΠ°: 5 / 5 (7)

Назад

Как ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ AMP письма

Π”Π°Π»Π΅Π΅

Π—Π°ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π΄Π°Ρ‚Ρƒ ΠΈ врСмя рассылки

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΠ΅ Π² нашСм Π±Π»ΠΎΠ³Π΅

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сСрвис email рассылок SendPulse бСсплатно