How to Embed Web Story in your website or in any other webpage.

Share

Embedding Web Stories | How to embed single webstory | embed single wordpress webstory

Are you looking for an engaging and visually stunning way to share your content with your website visitors? Look no further than web stories! Web stories, also known as AMP stories, are immersive and interactive visual stories that can be embedded in your website or any other webpage. In this blog post, we will walk you through the steps of embedding a web story in your website.


Step 1: Add the necessary JavaScript to your website

The first step in embedding a web story is to add the necessary JavaScript to your website. You will need to add the following code above the </head> tag of your website:

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>

This code is required for the web story to function properly on your website.

Related  How to Change Password of MySQL || How to reset MySQL Password

Step 2: Place the web story player where you want to display the story

The next step is to place the web story player where you want to display the story. To do this, simply copy and paste the following code where you want the web story to appear:

<amp-story-player layout="fixed" width="300" height="533" amp-cache="cdn.ampproject.org">
<a href="Story_URL">
<img src="Story_poster_image" width="300" height="533" loading="lazy" data-amp-story-player-poster-img>
</a>
</amp-story-player>

Replace Story_URL with the URL of your web story and Story_poster_image with the URL of the poster image for your web story. The poster image is the image that will be displayed before the web story is played.

Related  write a code in HTML for form that send input text string from the same page

And that’s it! With these two simple steps, you can embed a web story in your website and provide your visitors with an engaging and interactive way to consume your content.

web stories are a great way to make your website content more engaging and visually appealing. By following the steps outlined in this blog post, you can easily embed a web story in your website and provide your visitors with an immersive and interactive experience.


Share

Leave a Reply

Your email address will not be published. Required fields are marked *

Top 5 Most Expensive Domains Ever Sold 4 Must-Try ChatGPT Alternatives: Perplexity AI, BardAI, Pi, and More! Types of Trading Techniques in the Stock Market. ChatGPT app now available in India this AI chatbot can help you make your life more productive. What is wrong with following function code?