Integrate Stories Widget SDK on Bubble

1. Introduction

Bubble allows custom code in three common places: site-wide header (Settings → SEO/Metatags), per-page header (Page HTML header), and the on-page HTML element. For external scripts like our SDK, site-wide or page-level headers are recommended; the HTML element also works if scripts are allowed.

2. Prerequisites

• Bubble app editor access
• 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. Go to Settings → SEO/Metatags → “Script/meta tags in header”.
2. Paste the SDK script:

   <script src="https://cdn.usemevo.com/story-sdk.min.js" id="YOUR_ORG_ID" defer></script>

3. Deploy or Preview to test; for production, deploy to Live.

Option B — Single page only

1. Select your page → open the Page property editor → “Page HTML header”.
2. Paste the same SDK script into the header:

   <script src="https://cdn.usemevo.com/story-sdk.min.js" id="YOUR_ORG_ID" defer></script>

3. Preview to verify on that page; deploy for Live.

Option C — Using an HTML element

1. From the Elements panel, drag an “HTML” element onto your page.
2. Paste the SDK script inside the HTML element content area:

   <script src="https://cdn.usemevo.com/story-sdk.min.js" id="YOUR_ORG_ID" defer></script>

3. If scripts are sanitized or blocked in your setup, use Option A or B instead.

4. Verification

• Preview: open your page in Preview mode; the stories bubble should appear.
• Live: deploy to Live to confirm on production.

5. Troubleshooting

• Script not executing in HTML element: move the script to the site-wide header or Page HTML header.
• No widget visible: verify your Organization ID in the id attribute and check the browser console for CSP or network errors.
• Multiple pages: use Option A for global availability, or repeat Option B per page.