View

The View section is where you add JavaScript that runs on the frontend of your website. This is for any interactive behavior your block needs – animations, user interactions, dynamic content updates, or any functionality that makes your block come alive for visitors.

When to Use View

Use the View section when your block needs frontend interactivity:

• Animations triggered by scrolling or user actions
• Interactive elements like tabs, accordions, or sliders
• Dynamic content that changes based on user input
• Click handlers, form submissions, or other user interactions
• Any JavaScript functionality that runs on the live site

Module Toggle – Important Setting

FanCoolo provides a Module toggle that controls how your JavaScript is loaded. This is a critical setting that affects both when and how your script runs.

Standard Script (Module: OFF)

When the Module toggle is OFF, your view.js is loaded as a standard script:

"viewScript": "file:./view.js"

Characteristics:

• Script loads in the footer (bottom of the page)
• Loads after the page content is rendered
• Traditional JavaScript loading
• Use for standard JavaScript functionality

ES Module Script (Module: ON)

When the Module toggle is ON, your view.js is loaded as an ES module:

"viewScriptModule": "file:./view.js"

Characteristics:

• Script loads in the header (top of the page)
• Loads as a modern ES module
• Required for WordPress Interactivity API
• Use for modern JavaScript features and Interactivity API

When to Use Each

Use Module: OFF (viewScript) when:

• You’re writing standard JavaScript
• You don’t need the Interactivity API
• You want the script to load after page content

Use Module: ON (viewScriptModule) when:

• You’re using the WordPress Interactivity API
• You need ES module features (import/export)
• You need the script to load early in the page

WordPress Interactivity API

The WordPress Interactivity API is a modern framework for building interactive blocks. If you want to use the Interactivity API, you must enable the Module toggle.

The Interactivity API provides:

• Reactive state management
• Server-side rendering support
• Declarative interaction handling
• Built-in performance optimizations

To use Interactivity API:

1. Enable the Module toggle
2. Your view.js will load as viewScriptModule in the header
3. Write your code using Interactivity API patterns