AMP story close button

Question

I would like to add a close button to my AMP stories. I don't want to use amp-story-play if it's possible. I checked the source code and I found a close button, but it's hidden.

...
<button class="i-amphtml-story-close-control i-amphtml-story-ui-hide-button i-amphtml-story-button" aria-label="Close"></button>
...

When I removed the i-amphtml-story-ui-hide-button class then I can see the X on the story

So my plan to make this permanent somehow. What I tried:

• create a js event to modify the class when the page is loaded, it's returning null so I can't modify the class in time
• I modified the official source code, but I have no idea how to generate the amp-story-system-layer.js ... I tried with amp build, amp release, run the circle ci/cd commands, but it won't generate the js file that I need

Does anyone have an idea how to add a close button to the story?

Answer 1

Hope this helps !!

<amp-story standalone ...> 
 ...content
 <amp-story-exit layout="nodisplay">
  <div exit-label>
    <span className="exit-text">Close story</span>
    <span className="exit-icon">X</span>
  </div>
 </amp-story-exit>
</amp-story>