Integrate Stories Widget SDK in React / Next.js

Published on August 20, 2025

1. Introduction

Just add the SDK script. No extra code or target container is required. Use afterInteractive in Next.js to avoid SSR issues.

2. Prerequisites

React or Next.js project
Organization ID
SDK URL, e.g. https://cdn.usemevo.com/story-sdk.min.js

3. Step-by-Step Instructions

Next.js (App Router)

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cdn.usemevo.com/story-sdk.min.js" id="YOUR_ORG_ID" strategy="afterInteractive" />
      </body>
    </html>
  )
}

React (CRA/Vite)

<!-- public/index.html -->
<div id="root"></div>
<script src="https://cdn.usemevo.com/story-sdk.min.js" id="YOUR_ORG_ID" defer></script>

4. Verification

Run your dev server and open the page; the widget should render.

5. Troubleshooting

Hydration: Load SDK afterInteractive to avoid SSR issues.
No widget: Verify the script URL loads and the Organization ID is correct.
Mobile-only: If configured to show only on mobile, test on a phone or lower viewport width.

Add Stories to Next.js or React

Drop in a script and a div—get a polished stories experience.

Get started