Skip to content

Instantly share code, notes, and snippets.

@naveenvm93

naveenvm93/Amp4Email-Email-Full-Code.HTML

Last active July 10, 2021 14:54
Show Gist options
  • Save naveenvm93/228a0ae28a7514b1b2a71a8dacffae9d to your computer and use it in GitHub Desktop.
Save naveenvm93/228a0ae28a7514b1b2a71a8dacffae9d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Amp4Email-Email-Full-Code.HTML
<!-- {{={< >}=}} -->
<!DOCTYPE html>
<html amp4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom></style>
<style amp-custom>
.header {
padding: 3em 1.25em;
text-align:center;
}
.header amp-img {
margin:0 auto;
max-width: 220px;
}
h2 {
margin: .5em 0;
font-size: 2.5em;
text-align: center;
}
.coupon-product-button {
display: inline-block;
text-decoration: none;
color: #fff;
background-color: #097fb3;
text-align: center;
border-radius: 2em;
padding: 1em 2em;
}
.sample-form{
text-align: center;
}
</style>
</head>
<body>
<!-- %%view_email_url%% -->
<!-- %%unsub_center_url%% -->
<div class="header">
<amp-img layout="responsive" src="https://image.s10.sfmc-content.com/lib/fe4015707564067d701477/m/1/32e65d5a-13f0-4050-a9b6-1bd4442699fc.png" width="348" height="242" alt="SalesforceFan"></amp-img>
</div>
<amp-list
id="paragraph"
src="SFMCCloudPageURL"
>
<div placeholder>Loading...</div>
<div fallback>Waiting for Coupon!</div>
<template type="amp-mustache">
{{#couponBoolean}}
<h2 class="prod-name"> Claim fast, you have only {{coupon}} coupons left!</h2>
{{/couponBoolean}}
{{^couponBoolean}}
<h2 class="prod-name">Sorry all Coupons are claimed by other customers.</h2>
{{/couponBoolean}}
</template>
</amp-list>
<form class="sample-form" method="post" action-xhr="SFMCCloudPageURL">
<input type="hidden" name="email" value="%%EmailAddress%%">
<input type="submit" class="coupon-product-button" value="Claim Coupon">
<div submit-success>
<template type="amp-mustache">
Here is your coupon - {{couponId}}
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Error! Please try again later.
</template>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment