{"id":4256,"date":"2021-09-15T07:28:34","date_gmt":"2021-09-15T14:28:34","guid":{"rendered":"https:\/\/blog.amp.dev\/?p=4256"},"modified":"2021-09-15T07:28:34","modified_gmt":"2021-09-15T14:28:34","slug":"web-stories-call-to-action-buttons-get-an-upgrade","status":"publish","type":"post","link":"https:\/\/blog.amp.dev\/2021\/09\/15\/web-stories-call-to-action-buttons-get-an-upgrade\/","title":{"rendered":"Web Stories call to action buttons get an upgrade"},"content":{"rendered":"\n
\"\"<\/figure><\/div>\n\n\n\n

Web Stories are an excellent way to reach a new audience and direct them back to your own website. It has become popular for creators and publishers to utilize CTAs as a bridge between a Web Story and their website. To further enhance the reader experience we have upgraded CTAs<\/a> with more features for customization while creating a more consistent UX.<\/p>\n\n\n\n

The refreshed component will allow a reader to easily get additional content in the form of a link. Readers can reveal this content through a “swipe up” gesture, or a tap on the call to action element. A prompt to open the attachment will automatically be added at the bottom of every page that uses the component.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"
Outlink page attachments and inline page attachments allow creators and publishers to redirect their audience back to their own website<\/figcaption><\/figure><\/div>\n\n\n\n

Usage<\/h2>\n\n\n\n

Many creation tools have already rolled out support for (<amp-story-page-outlink><\/a>).  If you\u2019re building Web Stories yourself here are some notable changes we made to improve the reader experience:<\/p>\n\n\n\n

1. Introduced a primary CTA UI for Web Story pages that can open arbitrary external links (<amp-story-page-outlink><\/a>) and page attachments (<amp-story-page-attachment><\/a>). <\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"
Examples of the primary CTA UI for Web Story pages<\/figcaption><\/figure><\/div>\n\n\n\n

2. Next we made it easier to make a great theme to match your Story\u2019s branding. Now a creator can customize the CTA (ie, colors, icons etc).<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"\"
Various examples of Page Outlink customization<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Various examples of Page Attachment customization<\/figcaption><\/figure>\n\n\n\n

3. We intend to replace the functionality<\/a> of the <amp-story-cta-layer><\/code> without requiring changes to older Stories. Any existing Story that uses the <amp-story-cta-layer><\/code>  will visually look different since the custom styled element will be removed and replaced with an amp-story-page-outlink element. This added benefit requires no action on the creator or publisher.  <\/p>\n\n\n\n

Linked Content<\/strong><\/h2>\n\n\n\n

Use AMP Story Page Outlink<\/a> for a one-tap outlinking experience.  The URL is opened when the user activates the CTA button.  This functionality was previously handled by amp-story-page-attachment. We separated the functionality for a more clear creator experience.<\/p>\n\n\n\n

An example of the new one-tap outlinking experience<\/figcaption><\/figure>\n\n\n\n
An example of the swipe-up outlinking experience<\/figcaption><\/figure>\n\n\n\n

Demos<\/h2>\n\n\n\n

Check out the new design, API and implementation examples in our demo Story<\/a>.<\/p>\n\n\n\n

Get Involved<\/strong><\/h2>\n\n\n\n

Whether you like reading Web Stories, are interested in creating them yourself, or are building creation tools, do share your ideas and suggestions with the Web Stories working group. You can reach out to us on Github<\/a>, Slack<\/a> and can subscribe to a low traffic developer preview email group<\/a>. <\/p>\n\n\n\n

Posted by Ryan Warrender, Web Stories Product Manager, Google<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Web Stories are an excellent way to reach a new audience and direct them back to your own website. It has become popular for creators and publishers to utilize CTAs as a bridge between a Web Story and their website. To further enhance the reader experience we have upgraded CTAs with more features for customization […] Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":4258,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[32],"tags":[],"class_list":["post-4256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-stories"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/blog.amp.dev\/wp-content\/uploads\/2021\/09\/image4.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paQKQx-16E","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts\/4256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/comments?post=4256"}],"version-history":[{"count":9,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts\/4256\/revisions"}],"predecessor-version":[{"id":4274,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/posts\/4256\/revisions\/4274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/media\/4258"}],"wp:attachment":[{"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/media?parent=4256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/categories?post=4256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amp.dev\/wp-json\/wp\/v2\/tags?post=4256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}