How to add Google Web Stories to your WordPress site

Want to add Google Web Stories to your WordPress site?

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

In this article, we’ll show you how to easily add Google Web Stories to your WordPress site.

What is Google Web Stories?

Stories are a popular short-form content style used by social media platforms like Instagram, Facebook, Snapchat, and even YouTube. They’re not always called the same thing, but they all do the same thing.

They are touchable interactive slides with rich media content such as images, music and videos. All these elements make them very attractive.

Google Web Stories

Engaged users are more likely to convert and spend more time on your WordPress site, which means more sales, conversions and growth for your business and brand.

However, creating stories on third-party social platforms limits your ability to reach larger audiences.

Google Web Stories lets you bring the same story format to your own website. Allowing you to create highly engaging stories from your WordPress dashboard and publish them to your website.

Google Web Stories can be indexed and can appear in Google search results and Discover.

Stories on Google Discover

They use the AMP format, support structured data, and can even be monetized with Google AdSense.

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

Adding Google Web Stories to WordPress

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

Web Stories is a free app developed and maintained by Google. It aims to popularize the web story format and bring it to stand-alone, independent websites.

After activating the plugin, go to Stories » Dashboard page to create your first story.

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

Create a new story

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

After selecting a template, the app will launch the story builder interface. It is similar to popular drag and drop page builder plugins for WordPress.

history maker

You can simply point and click on any item to edit it, or add new items from the left column.

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

Add items to your web history

If you’re using a template, you’ll see additional pages generated by the template below.

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

Manage your history pages

You can also click on the page to set the 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

Just 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.

Likewise, if you have WooCommerce installed, you can also display products.

Adding products to web history

However, you must first enable WooCommerce integration in the plugin settings (we show you how to do this later in our article).

Once you’re happy with the story, you can go to the Document tab in the left column to adjust the publishing settings.

From here, you’ll need to upload a publisher logo (your website logo or website icon will work well here) and a background image for your story.

Document settings

Ideally, the wallpaper image should have a 3:4 aspect ratio and a minimum of 640 x 853 pixels.

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

Below that, you can choose how you want to develop the pages. By default, pages will change every 7 seconds, you can change this or allow users to manually tap to change the page.

Additional story settings

Finally, you can choose categories and tags for your story. This step is optional, but categorizing your story and adding some tags will help with SEO.

Now you are ready to publish your web story. Just click the Publish button in the top right corner of the screen.

Publish the story

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

Web Story Display in WordPress

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

Add a story to a post or page

However, you can also 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.

Blocking web stories

Under block settings, you’ll be able to choose multiple stories, recent stories, or a single story.

If you select recent stories or multiple stories options, you’ll also see additional display options to display stories in circle, carousel, list, or grid options.

Story blocking settings

Once you’re happy with the post, click the Update or Publish button to save your changes.

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

Here’s how it looks on the home page of our test site in a multi-story carousel format.

Mobile preview of web stories

Web Stories are their own special post type within WordPress, which means you can display them just like any other page or publish to WordPress.

For example, they have their own archive page that you can use as a landing page for visitors, or you can have them stand out as a WooCommerce product (which is also displayed via a custom post type).

Adding integrations to Google Web Stories

The Web Stories app comes with several built-in integrations that you can enable.

You can find these integrations Stories » Settings p.

Adding Google Analytics to Web Stories

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

Web History Google Analytics

Note: Web Stories does not support the newer GA4 Google Analytics tracking. It only supports Universal Analytics tracking ID that starts with “UA”.

If you use MonsterInsights, you can find your Google Analytics tracking ID under Insights » Settings p.

GA profile ID

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

Just go to the Admin tab and click on Property Settings.

Google Analytics tracking ID in the GA dashboard

Adding custom fonts to web stories

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

Just upload the font file /wp-content/ folder on your site. Once uploaded, the location of your uploaded font will be:

http://example.com/wp-content/font-file-name.ttf

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

You can then copy and paste this URL Stories » Settings in the custom fonts section.

Add custom fonts

Adding monetization integrations to web stories

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

Select your monetization option and enter the required information. For example, for an ad unit you will need a Publisher ID and an Ad Slot ID.

Monetization options

Enable e-commerce integration for web stories

If you use WooCommerce or Shopify to run your online store, you can enable e-commerce support for Web Stories.

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

Just scroll down to the “Purchase” section Stories » Settings page and select your e-commerce platform from the drop-down menu.

Ecommerce integration for WooCommerce

For WooCommerce, the app will automatically start displaying your products.

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

Shopify integration

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

We hope this article helped you add Google Web Stories to your WordPress site. You can also see our guide on getting more traffic to your website or see our tips for tracking conversions in WordPress.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us Twitter: and Facebook.

The post How to Add Google Web Stories to Your WordPress Site appeared first on WPBeginner.

Leave a Reply