StoryCurrent is your go-to platform for creating and sharing stunning AMP Web Stories—entirely for free! While others charge premium prices for similar services, StoryCurrent democratizes storytelling by offering an accessible, user-friendly solution to empower content creators, bloggers, and website owners.
What We Offer:
Custom AMP Web Story Code Generator:Build engaging, interactive stories effortlessly with our free custom code generator. No technical expertise required!
Free AMP Story Player Widget:
Seamlessly integrate beautifully designed AMP stories into your website using our customizable player widget, absolutely free.Why Choose StoryCurrent?
Completely Free: No hidden costs, no subscriptions—just free tools to help you share your stories. High-Quality Features: Get access to tools and features that others charge exorbitantly for. SEO-Friendly Web Stories: Optimize your stories for search engines to drive traffic and captivate your audience. Quick and Easy Setup: Streamlined processes that save you time while delivering professional results. Customizable Widgets: Tailor the story player widget to match your site’s look and feel. Who Can Benefit? Content Creators: Amplify your storytelling with visually captivating AMP stories. Bloggers: Boost your blog’s interactivity and audience engagement. Website Owners: Enhance your site’s appeal with sleek, modern story integration. Why Wait? Start for Free Today! Whether you’re a storyteller, a marketer, or just someone looking to enhance your website, StoryCurrent is here to make high-quality AMP Web Stories accessible to all.Click StoryCurrent tab above to create, share, and engage—without spending a dime.
Click on generated code to copy it
How to Use Generated Code
- If you are using Plus Ui 3, (see the
demo)
then post the generated code inside "html view" in the post.
- Post title should include Story in the end so that permalink can be story.html
- Label of the post should be "Story"
- Enable Web Story Amp: Go to Layout, click "Theme Designer" link present inside Layout Section on top right corner, click "Advanced", scroll to AMP Experimential and on Amp Web Story move 1px to 3px
- if you want whole code then copy following code,
- change the title
- place post link in cannonical url #
- place generated code before where directed inside below given code.
You can buy this blogger template: Buy Nowor if you are using any other platform that supports web stories than follow the process as described.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<title>Stories in AMP - Hello World</title>
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="#">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
amp-story {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ";
}
amp-story-page * {
color: white;
text-align: center;
}
[template=thirds] {
padding: 0;
}
</style>
</head>
<body>
<!-- Place the generated code here -->
</body>
</html>
- Article Schema Markup Generator
- Problem Practice Quiz Schema Markup Generator
- The Education Q&A Schema Generator
- Movies List Schema Markup Generator
- Review Snippet Schema Markup Generator
- Any Image to Webp Converter: Free, No Limits & Lightening Fast
- Fastest Meta Tags Generator Tool: Seo Optimisation
- Smart Seo Tools Collection
<script async src="https://cdn.ampproject.org/amp-story-player-v0.js"></script>
<link href="https://cdn.ampproject.org/amp-story-player-v0.css" rel="stylesheet" type="text/css">
<div class="circular-entry-point">
<div class="entry-points">
<div class="entry-point-card-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDTADmMs7sbGsMnhEqqVBfy4Qsc3f6YC_UZCGVantbtYOCCYydSUrAEkMaFS4jjjNwJ05z5e2SXj5ettQYnpHT50e0q7UJLML0T2S_PQMZenMa9KDxUo9KChXJ-BNN7WAWAI7g4Bw3MxH2u9z-OekJuM71719MVjxbZOQQKU3VwapbwYpBDI3oFRu7WrE/s1600-rw/1.jpg" style="border-color:#FF6F32">
<span class="entry-point-card-title">History of English Literature</span>
</div>
<div class="entry-point-card-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPQKK22OdK0mLmAeLRZNn_O33BH52CSsn2fClQDwdg2I6kS3RiBJ_UJU_xMNLzAqDK_UW45wAkC8nN_mdHVkbQMZRMXruCK6K8e3umqg2QD_1wqZJXXpLBAMH3pKH4xG7epPuhSBypcHcp_SM5bIKLsUEKH2_8k0YKy4HFWbPqNyqsF2Wy6N0LybjiOpI/s1600/1.jpg" style="border-color:#E6AD1C">
<span class="entry-point-card-title">24 Hours in New York City</span>
</div>
<div class="entry-point-card-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFEggQH_k-PvMeQ7YpH5aMbgzG2ddSKCKoQO_agGZz3Hfpt8AIJgvZry-E4Tu1poFK_kETybkJyvFNZOYb3w5Q_vvYXEht8dIh6_bHSKgBJ6y5HB6xCkyJKQKmadhgAisUnGiA68xqb1fp48cDM0UjKSuXkGvRNCEihvEMuqpbJVlEYzqL9a_A0MXtKcU/s1600-rw/output%20%2833%29.jpg" style="border-color:#466FFF">
<span class="entry-point-card-title">The Next King of the Sea</span>
</div>
<div class="entry-point-card-container">
<img src="https://assets.codepen.io/1780597/2.png" style="border-color:#4CA47C">
<span class="entry-point-card-title">Spark a Passion for Reading</span>
</div>
</div>
</div>
<div class="custom-popup">
<div class="popup-content">
<button class="close-popup">×</button>
<amp-story-player class="my-player">
<script type="application/json">
{
"behavior": {
"autoplay": false,
"pageScroll": false
},
"controls": [{
"position": "start"
}]
}
</script>
<a href="https://www.classwithmason.com/2024/12/history-of-english-literature-story.html"></a>
<a href="https://www.classwithmason.com/2024/12/courses-job-prep-centre-story.html"></a>
<a href="https://www.classwithmason.com/2024/12/how-to-improve-english-story.html"></a>
<a href="https://wsdemos.uc.r.appspot.com/ampfest/s4"></a>
</amp-story-player>
</div>
</div>
<style>
.entry-point-card-title {
margin-top: 10px;
font-weight: 500;
font-family: Poppins;
font-size: 11px;
line-height: 15px;
text-align: center;
display: inline-block;
color: #fff;
}
.custom-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.custom-popup.show {
display: flex;
}
.popup-content {
position: relative;
background: black;
padding: 2px;
max-width: 9000px;
width: 100%;
text-align: center;
}
.close-popup {
position: absolute;
top: 5px;
left: 20px;
z-index: 999999;
background: none;
color: white;
border-radius:50px;
border: none;
font-size: 40px;
cursor: pointer;
}
amp-story-player.my-player {
width: 380px;
height: 600px;
margin: 0 auto;
}
.entry-points {
width: 100%;
display: flex;
overflow-x: auto;
padding: 0px 10px;
padding-bottom: 10px;
}
.entry-points::-webkit-scrollbar {
display: none;
}
.circular-entry-point img {
cursor: pointer;
width: 100px;
height: 100px;
border-radius: 100%;
background-clip: content-box;
border: 2px solid;
padding: 3px;
}
.entry-point-card-container {
position: relative;
min-width: 120px;
transition: transform 0.3s;
}
</style>
<script>
const player = document.body.querySelector("amp-story-player");
const popupEl = document.querySelector(".custom-popup");
const closePopupBtn = document.querySelector(".close-popup");
if (player.isReady) {
initializeCarousel();
} else {
player.addEventListener("ready", () => {
initializeCarousel();
});
}
function initializeCarousel() {
const stories = player.getStories();
const thumbnails = document.querySelectorAll(
".entry-point-card-container img"
);
thumbnails.forEach((img, idx) => {
img.addEventListener("click", () => {
player.show(stories[idx].href);
player.play();
popupEl.classList.add("show");
});
});
}
closePopupBtn.addEventListener("click", () => {
player.pause();
popupEl.classList.remove("show");
});
</script>
Welcome to Free AMP Web Story Code Generator
In today’s fast-paced digital world, attention-grabbing and visually engaging content is essential for retaining audiences. Web stories are one such content format that has risen in popularity, especially in mobile-first environments. AMP (Accelerated Mobile Pages) Web Stories are highly interactive, immersive, and optimized for quick loading on mobile devices, making them a valuable tool for content creators, businesses, and marketers alike. The Free AMP Web Story Code Generator Online by Class with Mason offers an easy and accessible way for anyone to create AMP web stories without needing advanced coding skills.
This tool simplifies the process of generating AMP-compatible code for web stories. By inputting basic information such as titles, images, text, and publisher details, users can instantly create a fully functional AMP web story. This eliminates the need to manually write complex AMP code, making it accessible to a wider audience, including educators, marketers, bloggers, and anyone interested in creating engaging stories that load quickly and look great on mobile devices.
The Significance of AMP Web Stories in the Digital Landscape
AMP Web Stories are a revolutionary way to present content. With the increasing consumption of content on mobile devices, traditional web pages are often slow to load, which can result in high bounce rates and poor user experience. AMP addresses these issues by ensuring that content loads quickly while still providing a visually rich experience.
Web stories, designed specifically for AMP, take the best elements of interactive storytelling, combining text, images, and video into short, engaging, and visually appealing pages. These stories provide content in a format that is easy to consume on mobile devices, allowing users to swipe through stories in a manner similar to social media apps.
The Free AMP Web Story Code Generator by Class with Mason ensures that this powerful content format is accessible to everyone, regardless of their technical knowledge. This tool enables users to effortlessly create these stories, and it does so with a user-friendly interface that generates valid AMP code automatically. Let’s delve deeper into the benefits and features of this tool.
Benefits of Using the Free AMP Web Story Code Generator by Class with Mason
1. Simplifies the Web Story Creation Process
The primary benefit of using the Free AMP Web Story Code Generator is the simplicity it offers. Creating a web story from scratch requires knowledge of AMP HTML, CSS, and JavaScript. This can be time-consuming and overwhelming, especially for those who do not have a coding background. The Class with Mason tool eliminates this challenge by automating the code generation process.
All you need to do is enter basic information such as:
- Story Title
- Publisher Name
- Publisher Logo URL
- Poster Portrait URL
Once the details are entered, users can proceed to add story pages, including text, images, and page titles. The tool automatically generates the required AMP HTML code for each page, saving time and reducing the complexity of manual coding.
2. User-Friendly Interface
Another key benefit is the intuitive and user-friendly interface. The tool is designed with simplicity in mind, making it easy for users to navigate and create web stories quickly. The input fields are clearly labeled, and the design is clean and straightforward. Users can add new pages with a single click, and the tool automatically updates the AMP code with each new addition.
For those who are new to creating web stories, this user-centric approach eliminates the intimidation factor often associated with coding. Instead of worrying about the syntax and structure of AMP HTML, users can focus on the content and design of their stories, resulting in a more enjoyable experience overall.
3. Generates AMP-Compliant Code
One of the most important aspects of AMP web stories is their compliance with AMP standards. AMP stories require specific tags, attributes, and elements to ensure proper functionality across different devices and browsers. The Class with Mason AMP Web Story Code Generator ensures that the generated code is fully AMP-compliant, eliminating the risk of errors that could occur if users were to write the code manually.
This means that once the code is generated, users can be confident that their web stories will load quickly, be responsive across various screen sizes, and offer a seamless user experience. Since AMP is designed for faster loading speeds, web stories created with this tool will perform optimally, even on slower internet connections.
4. Saves Time and Effort
Creating AMP web stories from scratch can be a tedious process. It requires a solid understanding of HTML, CSS, and JavaScript, and even then, ensuring that the code is optimized for mobile devices and AMP standards can be challenging. With the Free AMP Web Story Code Generator, all of this is taken care of automatically.
Instead of spending hours writing and debugging code, users can generate a fully functional web story in just a few minutes. The tool does the heavy lifting, allowing users to focus on the creative aspects of their stories, such as the content, visuals, and layout. This time-saving feature is particularly valuable for content creators who need to produce multiple stories quickly and efficiently.
5. Customizable and Flexible
While the Free AMP Web Story Code Generator makes it easy to generate code, it also offers a level of flexibility that allows users to customize their stories. Users can control various aspects of their web story, such as the page title, images, and text, to align with their brand, aesthetic, or narrative.
In addition, the tool lets users add multiple pages to a single story. Each page can feature a unique title, image, and text, allowing for a highly customizable and dynamic storytelling experience. Whether you're creating a product showcase, an educational piece, or a personal narrative, this flexibility allows you to build a story that suits your needs.
6. Ideal for Non-Technical Users
Not everyone who wants to create AMP web stories has a technical background. For bloggers, marketers, and educators, learning the intricacies of AMP HTML might not be feasible, especially if their primary focus is on content creation rather than web development. The Free AMP Web Story Code Generator by Class with Mason is an ideal solution for these users.
By abstracting the technical complexities of AMP, this tool makes it possible for non-technical users to create professional-looking and high-performance web stories. The drag-and-drop nature of adding content and generating code ensures that anyone can produce stunning web stories without the need for coding knowledge.
7. Encourages Creative Storytelling
One of the greatest strengths of AMP web stories is their ability to present content in a visually rich and interactive way. With elements like images, videos, and text, AMP stories allow users to engage their audience through immersive storytelling. The Free AMP Web Story Code Generator supports this creative freedom by providing an easy way to structure and format web stories.
Whether it's creating a step-by-step guide, showcasing a product, or telling a story through visuals, the generator empowers users to design their content in a way that captures attention and holds it. With minimal effort, users can produce visually compelling content that stands out in the crowded digital space.
8. Easily Shareable and Accessible
Once the AMP web story code is generated, sharing it with others is incredibly easy. Users can copy the AMP code to their clipboard and embed it directly into their website or blog. Since AMP stories are designed to load quickly and look great on mobile devices, they are ideal for sharing across social media platforms and other channels where mobile-first content is essential.
Furthermore, AMP stories are optimized for SEO, meaning that they have a better chance of ranking well in search engines. This is particularly beneficial for marketers and businesses looking to improve their visibility online. By using the Free AMP Web Story Code Generator, users can ensure that their content reaches a wider audience and engages them effectively.
Conclusion
The Free AMP Web Story Code Generator by Class with Mason is a powerful tool that simplifies the process of creating AMP web stories. It is ideal for content creators who want to produce interactive and visually engaging stories without delving into the complexities of coding. By offering a user-friendly interface, automatic AMP-compliant code generation, and customization options, this tool enables users to quickly create professional-quality web stories.
Whether you're a marketer, blogger, educator, or business owner, the Free AMP Web Story Code Generator provides the tools you need to craft dynamic, mobile-optimized content that resonates with your audience. With its time-saving features, flexibility, and creative potential, this tool is a valuable resource for anyone looking to elevate their online presence through AMP web stories.
