StorifyMe

Native Webflow elements render layouts, Webflow CMS content and video embeds. None of them produces a full-screen, tappable story. Building a story player with product tagging and analytics in custom JavaScript is a project in itself. StorifyMe supplies that player as a hosted widget you paste onto the page.

Connecting the two puts a story carousel or a single story on any Webflow page through two pasted code snippets. Editors create, swap and schedule stories in StorifyMe, and the published page picks up the changes without a republish, because the widget fetches its story list from StorifyMe when the page loads. With the Data API, webhooks and your own middleware, a new CMS item can trigger a generated story through StorifyMe's Assistant API.

StorifyMe's own use-case pages target retail, publishing, banking, telecom and sports teams, and its partner program recruits agencies and freelancers who build client sites. Developers come in only when a team wants stories generated from CMS content or form submissions.

How to integrate StorifyMe with Webflow

What is StorifyMe? StorifyMe is a platform for Stories, Shorts and interactive content on apps and websites, operated by StorifyMe GmbH. Its editor adds polls, quizzes, product tags, lead forms, countdowns and swipe-ups to full-screen, tappable stories. Widgets, a REST API and web and mobile SDKs deliver that content to a site or app.

Teams pair the two when editorial or product content needs a mobile-native format that stock Webflow elements can't produce. A news site runs a story bar above the fold; a retailer tags products inside vertical video. On Webflow, each widget lives in a Code Embed element and takes its content from the StorifyMe dashboard. StorifyMe has no app in the Webflow Marketplace, so every route below runs through custom code.

The integration works three ways. Code Embed elements display StorifyMe widgets on any page from two pasted code snippets, with no scripting of your own. The StorifyMe Web SDK single-item embed places one story or short with a script tag and a custom element. The Webflow and StorifyMe APIs generate stories from CMS content and manage scripts, but require server-side development. Start with Code Embed elements unless you need stories created automatically.

Add StorifyMe widgets with Code Embed elements

StorifyMe's documented Webflow path pastes a widget's two code snippets into your site. The widget definition code loads the player once; the widget embed code marks where a carousel or single story renders. StorifyMe's own Webflow embed guide covers this route. It was last updated in October 2023 and tells you to pick an Embed code option from a Components menu, so expect Webflow's current menu names to differ: today you add a Code Embed element from the Add panel. You need a Core, Growth, Agency or Freelancer Workspace, or an active Site plan, to use custom code. StorifyMe's widget docs name two widget types: Carousel, which shows multiple stories, and Single story.

To set up the integration:

1. In StorifyMe, open My Stories, hover over a story, click Publish and toggle Published Status on.
2. Go to Stories > Widgets, click +Create widget, name it and set its tags. The widget shows published stories that carry a matching tag.
3. Click the share icon on the widget and copy both the widget definition code and the widget embed code.
4. In Webflow, add the definition code once to the site head and the embed code where the widget belongs (see the sub-methods below).
5. Publish the site. Custom code shows in preview but goes live only on publish.

Once the snippets are live, these parts of the integration run from the StorifyMe dashboard:

• Interactive elements: You edit polls, quizzes, product tags, CTA buttons, lead forms, countdowns and swipe-ups inside each story in StorifyMe, with no change to the Webflow page.
• Story changes: StorifyMe's integrations page says you can add, remove or replace stories without additional code.
• Tag filtering: Widget tags decide which stories a widget shows, and StorifyMe's widget guide suggests using them to skip out-of-stock products in shoppable stories.
• Analytics: Built-in reports split results by date, story group, device and country, and StorifyMe also connects to Google Analytics, Hotjar, the Facebook Pixel and the Pinterest Pixel.

None of these changes needs a Webflow republish. You republish only when you add, move or remove a widget embed, since custom code goes live on publish.

Add the widget definition code to the site head

The definition code is the same for every widget and goes at the bottom of <head>. StorifyMe's guide says to add it only once; the site-wide Head code field does that for every page. The head and body code fields come in site-wide and page-level versions, and each allows up to 50,000 characters, which the player script sits well under.

To add it site-wide:

1. Open Site settings > Custom code.
2. Paste the widget definition code into Head code.
3. Click Save changes, then publish the site.

For a single page, open Page settings and paste into Inside head tag instead; page-level code applies only to that page and loads after site-wide code. Pick one location, since StorifyMe says the definition code is added only once.

Because this script runs on every page, check what it does to visitors before you add it. We read StorifyMe's Web SDK bundle, which the storifyme-elements.min.js loader pulls in with async and defer so it doesn't block HTML parsing. It contains no session-replay or third-party tracking library such as Sentry, Hotjar, Microsoft Clarity or the Facebook Pixel. It does store which stories a visitor has seen in localStorage, load Google Fonts from fonts.googleapis.com unless the widget configuration turns that off, and pass Google Analytics events sent by a story to your page's own gtag or dataLayer. Stories play in iframes served from StorifyMe's hosts, so analytics you switch on inside StorifyMe run there. Its privacy settings let you disable story analytics, stop collecting anonymized IP addresses and show a cookie consent dialog in stories.

Place a widget embed code with a Code Embed element

Each widget has its own embed code, and it goes wherever the carousel should render. The Code Embed element accepts HTML, CSS and JS up to 50,000 characters, with no server-side languages. It shares the paid Workspace or Site plan requirement with head code. The code renders on preview, publish and export, but won't run in expanded canvas view.

To place the widget:

1. Open the Add panel and drag a Code Embed element onto the canvas where the stories should appear.
2. Paste the widget embed code and click Save and close.
3. Publish the site.

To change the code later, select the element and click Open code editor in the Settings panel under Code Embed settings.

Embed widgets inside CMS rich text

Article templates can carry a StorifyMe widget inside a rich text field, next to a Collection List of related posts. The widget embed code goes into an HTML embed in the item's rich text, while the definition code still loads from the site head. This suits a post that opens a related story carousel mid-copy. Webflow's CMS custom code guide warns that this code isn't validated, so a broken snippet can break the page in preview, comment mode or on publish.

To add it:

1. Open the CMS panel, select a Collection with a Rich text field, then open the item.
2. Place the cursor in the rich text field, press Enter, then click the plus icon and choose HTML embed.
3. Paste the widget embed code, click Save & Close, then publish.

Keep the definition code in the site head so each rich text embed has a player to render into.

Embed a single story with the Web SDK

For one story or short, StorifyMe's single-item embed skips the widget. It loads one script and a custom element carrying your account and story IDs. It doesn't support tags, segments or personalization. An iframe alternative exists for restricted environments, but JavaScript event listeners are limited inside it.

To embed a single story:

1. Add a Code Embed element and paste a script tag that loads https://cdn.storifyme.com/static/web-components/storifyme-elements.min.js.
2. Below it, add the <storifyme-story> element with your own account and story values.
3. Click Save and close, then publish the site.

The pasted code looks like this:

<script src="https://cdn.storifyme.com/static/web-components/storifyme-elements.min.js"></script>
<storifyme-story account="<ACCOUNT_ID>" story="<STORY_ID>" env=""></storifyme-story>

Set init="manual" on the element and call .load() to defer loading until you choose. The single-story element exposes onClick, onView and onClose events for page scripts.

Build with the Webflow and StorifyMe APIs

Server-side code links the two systems when you want stories generated from Webflow content. A Webflow webhook fires on CMS item creation or form submission, and your middleware calls StorifyMe's Assistant endpoint to build a story from a template. StorifyMe's REST API authenticates with an API key sent alongside your account ID, and its reference documents no OAuth flow.

Four interfaces carry this integration:

• StorifyMe REST API: The StorifyMe developer docs cover stories, shorts, widgets, templates and Assistant operations, authenticated with x-storifyme-access-token and account-id headers.
• Webflow Data API: The Webflow API creates CMS collection items and lists form submissions for your middleware.
• Webflow webhooks: Webflow webhooks send real-time events such as collection_item_created and form_submission to a URL you choose.
• StorifyMe webhooks: StorifyMe's API reference lists story events for created, updated, published, unpublished, deleted and export finished, switched on under Settings > API Settings > Webhooks as its webhook setup guide shows. Story event payloads carry the story ID, not poll results or lead form answers.

Data therefore flows mainly from Webflow toward StorifyMe, while StorifyMe's story events let your side react when a story is published or changed.

Generate a story when a CMS item is created

A collection_item_created webhook, a signature check and one StorifyMe call turn each new article into a story. StorifyMe's Smart Stories guide has you define Dynamic Data, map placeholders into a story and save it as a template. The template ID comes from Templates > Preview template. The guide writes the endpoint as /api/assistant/smart/story, but StorifyMe's API reference documents it as POST /assistant/smart/stories under the https://storifyme.com/api/v1 base URL, with a slides array that takes your template ID and mapped data. Follow the reference. StorifyMe's pricing page sells the Assistant as an add-on and lists Dynamic Data on its Enterprise plan, so confirm access before you build.

To implement this:

1. Register the webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks, triggerType: collection_item_created and your middleware URL, using a token with the sites:write scope.
2. On each request, verify x-webflow-signature as an HMAC-SHA256 of timestamp + ":" + JSON.stringify(body), and reject timestamps older than 5 minutes.
3. Read payload.fieldData from the envelope, or fetch the full item with GET /v2/collections/{collection_id}/items/{item_id}.
4. Call POST https://storifyme.com/api/v1/assistant/smart/stories with the x-storifyme-access-token and account-id headers, passing a slides array with your template ID and mapped fields.

Site-token webhooks created after April 14, 2025 each carry their own secret, while OAuth webhooks sign with the app's client secret. The same flow works with triggerType: form_submission, whose payload includes name, data, formId and submittedAt.

Register the player script with the Custom Code API

Agencies managing many Webflow sites can load the StorifyMe Web SDK script through the Custom Code API instead of pasting it into each head. This needs an OAuth token from a Webflow App with the custom_code:write scope; site and Workspace tokens can't call these endpoints. Hosted scripts register by URL with a Subresource Integrity hash, while inline scripts cap at 2,000 characters. StorifyMe serves its loader from an unversioned URL that points to a cache-busted bundle, so expect to recompute the hash and re-register the script when StorifyMe updates the loader. The same script powers the <storifyme-collection> widget element and the single-story element.

To register it:

1. POST /v2/sites/{site_id}/registered_scripts/hosted with https://cdn.storifyme.com/static/web-components/storifyme-elements.min.js as the hostedLocation, plus an integrityHash, version and displayName, to register the hosted script.
2. PUT /v2/sites/{site_id}/custom_code to apply it site-wide, or PUT /v2/pages/{page_id}/custom_code for one page.
3. Place <storifyme-collection account="<ACCOUNT_ID>" widget="<WIDGET_ID>" env=""></storifyme-collection> in a Code Embed element or rich text field where the widget should render.

Every PUT must list every script you want kept, because omitting one removes it.

What you can build with the StorifyMe Webflow integration

Integrating StorifyMe with Webflow adds tappable, full-screen stories and vertical video to any page without building a story player in custom code.

• Shoppable product stories: Tag products inside stories on a catalog page, with CTAs pointing to your Webflow product pages. StorifyMe's shopping docs describe its own cart with a checkout event and never mention Webflow Ecommerce, so send CTAs to your product pages and let Webflow's checkout take the order. StorifyMe's Karaca case study reports a 20% CTA click-through rate and 10% growth in overall conversion rate from Stories.
• Homepage story bar for publishers: Run a carousel of daily stories above the fold on a news site. StorifyMe's DER SPIEGEL case study says story-bar Stories generate 21% of new subscriptions per month, up from 7% before.
• Lead capture landing pages: Place a story with a lead generation form and a countdown on a campaign page. StorifyMe's pricing table lists the lead generation form and a CRM connection for captured leads, so check which plan includes them before you build.
• Onboarding and feature guides: Embed a single story that walks a new customer through a product on a help or account page. StorifyMe's Fi Money case study reports a 17% increase in debit card activations after it added an in-app story on card activation.

To push the player script to many client sites at once, work through our custom code API guide, then add the API path above when stories should come from CMS items or form submissions.