Integrate stories in AMP pages

Web Stories are a full-screen immersive content experience that user’s tap or click through at their own pace. They live on the open web with their own URL, making them easily shareable. This guide teaches you how to integrate Web Stories in an AMP valid page and surface them to readers.

Include the amp-story-player

Web Stories rely on the amp-story-player component to integrate and play stories on AMP valid sites. Implement the amp-story-player by including the custom script in the head of the document.

<script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>

Then placing the amp-story-player element HTML in the desired location within your page’s <body>.

<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script
    async
    custom-element="amp-story-player"
    src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"
  ></script>
</head>
<body>
  <amp-story-player layout="fixed" width="360" height="600">
    <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/">
      <img src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg" width="360" height="600" loading="lazy" data-amp-story-player-poster-img alt="...">
      Stories in AMP - Hello World
    </a>
  </amp-story-player>
</body>

Open this snippet in playground

Display a Web Story

Link to a Web Story by including an <a> tag with the href attribute pointed to the desired Web Story URL within the <amp-story-player> element. The href endpoint may be the URL of a hosted Web Story or a relative path. Place the title of the story within the <a> tags.

Specify multiple Web Stories

Include the desired number of <a> tags, with each href attribute pointed to the desired Web Story URL, within the <amp-story-player> element.

<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script
    async
    custom-element="amp-story-player"
    src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"
  ></script>
</head>
<body>
  <amp-story-player layout="fixed" width="360" height="600">
    <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s1"></a>
    <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s2"></a>
    <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s3"></a>
  </amp-story-player>
</body>

Open this snippet in playground

Navigate between stories

Users on mobile devices may use the “swipe” gesture to navigate to the next story. Desktop users must click through an entire Web Story before they are able to view the next.