Embed Code Reference

Odyn generates embed codes in three deployment modes and three environment variants.

Environments

Environment	URL Prefix	Cache	Use Case
Staging	`/staging/{project}/`	No-cache, instant updates	Development on `webflow.io`
Production	`/p/{project}/`	Immutable CDN cache	Live sites
Webflow Auto	`/auto/{project}/`	Resolved per request	Single snippet for both

Bundled Mode

Single IIFE bundle. This is the default mode.

Staging

Webflow Custom Code

<!-- Odyn - Staging -->
<!-- Instant updates. Just refresh to see changes. -->
<link href="https://cdn.odyn.dev/staging/{project}/bundle.css" rel="stylesheet">
<script src="https://cdn.odyn.dev/staging/{project}/bundle.js" defer></script>

Production

Webflow Custom Code

<!-- Odyn - Production -->
<!-- CDN handles versioning automatically. -->
<link href="https://cdn.odyn.dev/p/{project}/bundle.css" rel="stylesheet">
<script src="https://cdn.odyn.dev/p/{project}/bundle.js" defer></script>

Production (Pinned Version)

Webflow Custom Code

<!-- Odyn - Production (v42) -->
<link href="https://cdn.odyn.dev/p/{project}@42/bundle.css" rel="stylesheet">
<script src="https://cdn.odyn.dev/p/{project}@42/bundle.js" defer></script>

Webflow Auto-Detect

Webflow Custom Code

<!-- Odyn - Auto-Detect -->
<!-- Automatically uses staging on webflow.io and configured staging domains, production elsewhere. -->
<link href="https://cdn.odyn.dev/auto/{project}/bundle.css" rel="stylesheet">
<script src="https://cdn.odyn.dev/auto/{project}/bundle.js" defer></script>

The /auto/ URL resolves the environment on the CDN: requests coming from a *.webflow.io page — or from any host listed under Staging Domains — are served the staging build, everything else gets production. Because these are plain defer script tags, your code runs before DOMContentLoaded exactly like the staging and production embeds — no loader script involved.

If you pasted an older auto-detect snippet (an inline <script> block that built the URL in the browser), replace it with the tags above: the old loader injected your bundle dynamically, which could cause DOMContentLoaded listeners in your code to never fire.

Per-File Mode

Individual ES module outputs per entry point. Shared chunks load automatically via imports.

Staging

Webflow Custom Code

<!-- Odyn - File-based Deployment (Staging) -->
<link href="https://cdn.odyn.dev/staging/{project}/files/styles.css" rel="stylesheet">
<script type="module" src="https://cdn.odyn.dev/staging/{project}/files/main.js"></script>

Production

Webflow Custom Code

<!-- Odyn - File-based Deployment (Production) -->
<link href="https://cdn.odyn.dev/p/{project}/files/styles.css" rel="stylesheet">
<script type="module" src="https://cdn.odyn.dev/p/{project}/files/main.js"></script>

Only entry points appear in the embed code. Shared chunks and barrel files are excluded.

Folder Bundle Mode

Dedicated IIFE bundle per folder. Each folder bundle has its own embed snippet.

Example

Webflow Custom Code

<!-- Odyn - Production -->
<script src="https://cdn.odyn.dev/p/{project}/bundle.js" defer></script>
<!-- Folder: components -->
<script src="https://cdn.odyn.dev/p/{project}/fb-components/bundle.js" defer></script>

Pinned version: /p/{project}@42/fb-components/bundle.js

External Dependencies in Embed Codes

When external dependencies are configured, their tags appear first:

Webflow Custom Code

<!-- External Libraries -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<!-- Odyn - Production -->
<script src="https://cdn.odyn.dev/p/{project}/bundle.js" defer></script>

Project Path in URLs

Odyn resolves the project path in this order:

Short ID — https://cdn.odyn.dev/p/abc123/bundle.js
Owner/slug — https://cdn.odyn.dev/p/john/my-project/bundle.js
UUID (fallback) — Full project UUID

CDN URL Patterns

See CDN URL Patterns for the complete URL reference.

Verification

After embedding on your site:

Open the browser Network tab and confirm 200 responses for all CDN URLs.
Check the Console for loading errors or CORS issues.
Verify external dependencies load before your bundle (check network waterfall order).
For per-file mode, confirm type="module" is present on script tags.

Embed Code Reference

On this page