Skip to content

Instantly share code, notes, and snippets.

Last active April 29, 2019 05:49
Show Gist options
  • Save theevilhead/908d9f761a82809a33fcede797d06334 to your computer and use it in GitHub Desktop.
Save theevilhead/908d9f761a82809a33fcede797d06334 to your computer and use it in GitHub Desktop.
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>
<!-- REQUIRED -->
<meta charset="utf-8">
<script async src=""></script>
<script async custom-element="amp-form" src=""></script>
<script async custom-element="amp-list" src=""></script>
<script async custom-template="amp-mustache" src=""></script>
<script async custom-element="amp-bind" src=""></script>
<!-- REQUIRED: Hide until the amp script is loaded. -->
<style amp4email-boilerplate>
body {
visibility: hidden
<!-- 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;
<!-- Custom body -->
This week's newsletter
<amp-list src="" layout="fixed-height" width="auto" height="200"
<template type="amp-mustache">
<form id="bookmark-submit" action-xhr="" method="post">
<div class="post">
<a href="">
<amp-img src={{coverImage}} width="400" height="225">
<amp-img src='' width="400" height="225">
<div class="post-content">
<hr />
<button name="post.bookmark" value={{_id}} type="submit">
<amp-img src='' width="20" height="20">
<button name="post.upvote" value={{_id}} type="submit">
<amp-img src='' width="20" height="20"></amp-img>
unsubscribe: false -> action : subscribe
unsubscribe: true|undefined -> action: unsubscribe
<form id="unsubscribe-form" action-xhr="" 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'">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment