Skip to main content
Version: 4.6.1

Quickstart

Get your NetFUNNEL 4 JavaScript Agent up and running in 5-10 minutes with this quickstart guide.

What you can do with this guide​

  • URL-Triggered Integration: Automatically apply waiting rooms to specific URLs without code changes
  • Code-based Integration: Control traffic at the button/API level with precise timing
Choose Your Method

Not sure which integration method to use? Check out the Integration Methods Overview to compare both approaches and find the best fit for your use case.

Prerequisites​

  • NetFUNNEL console access
  • Your web application's HTML files
  • Basic understanding of HTML/JavaScript
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.

Step 1: Get Your Initialization Code​

Production Code Required

The code below is an example only. For production, you must use the dedicated initialization code from your NetFUNNEL console.

How to get your real initialization code:

  1. Go to NetFUNNEL console → Agent → Client-side Agent → JavaScript
  2. Copy the initialization code from section 2. Installation Methods

Example initialization code:

<script
    src="https://agent-lib.stclab.com/agents/client/javascript/netfunnel-javascript-agent.js"
    data-nf-client-id="your-client-id"
></script>

Step 2: Choose Your Integration Method​

Option A: URL-Triggered (5 minutes)​

Best for: Landing pages, promotions, blocking entire page access

  1. Add the script to your HTML <head> (from Step 1)
  2. Create a segment in NetFUNNEL console:
    • Go to Projects → Segment → Create Segment
    • Choose Basic Control
    • Set Limited Inflow to 0 (for testing)
  3. Add a trigger rule:
    • Validator: URL
    • Component: URL
    • Match: Equals
    • Value: Your exact page URL (e.g., https://example.com/)

Result: Users accessing your URL will be redirected to a waiting room.

Option B: Code-based (10 minutes)​

Best for: Button clicks, API calls, precise control

  1. Add the script to your HTML <head> (from Step 1)
  2. Create a segment in NetFUNNEL console (same as Option A)
  3. Add this code to your button click handler:
// When user clicks a button
button.addEventListener('click', () => {
  if (typeof window.nfStart === 'function') {
    nfStart({
      projectKey: 'your_project_key',    // From console
      segmentKey: 'your_segment_key'     // From console
    }, function(response) {
      if (response.status === 'Success') {
        // Run your original logic here
        console.log('User can proceed!');
      }
    });
  }
});
  1. Return the key when done:
// After the action completes
if (typeof window.nfStop === 'function') {
  nfStop({
    projectKey: 'your_project_key',
    segmentKey: 'your_segment_key'
  });
}

Result: A modal waiting room appears when users click the button.

Step 3: Test It Works​

  1. Set Limited Inflow to 0 in your segment (waiting room should appear)
  2. Check the waiting room displays correctly
  3. Set Limited Inflow to 1 (should enter immediately)
  4. Verify key return in Network tab (ts.wseq?opcode=5004 with HTTP 200)

Need Help?​

  • Troubleshooting: Common issues and solutions
  • Check the browser console for NetFUNNEL logs (enable data-nf-print-log="true")
  • Verify your project/segment keys match the console exactly