Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.elasticfunnels.io/llms.txt

Use this file to discover all available pages before exploring further.

Dynamic content automatically updates elements for scenarios like showing special pricing to certain affiliates or location-based offers.

​
Core Concepts

Before setting up, it helps to understand the relationship between containers and components:
  • 1 Container = 1 Page Location: Think of a Dynamic Container as a specific “slot” on your page (e.g., the Header slot, the Video slot, or a Banner slot).
  • Multiple Containers: If you want to change both the Header AND the Footer, you need two separate Dynamic Containers.
  • Variations: If you want 4 different versions of a specific section (e.g., 4 different banners), the setup is:
    • 1 Dynamic Container placed on the page where the banner goes.
    • 1 Default Version built directly inside that container (shown if no conditions are met).
    • 3 Alternative Versions built and saved as Custom Components (swapped in when conditions are met).

​
Setup

​
Step 1: Create Custom Components

Dynamic content works by swapping Custom Components. You cannot dynamically swap raw elements (like Divs or Sections) unless they are converted first.
  1. Build the section or element you want to display (e.g., a specific pricing table).
  2. Right-click the element and select Transform to Component.
  3. Once saved, you can remove it from the page (unless it serves as your default content).
  4. Repeat this for every variation you need.

​
Step 2: Add Dynamic Container

To add a container to your page:
  1. Right-click the element you want to make dynamic (or the area where you want the container).
  2. Select Wrap in > Dynamic Container.
  3. Default Content: Any content directly inside this container acts as the default view.
  4. Dynamic Swapping: The container will swap this default content with the Custom Components you created in Step 1 based on your rules.

​
Step 3: Define Logic

You can use any logic within the Page Events system to trigger content swaps. This gives you flexibility to use URL parameters, Split Tests, or user behavior as triggers. Example Workflow:
  1. Open the Manage Page Events screen.
  2. Start with a trigger like On Page Loaded.
  3. Add a “Condition” node (e.g., “Product Check” or “Script Rule”).
  4. Connect the condition to a Dynamic Content action.
  5. Select your target Container and the Component to show for that condition.
Troubleshooting:
  • “No dynamic components found”: Verify that you have successfully transformed your content variations into Custom Components as described in Step 1.
  • Components not appearing in list: Ensure you have saved the page after creating your components. Click the reload icon next to the component dropdown to refresh the list.

​
Use Cases

  • Affiliate-specific content: Show different pricing or bonuses based on referral source
  • Location-based offers: Display region-specific content or pricing
  • Traffic source targeting: Customize content based on where visitors came from
  • Device-specific content: Show different content for mobile vs desktop users
  • Time-sensitive offers: Display content based on time of day or date ranges

​
HTML Reference

The page builder inserts dynamic containers automatically when you use Wrap in → Dynamic Container, but you can write the HTML directly when editing page source.

​
<dynamic-container> tag

The <dynamic-container> tag marks a slot on the page whose content can be swapped at render time. The tag itself is just a placeholder — all behavior (which component to load and under what conditions) is defined entirely in Page Events using the Dynamic Content node. The server reads that configuration at render time and replaces the container’s content with the matched component. Attributes
AttributeRequiredDescription
idYesUnique identifier used by the server to match and swap this container’s content. Must match the container ID configured in the Page Events Dynamic Content node.
nameYesHuman-readable label shown in the Page Events UI when selecting which container to target. Without this the container will not appear in the Page Events dropdown.
Syntax 
<dynamic-container id="my-slot-id" name="Hero Banner">
  <!-- Default content shown when no Page Events condition matches -->
  <div>Default banner content</div>
</dynamic-container>
How it renders When a matching Dynamic Content node fires in Page Events, the server replaces the <dynamic-container> content with the target Custom Component: 
<!-- Server output when a condition matched "promo-banner" component -->
<div id="my-slot-id">
  <!-- HTML of the resolved Custom Component -->
</div>
If no Page Events condition matches, the container and its default inner content are left unchanged. Example: Affiliate-specific banner 
<dynamic-container id="hero-banner" name="Hero Banner">
  <div class="banner default-banner">Standard Offer</div>
</dynamic-container>
In Page Events:
  1. Trigger: On Page Loaded
  2. Condition: Query Parameter aff_id = 42
  3. Action: Dynamic Content → Container hero-banner → Component affiliate-42-banner
Visitors arriving with ?aff_id=42 see the affiliate-specific banner; everyone else sees the default content. Example: Two independent slots on one page 
<!-- Slot 1: controls the headline area -->
<dynamic-container id="headline-slot" name="Headline Slot">
  <h1>Default Headline</h1>
</dynamic-container>

<!-- Slot 2: controls the footer disclaimer area -->
<dynamic-container id="footer-disclaimer-slot" name="Footer Disclaimer">
  <p>Default disclaimer text</p>
</dynamic-container>
Each slot is controlled independently through separate Dynamic Content nodes in Page Events.

​
<component> tag

The <component> tag embeds a saved Custom Component directly by its code. You can use it anywhere on a page without going through Page Events. Attributes
AttributeRequiredDescription
typeYesThe code (slug) of the Custom Component to embed.
Syntax 
<component type="my-component-code"></component>
How it renders 
<!-- Server output -->
<div data-cid="[component_database_id]">
  <!-- HTML of the Custom Component -->
</div>
If the component code is not found, the server renders an inline error: 
<ef-error>Component <u>my-component-code</u> was not found.</ef-error>
Example: Reusable footer across pages 
<component type="general-footer"></component>
Example: dynamic container resolved to a component When a <dynamic-container> matches a Page Events rule, the server internally converts it to a <component> embed before the final HTML is sent: 
<!-- What the server generates internally before rendering -->
<div id="hero-banner">
  <component type="affiliate-42-banner"></component>
</div>

​
Advanced Tips

  • Use multiple conditions for more precise targeting
  • Test your dynamic content thoroughly across different scenarios
  • Keep fallback content for when conditions aren’t met
  • Monitor performance of different content variations