Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This amp email has personalised posts in newsletters with bookmarking and upvoting options. Which hit an endpoint on action. It also has a unsubscribe/resubscribe button inside the email. All these operations are done without leaving your email.
<!doctype html>
<!-- Either ⚡4email or amp4email is valid -->
<html ⚡4email>
<head>
<!-- REQUIRED -->
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.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-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>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<!-- REQUIRED: Hide until the amp script is loaded. -->
<style amp4email-boilerplate>
body {
visibility: hidden
}
</style>
<!-- Custom styles: Hide until the amp script is loaded. -->
<style amp-custom>
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 0 10px;
}
#amp-1 {
background: #3742fa;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
text-align: center;
margin: 50px 0px;
}
.posts {
padding: 10px;
}
.post {
width: 100%;
border-radius: 10px;
background: #f9f9f9;
border: 1px solid #d9d9d9;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 25px;
overflow: hidden;
}
.post>.post-content {
padding: 0 20px 20px 20px;
line-height: 20px;
}
form {
text-align: center;
}
button {
border: 1px solid #d9d9d9;
border-radius: 10px;
}
</style>
</head>
<body>
<!-- Custom body -->
<h1>
This week's newsletter
</h1>
<amp-list src="https://www.mocky.io/v2/5ca70261340000012f76b269" layout="fixed-height" width="auto" height="200"
items="posts">
<template type="amp-mustache">
<form id="bookmark-submit" action-xhr="https://your-site.com/some-endpoint" method="post">
<div class="post">
<a href="https://hashnode.com">
{{#coverImage}}
<amp-img src={{coverImage}} width="400" height="225">
</amp-img>
{{/coverImage}}
{{^coverImage}}
<amp-img src='https://dummyimage.com/600x400/e0e0e0/858585.png&text=NA' width="400" height="225">
</amp-img>
{{/coverImage}}
</a>
<div class="post-content">
<h3>{{title}}</h3>
<hr />
<span>
<button name="post.bookmark" value={{_id}} type="submit">
<amp-img src='https://img.icons8.com/ios/50/000000/bookmark-ribbon.png' width="20" height="20">
</amp-img>
Bookmark
</button>
</span>
<button name="post.upvote" value={{_id}} type="submit">
<amp-img src='https://img.icons8.com/ios/50/000000/facebook-like.png' width="20" height="20"></amp-img>
Upvote
</button>
</div>
</div>
</form>
</template>
</amp-list>
<!--
/endpoint/unsubscribe
unsubscribe: false -> action : subscribe
unsubscribe: true|undefined -> action: unsubscribe
-->
<form id="unsubscribe-form" action-xhr="https://your-endpoint.com/unsubscribe" method="post">
<input type="hidden" name="access-token" value="access-token-value" /> // To determine the user. This will be hard coded when the email is sent.
<input type="hidden" name="unsubscribe" [value]="!state.unsubscribe">
<button type="submit" on="tap:AMP.setState({state: {unsubscribe: !state.unsubscribe}})" class="unsub-button"
[text]="state.unsubscribe ? 'Subscribe' : 'Unsubscribe'">
Unsubscribe
</button>
</form>
<br>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.