Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
25 Million+
Websites using our plugins
Years of WordPress experience
WordPress tutorials
by experts

How to Add Google Web Stories to Your WordPress Site

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add Google Web Stories to your WordPress website?

Stories are a popular publishing format used by Instagram stories, Facebook stories, Snapchat, YouTube shorts, and more. Google Web Stories allow you to create and host this kind of content stories on your website.

In this article, we will show you how to easily add Google Web Stories to your WordPress website.

Adding Google Web Stories in WordPress

Here are the topics we’ll be covering in this article:

What Are Google Web Stories?

Google Web Stories are a popular short-form content style similar to the stories format used by social media platforms like Instagram, Facebook, Snapchat, and YouTube.

They might not always be called the same thing, but they all do the same thing.

They are tappable, interactive slides with rich media content like images, music, and videos. All these elements make them highly engaging.

Google Web Stories

Why Use Google Web Stories?

Using Google Web Stories allows you to bring the interactive story format to your own website. This gives you more control and flexibility and you are not dependant on a third-party platforms algorithm to show it to your audience.

Following are some more reasons for using Google Web Stories:

  • Google Web Stories lets you bring the story format to your website. You can create and publish interactive mobile-ready stories on your own site.
  • It is highly engaging, and engaged users are more likely to convert and spend more time on your WordPress website, which means more sales, conversions, and growth for your business and brand.
  • They use the AMP format, support structured data, and can even be monetized using Google AdSense.
  • Google Web Stories can be indexed and may appear in Google search results and Discover.
Stories in Google Discover

That being said, let’s take a look at how to easily add Google Web Stories to your WordPress site.

How to Add Google Web Stories into WordPress?

You can add Google Web Stories into WordPress by using the free Web Stories plugin. Created by Google, this plugin allows you to design and create beautiful web stories and easily publish them on your site.

First, you need to install and activate the Web Stories plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Web Stories is a free plugin developed and maintained by Google. It aims to popularize the web stories format and bring it to self-hosted, independent websites.

Head to the Stories » Dashboard page upon plugin activation to create your first story.

You can start by selecting one of the templates as a starting point for your story or clicking on the ‘Create New Story’ button to start from scratch.

Create new story

We recommend starting with a template as it gives you a good head start and is much easier for beginners.

Once you choose a template, the plugin will launch the story builder interface. It works similar to the popular drag-and-drop page builder plugins for WordPress.

story builder

You can simply point and click on any element to edit it or add new elements from the left column.

You can add audio, video, images, text, headings, stickers, emojis, and more.

Add elements to your web story

If you are using a template, you’ll see additional pages generated by the template at the bottom.

You can move between pages by clicking on them. You can also delete a page or add a new page if needed.

Manage pages in your story

You can also click on a page to set a background color or media.

When choosing a background color for your page, you’ll also find the option to add a call to action button.

Background color and call to action button

Simply add a URL and choose between dark or light themes.

Optionally, you can also add an icon to your call to action button and make the link sponsored / nofollow.

Similarly, if you have WooCommerce installed, then you can also display products.

Adding products in web story

However, you’ll first need to turn on the WooCommerce integration in plugin settings (we show you how to do this later in our article).

Once you are happy with the story, you can switch to the ‘Document’ tab in the left column to configure publish settings.

From here, you need to upload a publisher logo (your website logo or site icon would work fine here) and a poster image for your story.

Document settings

Ideally, a poster image should be in a 3:4 ratio and a minimum of 640 x 853 pixels.

Don’t forget to provide a title for your story and a description. This will help optimize your story for SEO and improve its discoverability.

Below that, you can choose how you want pages to be advanced. By default, pages will change in 7 seconds. You can change that or let users manually tap to change the page.

Additional story settings

Finally, you can choose categories and tags for your story.

This step is optional, but assigning your story to a category and adding some tags will help with the SEO.

You’ll notice a button labeled ‘M’ in the bottom right corner of the stories editor. Clicking on it will show the meta boxes added to WordPress by plugins installed on your website.

Add custom meta data to your stories

For instance, if you use the All in One SEO for WordPress plugin, then you will see the SEO settings.

From here, you can fill in the SEO Title, meta description, and schema settings for your web story.

Add SEO meta data to your web story

Similarly, if you have the WPCode plugin installed, then you can add custom code snippets you want to run when this story is displayed.

This is handy if you want to use custom tracking pixels for your stories.

WPCode meta box

You are now ready to publish your web story.

Simply click on the ‘Publish’ button at the top right corner of the screen.

Publish story

You will be shown a pre-publish checklist. If everything looks good, click the publish button to put your story live.

Displaying a Web Story in WordPress

The plugin will allow you to add your story to a new blog post when you publish it.

Add story to a post or page

However, you can add your story to any existing post, page, or sidebar.

Simply edit the post or page where you want to display the story and add the Web Stories block to the post editor.

Web stories block

Under the block settings, you can choose multiple stories, the latest ones, or a single one.

If you select the latest stories or multiple stories options, you will also see additional display options to display stories in a circle, carousel, list, or grid.

Stories block settings

Once satisfied with the post, click the ‘Update’ or ‘Publish’ button to save your changes.

You can now visit your WordPress blog to see your web stories in action.

Here is how it looked on the homepage of our test site in the multiple-story carousel format.

Web stories mobile preview

The web stories are their own custom post type within WordPress, which means you can display them just as you would any other page or post in WordPress.

For instance, they have their archive page that you can use as a landing page for visitors, or you could highlight them individually as you would with a WooCommerce product (which is also displayed using a custom post type).

Adding Integrations to Google Web Stories

The Web Stories plugin has a few built-in integrations you can use.

You can find these integrations on the Stories » Settings page.

Adding Google Analytics to Web Stories

First, you can add your Google Analytics profile ID here. This will allow you to track your story views in your Google Analytics reports.

Add Google Analytics measurement ID

If you are using MonsterInsights, you can find your Google Analytics tracking ID on the Insights » Settings page.

Your Measurement ID is displayed in the Website Profile section.

Find Google Analytics measurement ID in MonsterInsights

If you are not using MonsterInsights, then you can find the tracking ID in Google Analytics.

Just head to the ‘Admin’ tab and click ‘Data Streams.’

Google Analytics admin screen

Next, you will see your website and other profiles as data streams.

Click on your website profile to expand it.

Select website profile

On the next screen, you will see your website profile with the measurement ID.

Simply copy the Measurement ID and paste it in the Web Stories plugin settings.

Copy measurement ID

Adding Custom Fonts to Web Stories

If you want to use a specific font in Web Stories, then you’ll need to manually upload it to your website using FTP.

Simply upload the font file to /wp-content/ folder on your website. Once uploaded, your uploaded font location will be:

Don’t forget to replace with your own domain name and font-file-name.ttf with the actual font file name.

After that, copy and paste this URL into Stories » Settings in the ‘Custom Fonts’ section.

Add custom fonts

Adding Monetization Integrations in Web Stories

Web Stories supports Google AdSense and Google Ad Manager for monetization options.

Just select your monetization option and enter the required information. For instance, you will need a Publisher ID and Ad Slot ID for the ad unit.

Monetization options

Enable eCommerce Integrations for Web Stories

If you are using WooCommerce or Shopify to run your online store, then you can enable eCommerce support for Web Stories.

This will allow you to add products to your web stories.

Simply scroll down to the Shopping section on the Stories » Settings page and select your eCommerce platform from the dropdown menu.

eCommerce integration for WooCommerce

For WooCommerce, the plugin will automatically start showing your products.

For Shopify, you will need to provide your store address and generate an API access token.

Shopify integration

If you don’t have one yet, just click the link that says ‘learn how to get one,’ and you will be taken to instructions on how to generate your Shopify API token.

We hope this article helped you add Google Web Stories to your WordPress site. You may also want to see our guide on getting more traffic to your website or our expert picks for the best WordPress social media plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

1 CommentLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.