A current gap in Webflow functionality is the ability to insert/inject content from another page or specific element by ID into a page, similar to the PHP include function or jQuery load. This custom JavaScript performs that task and enables custom functions within those pages that would otherwise not run. An example would be including the Webflow Dynamic CMS Slider, carousels, or any other JavaScript-based feature from a separate page within Webflow and ensuring that it triggers on load as expected.

Below is a powerful and flexible script that allows you to:

  1. Dynamically load external content into elements.
  2. Target specific elements from the loaded content (using CSS selectors like IDs or classes).
  3. Optionally run global JavaScript functions after the content is loaded.

Webflow Include Script

Add the following script Before </body> tag in the Custom Code on the page(s) on which you want to use the Webflow Include: -

How It Works

  1. Load External Content:
    • This script dynamically loads external content into elements that have the webflow-include class.
    • You specify the URL of the content you want to load using the data-include-url attribute.
  2. Optionally Target Specific Elements:
    • You can use the data-include-target attribute to load only a specific part of the external content (e.g., a specific div or section).
    • This attribute accepts any valid CSS selector (like an ID or a class) and extracts the matching element from the fetched content.
  3. Run Custom Functions After Content Loads:
    • After loading the content, you can specify a JavaScript function to run using the data-include-function attribute.
    • The script will check if the function exists globally and, if so, will call it. This check is helpful for reinitialising components like sliders or any custom behaviour you want to apply to the loaded content.

Usage Examples

To use the Webflow Include Script, we add simple HTML divs with specific data attributes. To incorporate them into your page, use the Webflow Custom Code Embed element or add the Code in a Rich Text element within the page or CMS item.

1. Load Full Content into a Div

This will load the entire content from path/to/content.html into the div.

<div class="webflow-include" data-include-url="path/to/content.html"></div>

2. Load a Specific Element from the Content

This will load only the element with the ID #specificElementId from path/to/content.html into the div.

<div class="webflow-include" data-include-url="path/to/content.html" data-include-target="#specificElementId"></div>

3. Load Content and Run a Function

This will load the entire content from path/to/content.html and call the global JavaScript function initializeCustomComponent() after loading.

<div class="webflow-include" data-include-url="path/to/content.html" data-include-function="initializeCustomComponent"></div>

4. Load Specific Content and Run a Function

This will load only the element with the class .specificElementClass from path/to/content.html and call the global function someGlobalFunction().

<div class="webflow-include" data-include-url="path/to/content.html" data-include-target=".specificElementClass" data-include-function="someGlobalFunction"></div>

Explanation of Attributes

  • data-include-url: The URL of the external content to be loaded.
  • data-include-target (optional): A CSS selector that targets a specific element inside the loaded content. If omitted, the entire content is loaded.
  • data-include-function (optional): The name of a global function to be executed after the content is loaded. This function must be globally accessible (i.e., attached to the window object).

Key Features of the Script

  • Flexible Loading: The script can load the entire page content or a specific element.
  • Script Execution: If the loaded content contains script tags, they are executed after being inserted into the page.
  • Webflow Integration: After loading, the script triggers Webflow's Webflow.ready() to ensure any Webflow-specific components are reinitialised.
  • Dynamic Function Calls: You can dynamically call specific functions after the content is loaded by specifying the function name in the data-include-function attribute.

Demo: Webflow Include Script in action

For the demo, we used Webflow Collections and the Webflow CMS for Blog posts. The following HTML added the div and required data attributes via an inline Rich Text element. 

<div class="webflow-include" data-include-url="/webflows/webflow-cms-slider" data-include-target="#Webflow-CMS-Slider" data-include-function="dynamicSliderInitialized"></div>

Here, we use data attributes to activate the Webflow Include, target the page/URL to be embedded, which in this case is the Webflow Dynamic CMS Slider by Slick Media, and then ensure the slider runs by calling the slider initialisation function.

Example: Calling a Function After Loading Content

You want to dynamically load content into a div and then call a custom function named initializeCustomComponent() after the content is loaded.

Step 1: Define the Global Function

First, define the global function that you want to call after the content is loaded. This function can contain logic, such as initialising sliders, carousels, or other custom behaviours.

<script>
  // Define the global function
  function initializeCustomComponent() {
    console.log("Custom component initialized.");
    // Add your custom initialization logic here
    // For example, reinitialize sliders, apply animations, etc.
  }
</script>

Step 2: Use the data-include-function Attribute in Your HTML

Next, set up the HTML element where you want the external content to be loaded. You can add the data-include-function attribute to specify the function's name to call after the content is loaded.

<div class="webflow-include" data-include-url="path/to/content.html" data-include-function="initializeCustomComponent"></div>

Step 3: The Script Automatically Calls the Function

The script you've implemented will automatically call initializeCustomComponent() after the content from path/to/content.html is loaded into the div.

How It Works:

  1. The webflow-include div will load the content from the URL specified in data-include-url.
  2. After the content is loaded, the script will check the data-include-function attribute.
  3. Since you specified initializeCustomComponent, the script will call the initializeCustomComponent() function after loading the content.

When the content is successfully loaded, the following will be logged to the browser console:-

Custom component initialized.

This is a simple example, but in practice, your function could initialise sliders, refresh UI components, or apply CSS classes. If needed, attach the function the window object to ensure it is globally accessible.

‍Conclusion

This script is a versatile solution for dynamically loading external content into your Webflow site. It allows you to target specific elements and run custom functions after loading. The added functionality helps you keep your Webflow pages clean, modular, and interactive by allowing parts of the page to be updated or initialised dynamically without a full page refresh. Let us know what you think of the Webflow Include Script in the comments below.