Allowing your visitors to engage with your content in a whole new way.

Just like Instagram stories, our story function allows you to create and share bite-sized pieces of content that can be viewed in a sequential order. This feature is perfect for showcasing your products, sharing behind-the-scenes glimpses of your business, or even just for fun and creative content.

Our story function is fully customizable to match your branding and aesthetic, so you can create a seamless experience for your visitors. And with our easy-to-use layers, you can create and publish your stories in just a few clicks.

With the rise of social media and the increasing importance of engaging content, our Instagram-like story function is the perfect addition to any Webflow website. And best of all, it's completely free and can be easily cloned and added to your site today.

So what are you waiting for? Try out our story function and take your website to the next level!

Code

<script>
 var Webflow = Webflow || [];
Webflow.push(function() {
// Fix for Safari
if (navigator.userAgent.includes("Safari")) {
document.querySelectorAll(".tab-button-demo").forEach((t)=>(t.focus=function(){const x=window.scrollX,y=window.scrollY;const f=()=>{setTimeout(()=>window.scrollTo(x,y),1);t.removeEventListener("focus",f)};t.addEventListener("focus",f);HTMLElement.prototype.focus.apply(this,arguments)}));
		}
function nextTab(){
if (!$(".uui-navbar06_menu-button").hasClass("w--open")) {
 $('.tab_next').trigger("click");
}
}
if (!$(".uui-navbar06_menu-button").hasClass("w--open")) {
var loop = setInterval(nextTab,5000);
}
 $('.tab-wrapper').on('click', '.tab_previous, .tab_next', function() {
if (!$(".uui-navbar06_menu-button").hasClass("w--open")) {
  clearInterval(loop);
  var direction = $(this).hasClass('tab_previous') ? -1 : 1;
  var tablinks = $(this).parent().find('.w-tab-menu');
  var index = tablinks.find('.w--current').index() + direction;
  index = index >= tablinks.children().length ? 0 : index;
  tablinks.find('.w-tab-link').eq(index).trigger('click');
  loop = setInterval(nextTab,5000);
 }
 });
});
</script>

How-to

1. Log in to your Webflow account and open the project you want to add the code to.
2. Click on the "Settings" icon in the left-hand sidebar and select "Custom Code" from the dropdown menu.
3. In the Custom Code section, scroll down to the "Before </body> tag" field.
4. Insert the code from below in this field. Make sure your code is properly formatted and error-free.
5. Click the "Save Changes" button to save your changes.

That's it! Your code should now be added to the before </body> tag of your Webflow website. Remember to preview your website and test that everything is working correctly before publishing your changes.

To change the height of the Story function:

1. Choose the "Tabs-demo" Tag.
2. Go to Size.
3. Change the height to your needs.

‍

Credits: Webflow Attributes @finsweet | Images @deathtostock