Stories Widget
Login

Integrate Stories Widget SDK on Framer

Published on August 20, 2025

1. Introduction

Use Framer’s Custom Code areas to add a script to the start/end of your <head> or <body>. You can add it globally (entire site) or only to a single page. This is the recommended way to include external scripts in Framer.

2. Prerequisites

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

3. Step-by-Step Instructions

Option A — Site-wide (recommended)

  1. Open your project in Framer → Settings → Custom Code.
  2. In the Body End (or Head End) section, paste the SDK script:
    <script src="https://cdn.usemevo.com/story-sdk.min.js" id="YOUR_ORG_ID" defer></script>
  3. Click Publish to apply Custom Code. Custom Code runs on the published site.

Option B — Single page only

  1. In the left Pages panel, select the page → Page Settings → Custom Code.
  2. Paste the same SDK script into Body End (or Head End):
    <script src="https://cdn.usemevo.com/story-sdk.min.js" id="YOUR_ORG_ID" defer></script>
  3. Publish the site to see the widget on that page.

4. Verification

  • Custom Code does not run in the in-editor preview. Click Publish and open the live URL.
  • On the published page, the stories bubble should appear automatically.

5. Troubleshooting

  • Not visible in preview: Publish first; Custom Code executes on the published site.
  • Still not loading: Place the script in Body End and verify your Organization ID in the id attribute.
  • Blocked script: Check your browser console and any Content Security Policy settings.
  • Avoid using a Code component for external scripts; use Custom Code areas instead.
Refer to Framer Academy on Custom Code for details about adding code to Head/Body and the difference between site-wide vs page-level custom code.

Add Stories to Framer

Delight visitors with tappable stories in your Framer site.

Get started