amp-story-player not found in amp-module

[anjali89r]

I'm trying to embed Webstories in a non AMP page. I tried using the mode amp: 'hybrid' in my non AMP page but couldn't embed the story in the non AMP page. On further reading the AMP docs, I realized that Web Stories rely on the AMP Story Player, in the form of the element, to embed and play stories on non-AMP sites https://amp.dev/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/?format=stories
I tried the code using as shown in AMP doc, it's working fine then, but not loading on the initial page load even with <client-only>.
Is there any way to fix the issue.

[Beethoven]

Add this code to your tags.js inside lib:
tags.txt

This adds the necessary tags and a space in html.includes

I made a PR #257 #258

[anjali89r]

Thanks for the reply. So, I updated the tags.js file inside lib and added the webstory in my non AMP page as shown:
<amp-story-player style="width: 370px; height: 622px;"> <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>
It throws error: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Is this the right way or did I miss something here?

[Beethoven]

Thanks for the reply. So, I updated the tags.js file inside lib and added the webstory in my non AMP page as shown:
<amp-story-player style="width: 370px; height: 622px;"> <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>
It throws error: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Is this the right way or did I miss something here?

This works in an AMP page, for a non AMP page you have to include a js and css:

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

https://github.com/ampproject/amphtml/blob/main/spec/amp-story-player.md