Example: Comment Section - amp.dev
This example uses the following experimental feature: amp-list-resizable-children. Enable the experiment via the button below. Some components require the AMP Beta Channel to be enabled as well. Learn more about experimental features.
This sample showcases how to build a comment section in AMP HTML using the amp-form component after a successful login flow. Login, type a comment and press the COMMENT button; your comment will not be persisted, so reload the page if you want to start commenting again.
This sample allows an user to login and logout using an email and a password. Logout is implemented by configuring a second endpoint in the login property sign-out, find more here.
In order to add comments users need to be logged in. We use amp-access to integrate login and to show and hide the login button depending on whether the user is logged in. on="tap:amp-access.login-sign-in" specifies which action should be taken when clicking on the login button: login defines the property inside the amp-access json configuration, while sign-in defines the endpoint.
We use an amp-list to render existing comments to make sure that the latest comments appear if the page is loaded via the AMP Cache. As we don't know the number of comments in avance, we add an overflow button.
