Integration Methods Overview
The NetFUNNEL JavaScript Agent supports two main integration methods:
- URL-Triggered Integration (UTI)
- Code-based Integration (CBI)
Code-based Integration is further divided into two control types:
- Code-based Integration - Basic Control: Controls entry speed (key returned quickly)
- Code-based Integration - Section Control: Maintains fixed capacity (key held until section exit)
📄️ URL-Triggered Integration
Apply waiting rooms to specific URLs without any code changes by configuring trigger rules in the NetFUNNEL console.
📄️ Code-based Integration
Control traffic at the button/API level by calling NetFUNNEL functions in your application code.
URL-Triggered Integration
What does it do?
- Without code changes, you declare "apply the queue to traffic coming to this URL" only by configuring URL trigger rules in the console.
User Experience (UX)
- When a waiting room is needed, the user is redirected to the VWR page → once entry is allowed, they return to the original target page.
Characteristics
- Fast to apply (no deployment), good for campaigns/landing pages/deep links
- Broadly protects entire page entry
- Key return is automatic by default (
data-nf-return-key)
When is it suitable?
- Promotion/event/landing URLs with a lot of external inflow.
Code-based Integration
What does it do?
- Traffic control is applied by calling NetFUNNEL functions in your JavaScript code
- You have full control over when and where to apply waiting rooms
- Functions are called at specific points in your app's flow
User Experience (UX)
- When a waiting room is needed, a modal/layer opens on the current screen → once entry is allowed, the modal closes and the subsequent logic runs immediately.
Characteristics
- Precise control over traffic control timing
- Native web UI experience
- Best for web apps and complex user flows
Key Difference Between Control Types:
- Basic Control (Code-based Integration): Controls entry speed (key returned quickly)
- Section Control (Code-based Integration): Maintains fixed capacity (key held until section exit)
When is it suitable?
- To protect in-app button-click actions such as login/checkout/order/upload
- To protect asynchronous backend API calls rather than page access units
Control Types
The NetFUNNEL JavaScript Agent supports three control types:
| Control Type | Purpose | Best For | Key Management |
|---|---|---|---|
| URL-Triggered Integration | Controls page entry speed | Landing pages, promotion URLs, external links | Automatic key return - protect page entry |
| Code-based Integration - Basic Control | Controls action speed | Button clicks, API calls, page navigation | Key returned quickly after action completes |
| Code-based Integration - Section Control | Maintains concurrent user count | Multi-step processes, checkout flows | Key held until section exit (entire process completes) |
Control Type Comparison
URL-Triggered Integration
What it does:
- Controls how fast users can access specific pages
- Traffic control is applied automatically when URL patterns match
- Key is returned automatically when page loads
- No code changes required
Key Management: Key is returned automatically by default (data-nf-return-key).
Use cases:
- Landing page protection
- Promotion URL control
- External link defense
- Campaign page management
Example flow:
Code-based Integration - Basic Control
What it does:
- Controls how fast users can perform specific actions
- Each user gets a key when they start an action
- Key is returned quickly when the action completes
- Next user can enter only after previous user returns their key
Key Management: Key is returned immediately after the specific action completes (e.g., page loads, API call finishes).
Use cases:
- Button click rate limiting
- API call throttling
- Login attempt control
- Page navigation protection
Example flow:
Code-based Integration - Section Control
What it does:
- Maintains a fixed number of concurrent users in a specific section
- Users wait in queue until a slot becomes available
- Key is held until user completes the entire section
- Next user enters only when current user exits the section
Key Management: Key is held throughout the entire multi-step process, only returned when the entire section/process is complete (e.g., checkout finished, payment processed).
Use cases:
- Checkout process control
- Payment flow management
- Multi-step form completion
- Resource-intensive operations
Example flow:
Decision Matrix
| Your Need | Recommended Method | Control Type | Key Management Strategy |
|---|---|---|---|
| "I want to limit how fast users can access my landing page" | URL-Triggered Integration | N/A | Automatic key return - protect page entry |
| "I want to limit how fast users can click buttons" | Code-based Integration | Basic Control (Code-based Integration) | Quick key return - protect individual actions |
| "I want to limit how many users can checkout simultaneously" | Code-based Integration | Section Control (Code-based Integration) | Hold key until checkout complete - control capacity |
| "I want to protect my login screen" | Code-based Integration | Basic Control (Code-based Integration) | Quick key return - simple entry protection |
| "I want to control a multi-step process" | Code-based Integration | Section Control (Code-based Integration) | Hold key until process complete - maintain occupancy |
| "I want to throttle API calls" | Code-based Integration | Basic Control (Code-based Integration) | Quick key return - rate limiting per call |
| "I want to control payment processing" | Code-based Integration | Section Control (Code-based Integration) | Hold key until payment complete - resource management |
Implementation Complexity
URL-Triggered Integration
- Setup: Simple
- Code: None required
- Maintenance: Low
- Key Management: Automatic
- Best for: Quick implementation, page-level protection
Code-based Integration - Basic Control
- Setup: Simple
- Code: Minimal
- Maintenance: Low
- Key Management: Simple (quick return)
- Best for: Quick implementation, simple use cases
Code-based Integration - Section Control
- Setup: Moderate
- Code: More complex
- Maintenance: Medium
- Key Management: Complex (hold until complete)
- Best for: Complex workflows, resource management
Can I Use Multiple Methods?
Yes! You can use multiple methods in the same application:
// URL-Triggered for landing page protection
// (configured in console)
// Basic Control for login
function handleLogin() {
Netfunnel.nfStart("login_project", "login_segment", loginCallback);
}
// Section Control for checkout
function startCheckout() {
Netfunnel.nfStartSection("checkout_project", "checkout_segment", checkoutCallback);
}
Common patterns:
- Use URL-Triggered Integration for page entry protection
- Use Basic Control (Code-based Integration) for entry points (login, main features) - quick key return after page loads
- Use Section Control (Code-based Integration) for critical processes (checkout, payment) - hold key until entire process complete
Practice Projects Available
Need a basic project to practice with? Check out our Sample Projects which include a Web Application (Vanilla JavaScript MPA) template ready for NetFUNNEL integration practice.