Web/JavaScript Agent
📄️ Quickstart
Get your NetFUNNEL 4 JavaScript Agent up and running in 5-10 minutes with this quickstart guide.
📄️ Install and Initialize
This guide covers the essential setup steps that apply to both URL-Triggered and Code-based integration methods.
🗃️ Integration Methods
2 items
📄️ Initialization Option Reference
Complete reference for all NetFUNNEL JavaScript Agent configuration options (data-attributes).
📄️ Reference API
Complete reference for NetFUNNEL JavaScript Agent functions, callbacks, and response formats.
📄️ Troubleshooting
Common issues, solutions, and frequently asked questions for NetFUNNEL JavaScript Agent integration.
Overview
JavaScript Agent is a client-side SDK that provides NetFUNNEL 4 traffic control functionality for web applications.
Key Features
- Client-side SDK: Direct integration into web pages with simple JavaScript API calls
- Two Integration Methods: Choose between URL-Triggered Integration (no code) and Code-based Integration (precise control)
- Flexible Control: URL-Triggered for page-level protection, Code-based for button/API-level control
- Native Waiting Rooms: WebView-based waiting room templates with customizable UI options
- Real-time Queue Updates: Receive live queue position, wait time, and progress information
- Network Recovery: Automatic recovery from network issues to maintain user experience
- Robust Error Handling: Comprehensive callback system with smart error handling strategies
- Lightweight SDK: Minimal dependencies with vanilla JavaScript support
- Cross-browser Compatibility: Works with all modern browsers and frameworks
System Requirements
- Browsers: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
- JavaScript: ES6+ support required
- Frameworks: Compatible with React, Vue, Angular, vanilla JavaScript, and more
- HTTPS: Required for production environments
Compatible Environments
- Web Applications: Single Page Applications (SPA), Multi Page Applications (MPA), Progressive Web Apps (PWA)
- Frameworks: React, Vue.js, Angular, Next.js, Nuxt.js, and vanilla JavaScript
- All Web Platforms: Desktop browsers, mobile browsers, embedded webviews
How It Works
- SDK Initialization: Include NetFUNNEL script and initialize with your configuration
- Integration Choice: Use URL-Triggered Integration (automatic) or Code-based Integration (manual control)
- WebView Waiting Room: SDK displays WebView-based waiting room (default template or custom UI)
- User Experience: Seamless integration with your website's design and flow
Integration Method Examples
URL-Triggered Integration Flow:
User visits URL → Automatic check → Waiting Room (if needed) → Original page
Code-based Integration Flow:
User Action → nfStart() → Waiting Room → onSuccess() → User Proceeds → nfStop()
Integration Methods
1. URL-Triggered Integration
- Best for: Page-level protection, landing pages, promotions
- Setup: Configure trigger rules in console (no code changes)
- User Experience: Automatic redirect to waiting room, then return to target page
- Control Level: Page-based traffic control
2. Code-based Integration
- Best for: Button clicks, API calls, precise control
- Setup: Call NetFUNNEL functions in your JavaScript code
- User Experience: Modal waiting room on current screen
- Control Level: Action-based traffic control
Limitations
- This SDK does not work in native mobile app environments (Android/iOS native code)
- For native mobile app traffic control, use Android Agent or iOS Agent
Getting Started
To quickly begin with JavaScript Agent, refer to the Quickstart guide.
Need a basic project to practice with? Check out our Sample Projects which include a Web Application (Vanilla JavaScript MPA) template ready for NetFUNNEL JavaScript Agent integration practice.
Documentation
Core Documentation
- Quickstart: Get up and running in 5-10 minutes with basic examples
- Installation & Initialization: Detailed setup guide with dependencies and configuration
- Integration Methods: Compare URL-Triggered vs Code-based approaches
- API Reference: Complete function specifications, callbacks, and response formats
- Initialization Option Reference: All initialization parameters and their usage
- Troubleshooting: Common issues, solutions, and FAQ
Implementation Guides
- URL-Triggered Integration: Complete implementation guide for URL-Triggered Integration
- Code-based Integration: Complete implementation guide for Code-based Integration
Related Content
- Android Agent: Android SDK integration guide
- iOS Agent: iOS SDK integration guide
- Sample Projects: Ready-to-use project templates