amp-story-audio-sticker
Description
A sticker for users to click and unmute the story.
Required Scripts
<script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
Supported Layouts
Summary
An audio sticker component for publishers to put anywhere on their story for users to click to unmute the story.
Developers can choose to either choose one of the 4 default stickers or provide custom stickers. The sticker should be put inside an <amp-story-grid-layer>.
Attributes
size {string} optional
Size of the sticker. Accepted values:
- "large": 180 x 180 px
- "small": 120 x 120 px
Default value: "small", which would be used if the input value is invalid or is not provided.
sticker {string} optional
Default value: "headphone-cat", which would be used if the input value is invalid or is not provided.
A list of premade stickers to use:
| Accepted Value | Pre-tap Image | Post-tap Image |
|---|---|---|
| "headphone-cat" |  |
 |
| "tape-player" |  |
 |
| "loud-speaker" |  |
 |
| "audio-cloud" |  |
 |
sticker-style {string} optional
Default value: none
Extra premade styles of the sticker to use:
| Accepted Value | Description | Header 3 |
|---|---|---|
| "outline" | Adds a border around the provided sticker image. | |
| "dropshadow" | Adds a dropshadow around the opaque part of the provided sticker image. |
Customize Sticker Style via CSS Variables
--story-audio-sticker-outline-color: Color of the sticker outline.--story-audio-sticker-dropshadow-color: Color of the sticker drop shadow.
If the CSS variables are set on story level, the color would be applied to all stickers in the story. If the CSS variables are set on story page or sticker level, it would only be applied to the sticker on specific story page or the specific sticker.
If not set, the color of either style would be white.
Children Nodes
<amp-story-audio-sticker-pretap> optional
Sticker shown before a user tap. Takes any html code that can be rendered as a sticker, e.g. <amp-img>, <svg>, general elements with CSS animation, etc.
<amp-story-audio-sticker-posttap> optional
Sticker shown after a user tap. Takes any html code that can be rendered as a sticker, e.g. <amp-img>, <svg>, general elements with CSS animation, etc.
Example: Premade Stickers
<amp-story-grid-layer> <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker> </amp-story-grid-layer>
Example: Custom Stickers
<amp-story-grid-layer>
<amp-story-audio-sticker size="large" sticker-style="dropshadow">
<amp-story-audio-sticker-pretap>
<amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
</amp-story-audio-sticker-pretap>
<amp-story-audio-sticker-posttap>
<amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
</amp-story-audio-sticker-posttap>
</amp-story-audio-sticker>
</amp-story-grid-layer>
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Go to Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Go to GitHub