AMP

Important: this documentation is not applicable to your currently selected format websites!

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" Cat Pre-tap Cat Post-tap
"tape-player" Player Pre-tap Player Post-tap
"loud-speaker" Speaker Pre-tap Speaker Post-tap
"audio-cloud" Cloud Pre-tap Cloud Post-tap

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. Image 2
"dropshadow" Adds a dropshadow around the opaque part of the provided sticker image. Image 4

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>
Need more help?

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