Containers - ElasticFunnels.io Documentation

Containers control when and how content appears to visitors. Use them for conditional visibility, lazy loading, split tests, and visitor-specific content.

Overview

Containers wrap page content and add behavior based on visitor actions, page events, or other conditions.

Available Containers

CTA Container

The CTA Container (Call-to-Action Container) is hidden by default and only appears when the CTA is triggered, typically used to reveal purchase buttons, pricing tables, or order forms after a visitor watches your Video Sales Letter (VSL). Key Features:

Hidden by default (display: none)
Transforms to visible (display: block) when CTA is executed
Can persist once triggered during the session
Commonly contains buy buttons, pricing, checkout forms

How to Trigger: The CTA can be executed in three ways:

VSL CTA: At a specific timestamp in your Video Sales Letter, you call getStarted() to trigger the CTA when that point is reached in the video
Manual Button Click: Add a button with click interaction that executes getStarted() JavaScript function
Timed Event: Use Page Events with JavaScript to execute getStarted() after a delay

Example Button Click Setup:

// In Interactions Panel (Ctrl+I) on your button:
// Trigger: On Click
// Action: Execute JavaScript

getStarted();

Common Use Cases:

Reveal order button after VSL completes
Show pricing after engagement threshold
Display purchase options on manual trigger
Progressive disclosure of sales information

The CTA Container uses the getStarted() global function which is available throughout your page. Once triggered, the container can remain visible for the visitor’s session.

Hide on CTA Container

The Hide on CTA Container is the opposite of the CTA Container - it’s visible by default and gets hidden when the CTA is executed. Key Features:

Visible by default
Hides automatically when getStarted() is executed
Useful for removing content that shouldn’t appear with purchase options
Often used in conjunction with CTA Container

How It Works: When getStarted() is called (via VSL, button, or JavaScript), this container automatically hides while the CTA Container shows. Common Use Cases:

Hide video player when purchase form appears
Remove promotional content after CTA
Clear page space for checkout elements
Move visitors from sales content to the purchase step without extra clutter

Example Pattern:

Before CTA:
  ✓ Hide on CTA Container (visible) - Contains VSL video
  ✗ CTA Container (hidden) - Contains buy button

After CTA triggered:
  ✗ Hide on CTA Container (hidden) - VSL disappears
  ✓ CTA Container (visible) - Buy button appears

Use both containers together to create smooth transitions from your sales content to purchase forms. This creates a clean, focused buying experience.

Merchant Container

The Merchant Container displays content conditionally based on the active payment processor (merchant) for the current page view. Key Features:

Shows content only for specific merchants
Hides all non-matching merchant containers
Can be set per domain or overridden in Page Events
Useful for merchant-specific disclaimers, policies, and branding

How Merchants Are Determined:

Domain-Level Setting: Default merchant set in Domain settings
Page Events Override: Use the “Set Merchant” node in Page Events to override for specific conditions

Supported Merchants:

Buygoods
Clickbank
Digistore24
Other configured payment processors

Configuration:

Add Merchant Container to your page
Select Merchant from the container settings
Add Content specific to that merchant
Repeat for each merchant you want to support

Example Scenario: You have different footer disclaimers specific to each merchant:

Page contains:
  - Merchant Container (Buygoods) → Buygoods-specific disclaimer and policies
  - Merchant Container (Clickbank) → Clickbank-specific disclaimer and policies
  - Merchant Container (Digistore24) → Digistore24-specific disclaimer and policies

When visitor arrives:
  - Domain merchant = Buygoods
  → Only Buygoods disclaimer displays

Override in Page Events:
  - Query Parameter (affiliate_id = 100)
  → Set Merchant to Clickbank
  → Only Clickbank disclaimer displays

Common Use Cases:

Merchant-specific disclaimers and legal policies
Payment processor-specific trust badges and seals
Different refund policies based on merchant
Merchant-specific support information and contact details
Custom branding elements per merchant
Merchant-specific terms and conditions

Setting Merchant in Page Events: Use the Set Merchant node to dynamically change which merchant container displays:

Go to Page Events for your page
Add a condition (Query Parameter, Script Rule, etc.)
Connect to Set Merchant node
Select the merchant to activate
Merchant containers will show/hide accordingly

Resetting Merchant: Use the Clear Merchant node to reset back to the domain’s default merchant:

Add Clear Merchant node in Page Events
Connect it to a condition or event
When triggered, clears any session merchant override
Page returns to using the domain’s default merchant

This is useful for:

Resetting test merchants back to production
Clearing affiliate-specific merchants after purchase
Returning to default after special conditions expire

If no merchant is set (neither at domain level nor via Page Events), merchant containers will not display. Ensure you have a default merchant configured.

Split Test Container

The Split Test Container marks a section of the page whose content is chosen by a traffic split. It renders as a <split-test> element and holds no logic of its own — the variants and their weights live in Page Events. Key Features:

Marks one swappable slot, identified by its id
Filled by a Component Split Test node in Page Events
Its inner content is the default — what renders when no split test is running
Each served variant is tagged for analytics (data-sid / data-cid)

Exactly one of two things renders: the component the graph selected (replacing the container, wrapper and all), or — when nothing is bound — the default content on its own. So never write the variants inline inside the container; they can never all render. A single component inside a container is fine, because that is just the default.Containers are also filled before both template engines run, so wrapping one in @if or <template-if> does not stop it being filled — it only hides the result after the visitor has already been enrolled in the test. See Rendering pipeline.

How to Use:

Add a Split Test Container to your page and fill in its Split Test Container Name trait — that name is what you pick from in Page Events.
Create one saved component per variant.
Configure in Page Events:
- Add a Component Split Test node and select the container
- Set Total Variants — a Traffic Distribution node is created for each one
- Attach one Component node under each Traffic Distribution node, and mark one as the baseline
Track Results in Analytics

Variants attach to Component nodes, not Dynamic Content nodes. Component Split Test → Traffic Distribution → Component is the only valid chain; the builder rejects anything else.

Common Use Cases:

Test different headlines
Compare pricing presentations
Test different images or videos
Optimize form layouts

Best Practices:

Test one element at a time
Run tests long enough for statistical significance
Track meaningful conversion goals
Document your test results

For complete split testing documentation, including setup and analysis, see Split Testing.

Lazy Load Container

The Lazy Load Container defers loading of content inside it until the visitor scrolls to that section of the page. Key Features:

Improves initial page load performance
Loads content “just in time” when visitor scrolls near it
Reduces bandwidth for content visitors never see
Loads when needed without interrupting the page

How It Works:

Page loads with empty lazy load containers
Visitor scrolls down the page
When container enters viewport (or approaches it), content loads
Content appears smoothly without page disruption

What to Lazy Load:

Below-the-fold content
Large images or videos
Comment sections
Secondary information
Resource-heavy widgets or embeds

What NOT to Lazy Load:

Above-the-fold content
Critical purchase buttons
Forms that need immediate interaction
Content needed for SEO

Performance Tips:

Use for content below the fold only
Combine with image optimization
Test on slow connections
Monitor Core Web Vitals impact

Don’t lazy load critical conversion elements like buy buttons or lead capture forms. Visitors should be able to interact with these immediately.

Some specialized containers are documented in dedicated pages:

Subscription Containers

Sub Pending, Sub Success, and Sub Error containers auto-toggle based on the result of a subscription modification API call (ef.sub.upgrade() / ef.sub.cancel()). Use them to build multi-screen subscription upsell flows. View Subscription Upsells Documentation →

Dynamic Container

The Dynamic Container marks a slot whose content is replaced with a saved component when a Page Events condition matches. Unlike the Split Test Container, the choice is driven by a condition you write, not by a traffic split. View Dynamic Content Documentation →

Whitelisted Containers

Whitelisted Container and Non-Whitelisted Container display different content based on visitor whitelisting status, commonly used for content protection and personalized visitor experiences. View Content Visibility Control Documentation →

Container Combination Patterns

Progressive Sales Flow

Combine multiple containers for a complete sales experience:

Initial Page Load:
  ✓ Hide on CTA Container
    - VSL video
    - Sales copy
  ✗ CTA Container (hidden)
    - Pricing
    - Buy button

After VSL triggers CTA:
  ✗ Hide on CTA Container (hidden)
  ✓ CTA Container (visible)
    - Pricing
    - Buy button
    ✓ Merchant Container (Buygoods)
      - Buygoods disclaimer
    ✗ Merchant Container (Clickbank) - hidden

Performance-Optimized Page

Use lazy loading for better page speed:

Above the fold:
  - Hero section (loads immediately)
  - VSL player (loads immediately)
  - CTA button (loads immediately)

Below the fold (lazy loaded):
  ✓ Lazy Load Container
    - Testimonials section
    - FAQ accordion
    - Detailed features
    - Footer content

Dynamic Merchant Selection

Adapt disclaimers and policies based on traffic source:

Page Events Flow:
  1. On Page Load
  2. Query Parameter Condition (source = partner1)
     → Set Merchant to Buygoods
  3. Query Parameter Condition (source = partner2)
     → Set Merchant to Clickbank
  4. Default
     → Domain default merchant

Result:
  - Only matching merchant container displays
  - Visitor sees appropriate disclaimers and policies

Best Practices

Container Organization

Clear Naming: Name containers descriptively in the page builder
Document Logic: Note which containers work together
Test All Paths: Verify all show/hide conditions work correctly
Consider Mobile: Ensure container behaviors work on all devices

Performance Guidelines

Lazy Load Wisely: Use for below-fold content only
Minimize Nesting: Don’t nest containers unnecessarily
Test Load Times: Monitor impact on page speed
Optimize Content: Compress images and minimize resources inside containers

User Experience

Smooth Transitions: Avoid jarring content shifts when containers appear
Visual Feedback: Let users know when content is loading
Fallback Content: Have defaults for when conditions aren’t met
Test Edge Cases: What happens if no merchant is set? Test it.

Development Workflow

Start Simple: Add containers one at a time
Test Immediately: Verify each container works before adding more
Use Preview Mode: Test without affecting live traffic
Clear Cache: Clear browser cache when testing changes

Troubleshooting

CTA Container Not Showing

Symptoms: CTA container remains hidden after trigger Possible Causes:

getStarted() not being called correctly
JavaScript errors preventing execution
Container selector issues

Solutions:

Check browser console for JavaScript errors
Verify button click triggers getStarted()
Test VSL CTA timestamp is reached
Confirm container has correct ID/class

Merchant Container Not Displaying

Symptoms: No merchant containers showing Possible Causes:

No merchant set at domain level
No merchant selected in Page Events
Merchant ID mismatch

Solutions:

Check domain settings for default merchant
Verify Set Merchant node in Page Events
Confirm merchant containers have correct merchant assigned
Check browser console for errors

Lazy Load Issues

Symptoms: Content not loading when scrolling Possible Causes:

Container too small to trigger
JavaScript not initializing properly
Content inside container has errors

Solutions:

Ensure container has minimum height
Check browser console for errors
Test without lazy loading first
Verify content loads normally outside container

Multiple Containers Conflicting

Symptoms: Unexpected show/hide behavior Possible Causes:

Overlapping container logic
Multiple merchants set incorrectly
CTA and Hide on CTA not paired properly

Solutions:

Review Page Events flow carefully
Test each container individually
Check for conflicting JavaScript
Simplify logic and add complexity gradually

Page Events - Set up merchant switching and complex flows
Dynamic Content - Learn about Dynamic Containers
Content Visibility Control - Whitelisting containers
Split Testing - A/B testing with containers
Interactions Panel - Add click handlers to trigger CTAs

Start with one clear container use case, then add more logic only when you can test each condition.

​Overview

​Available Containers

​CTA Container

​Hide on CTA Container

​Merchant Container

​Split Test Container

​Lazy Load Container

​Related Containers

​Subscription Containers

​Dynamic Container

​Whitelisted Containers

​Container Combination Patterns

​Progressive Sales Flow

​Performance-Optimized Page

​Dynamic Merchant Selection

​Best Practices

​Container Organization

​Performance Guidelines

​User Experience

​Development Workflow

​Troubleshooting

​CTA Container Not Showing

​Merchant Container Not Displaying

​Lazy Load Issues

​Multiple Containers Conflicting

​Related Documentation

Overview

Available Containers

CTA Container

Hide on CTA Container

Merchant Container

Split Test Container

Lazy Load Container

Related Containers

Subscription Containers

Dynamic Container

Whitelisted Containers

Container Combination Patterns

Progressive Sales Flow

Performance-Optimized Page

Dynamic Merchant Selection

Best Practices

Container Organization

Performance Guidelines

User Experience

Development Workflow

Troubleshooting

CTA Container Not Showing

Merchant Container Not Displaying

Lazy Load Issues

Multiple Containers Conflicting

Related Documentation