Keep components in sync across websites and inject components inside of Rich text elements

The fs-inject-position attribute is only applicable when the source element is injected on a Rich Text element. It's set on the Rich Text element that's tagged with fs-inject-element="target".

The VALUE defines where inside the Rich Text's body the element must be placed:

• A value from 0 to 100 representing the percentage depth within the Rich Text body.
• a keyword representing a preset:
  • first or start:0%
  • one-quarter: 25%
  • one-third: 33%
  • middle: 50%
  • center: 50%
  • half: 50%
  • one-half: 50%
  • two-thirds: 66%
  • three-quarters: 75%
  • end or last: 100%

Source elements can be injected at a specific location within a Rich Text element by placing a shortcode directly in the text content.

The format is {{ELEMENT_IDENTIFIER}}, where ELEMENT_IDENTIFIER must match the value used in the fs-inject-instance="IDENTIFIER" attribute on the source element.

For on-page source elements

• Components that are present in the same page can be used as{{ELEMENT_IDENTIFIER}}

For source elements on an external-page

• Source elements that are published on an external page can be expressed as:{{ELEMENT_IDENTIFIER="/RELATIVE_URL"}}
  or {{COMPONENT_IDENTIFIER="https://ABSOLUTE_URL"}}

If your source element includes Webflow Interactions, you might find that these interactions don't work as expected after moving the element into the Rich Text element. This issue occurs because the Attributes script executes after the Webflow Interaction engine has already run.

To resolve this issue, add the fs-inject-resetix attribute with the value true to the Rich Text element. This action will reset and then restart the Webflow Interactions engine once the element is positioned inside the Rich Text, ensuring the element's interactions perform as intended.

By default, the element 's CSS is imported and encapsulated inside a Shadow DOM to prevent style conflicts. This is required for external elements to retain their styling.

When elements are injected from the same Webflow project, the shared CSS is already available, so loading it again is unnecessary.

The fs-inject-css="false" attribute can be set to prevent unnecessary loading of the CSS when the elements is injected.

When used, this attributes prevents the element to be automatically rendered.

Set to false, it will be up to the developer to render the element to the DOM. Set to true, it re-enables the automatic rendering.

Un-rendered elements can be accessed via the API.

Defines a CORS proxy to be used to fetch external documents that have CORS protection.

Example:

fs-inject-proxy="https://api.finsweet.com/cors?url="

The external sources will be fetched like this:

https://api.finsweet.com/cors?url=https://example.com

By default all external pages are cached to avoid refetching them on every navigation.

Users can disable caching by adding fs-inject-cache="false"

This option only applies when using the fs-inject attribute in a non-Webflow project, like Discourse.

To cache externally fetched documents, we have to define a database key for IndexedDB. In the case of Webflow projects, we use the Site ID as the database key, but for non-Webflow projects we need to manually define it.

This option only applies when using the fs-inject attribute in a non-Webflow project, like Discourse.

When defining a cache version, all fetched sources will be cached using it. If the cache version is bumped (never downgraded!), the cache will be invalidated and it will force a fresh request.

Defaults to 1.