Presento varias plantillas de correos electrónicos interactivos.
Para ver el resultado del código aquí subido solo hay que copiarlo y pegarlo en alguno de los siguientes playground.
- AMP home page - Toda la documentación y recursos necesarios para empezar con AMP y AMP for email.
Para más detalle: la pag de componentes de AMP para email.
-
example_1:
- animated hamburger menu: Pequeñas animaciones de IU interactivas comunican el estado y el propósito a los usuarios. Un caso común es un botón de menú de hamburguesa que se anima en una "X" cuando está abierto. Esta animación comunica que el usuario puede presionar el mismo botón nuevamente para cerrar el menú.
- style-layout: Esta es una implementación de paneles de pestañas que usa amp-selector. Las pestañas y los paneles de pestañas se colocan a través de flexbox y el selector de amp, el cual usa el atributo seleccionado para mostrar / ocultar el panel de pestañas correcto y diseñar la pestaña seleccionada.
-
example_2:
Checkout Flow: este ejemplo demuestra cómo puede implementar una página de pago simple en AMP. La muestra supone que todo el procesamiento de pagos se realiza del lado del servidor. Los casos de uso cubiertos son:Cómo representar dinámicamente los datos de la tarjeta de compras.Cómo admitir el inicio de sesión del usuario con direcciones almacenadas y tarjetas de crédito.Cómo permitir que los usuarios completen automáticamente sus datos de contacto, dirección y tarjeta de crédito.Cómo manejar los códigos de promoción / descuento.
Elementos:- amp-form: para recopilar y enviar la entrada del usuario.
- amp-access: para inicio de sesión de usuario.
- amp-analytics: es requerido por amp-access.
- amp-list: para representar contenido personalizado, como el carrito de compras.
- amp-mustache: para renderizar plantillas en combinación con amp-list.
- amp-bind: para actualizar dinámicamente la página según la entrada del usuario.
-
example_3:
-
example_4:
-
example_5: