Article Bookmark Email
Introduction
This sample demonstrates how to let users perform an asynchronous action (bookmarking an article) in an AMP email.
It leverages the amp-form
extension to
send a request to the server without the user leaving their e-mail client.
Setup
Additionally used AMP components must be imported in the header. We use
amp-form
to submit bookmark requests to the server.
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
We use amp-mustache
to render the result of a form submission.
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
Body
We display a simple summary of the article in the email.
Sample article
This is a short summary of a sample article. The user can choose to continue reading on the website or bookmark it to their account for later.
<h1>Sample article</h1> <p>This is a short summary of a sample article. The user can choose to continue reading on the website or bookmark it to their account for later.</p>
We show a "bookmark" button under the article, which sends a bookmark request to the server asynchronously via amp-form
.
Because there is no authentication for outgoing XHR calls from AMP email messages, all authentication should be done using access tokens.
In this example, this token is represented with 123abc
. In a real-life scenario, this hidden input field auth_token
would contain a real server-side validated limited-use access token.
<form action-xhr="https://amp.dev/documentation/examples/interactivity-dynamic-content/article_bookmark_email/submit-form-bookmark" method="post"> <input type="hidden" name="id" value="ARTICLE_UNIQUE_ID"> <input type="hidden" name="auth_token" value="123abc"> <button type="submit"> Bookmark </button> <div submit-success> <template type="amp-mustache"> {{result}} </template> </div> <div submit-error>An error occurred.</div> </form>
Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.
Ir para o Stack Overflow Falta explicar algum recurso?O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.
Editar amostra no GitHub