Once your story is published, adding it to a WordPress post or page takes about two minutes — with a block, a shortcode, or just by pasting a link. No code, no theme changes.
Scrollytelling is the technique of letting a story unfold as the reader scrolls — text, imagery and animation choreographed to the scroll bar instead of stacked on a static page. WordPress on its own doesn't do this — the editor stacks blocks down a static page.
The good news: you don't need to code anything or touch your theme. You'll build the story on Scrollytelling — where AI does the design, animation and imagery — and embed the finished story in WordPress with the free official plugin. The embed renders in its own frame, isolated from your theme's CSS and JavaScript, so nothing on your site breaks.
Here's the whole process, start to finish.
Head to app.scrollytelling.ai, describe your idea (or paste the URL of an existing blog post to convert it), and the AI builds an animated scroll story you can edit. Prefer a starting point? Pick one of the ready-made templates.
When you publish, your story gets its own address — something like https://my-story.scrollytelling.ai. Copy it from the dashboard or the Publish panel. That URL is all WordPress needs.
In your WordPress admin, go to Plugins → Add Plugin, search for “Scrollytelling”, then Install and Activate. The plugin is free, on the official plugin directory, and requires WordPress 6.6+ and PHP 7.4+.
The block gives you per-embed display settings and a tidy preview card, right in the editor:
Anywhere the block editor runs.
Click the + inserter (top-left) and search for Scrollytelling Story — or just type /scrollytelling on an empty line.
The block confirms it with a preview card — your story's title, address and display mode at a glance. The story itself plays on your published page; hit WordPress's Preview to see it live before publishing.
In the block settings sidebar (click the ⚙️ icon if it's hidden), pick Inline or Card display and adjust the height. More on the two modes below.
Tip: connect your account once (see the story picker below) and the block lets you browse and insert your published stories with a click — no URL copy-pasting at all.
The fastest way — and the one everyone forgets exists: paste your story URL on a line of its own in the editor and press Enter. WordPress recognizes it and embeds the story automatically — exactly like pasting a YouTube link. This works through oEmbed, WordPress's standard embed mechanism.
Note: auto-embed works for
…scrollytelling.aistory addresses. If your story runs on a custom domain, use the block or the shortcode instead — the plugin verifies custom-domain stories against the Scrollytelling API automatically.
If you use the Classic editor, or want a story inside a widget area or page builder that accepts shortcodes, one line does it:
[scrollytelling url="https://my-story.scrollytelling.ai" mode="inline" height="720"]The three attributes you'll use most:
| Attribute | What it does | Values |
|---|---|---|
url | Your published story's address. The only required attribute. | A published story URL |
mode | How the story appears in the page. | inline or card. Omit to use your site-wide default (inline out of the box). |
height | Height of the inline frame, in pixels. | 200–4000. Omit to use your site-wide default (720 out of the box). |
Site-wide defaults live under Settings → Scrollytelling — set them once and every embed without explicit attributes follows. Two more attributes, title and thumbnail, give a card-mode embed a real title and poster when you're not inserting via the story picker:
[scrollytelling url="https://my-story.scrollytelling.ai" mode="card" title="Inside the launch" thumbnail="https://example.com/poster.jpg"]Both modes are responsive, and both leave your theme alone. The choice is about reading flow:
The story plays inside your post, in a frame with a fullscreen button.
Choose it when the story is the content — a data story, a product feature, a visual explainer the reader should hit mid-article without clicking anything.
A launch card with a “View story” button that opens the story full-window.
Choose it inside long articles (no scroll area nested in your scroll), or for cinematic stories that deserve the whole screen from the first pixel.
You can mix modes freely — card in the magazine-style roundup, inline in the short announcement. The card shows your story's real title and poster when you insert it from the story picker or set the shortcode's title and thumbnail attributes; otherwise it renders a clean generic card. Set your preferred default mode under Settings → Scrollytelling.
Embedding by URL never requires an account connection. But if you publish stories regularly, connect once and skip the copy-paste forever:
In your Scrollytelling account settings, open Connect WordPress and create a key.
Go to Settings → Scrollytelling, paste the key, save. (The key is used server-side only — it's never exposed to your visitors.)
The Scrollytelling Story block now shows a picker with your published stories — choose one and it's embedded, with its title and poster filled in for card mode.
…scrollytelling.ai addresses only. Custom-domain story? Use the block or shortcode.You can hand-code scroll animations with libraries like GSAP ScrollTrigger — but inside WordPress that means fighting your theme's CSS and JavaScript, and maintaining it forever. The practical route is building the story on a dedicated platform and embedding it; that's exactly what the plugin automates — without touching your theme. For the wider tooling landscape, see our guide to scrollytelling tools.
Yes. The embed frame is responsive and stories are built mobile-first — the scroll animations play with the reader's natural scrolling on any device.
Inline plays the story inside your post, in a responsive frame with a fullscreen button. Card shows a launch card with a View story button that opens the story full-window — no scroll area nested in your page. Use inline when the story is the content; use card inside long articles. See the comparison above.
Yes — any public, published story URL works. Drafts and private stories won't render, so authors stay in control of what's embeddable.
No. The plugin is free and embedding is unlimited. Creating stories happens on Scrollytelling, which has a free plan to start.
Describe an idea — or paste one of your existing posts — and the AI turns it into an immersive scroll story you can embed in minutes.
Create your first story — free