Inject

Import components from any internal or external Webflow project

Overview

The Inject attribute allows you to dynamically load and insert components from other Webflow projects into your current page. This enables component reusability across projects and external component libraries.

Attribute Syntax

Elements

fs-inject-element · string · required

Defines the role of the element:

• target - The container where the component will be injected
• component - The component to be loaded (can also use element as an alias)

Settings

fs-inject-source · string · required

Defines the URL of the Webflow page containing the component. Can be internal (same project) or external (different project).

fs-inject-position · string

Defines where the component should be inserted within the target:

• before - Insert before the target’s content
• after - Insert after the target’s content
• replace - Replace the target’s content (default)

fs-inject-css · boolean · default: "true"

Defines whether to import CSS from external components. When true, external components are loaded in a Shadow DOM with their styles. Set to false to disable CSS import.

fs-inject-render · boolean · default: "true"

Defines whether the component should be automatically rendered. Set to false to load but not render, allowing manual rendering via JavaScript.

fs-inject-proxy · string

Defines a CORS proxy prefix for loading external components that have CORS restrictions.

fs-inject-cache · boolean · default: "true"

Defines whether to cache loaded components. Set to false to always fetch fresh content.

fs-inject-cachekey · string

Defines a custom cache key for the component. Useful for cache management.

fs-inject-cacheversion · number

Defines a cache version number. Increment to bust the cache and reload the component.

fs-inject-resetix · boolean

Defines whether to restart Webflow interactions after rendering. Set to true if the injected component contains Webflow interactions.

Usage Examples

Basic Component Injection

<!-- Load component from same project -->
<div 
  fs-inject-element="target" 
  fs-inject-source="/components#header">
</div>

Common Use Cases

Shared Navigation

Maintain a single navigation component across multiple Webflow projects, updating it in one place.

Component Libraries

Create a central library of reusable components (buttons, cards, forms) and inject them into multiple projects.

Dynamic Content

Load frequently updated content (announcements, promotions) from a central location into multiple pages.

A/B Testing

Swap different component variations by changing the source URL dynamically.

Modular Page Building

Build pages by assembling pre-built components from a component library.

Component Source Format

The source URL can point to:

1. Same project page: /page-slug#component-id
2. External project: https://example.webflow.io/page#component-id
3. Full URL: Any publicly accessible Webflow page

When injecting external components with fs-inject-css="true", the component is loaded inside a Shadow DOM to isolate its styles. This prevents style conflicts but may affect how you can style the component from outside.

External components may be subject to CORS restrictions. Use the fs-inject-proxy setting with a CORS proxy service if you encounter loading issues.

Performance Considerations

• Enable caching for components that don’t change frequently
• Use cache versioning to control updates without disabling cache
• Consider loading components on interaction rather than page load for better initial performance
• Minimize the number of external sources to reduce HTTP requests