📚 Documentation

Complete guide to integrating and using LiveWebTraffic for real-time website analytics.

🚀 Quick Start

Get started with LiveWebTraffic in 3 simple steps:

  1. Register your website on the homepage
  2. Copy the generated tracking code
  3. Paste it before the closing </body> tag on your website

⚙️ Installation

Step 1: Register Your Website

Visit the Get Started section and enter your website URL:

Website URL: https://yourwebsite.com
Email: your@email.com (optional)

Step 2: Get Your Tracking Code

After registration, you'll receive a unique tracking code:

<!-- LiveWebTraffic Widget -->
<script src="https://livewebtraffic.com/dist/widget.bundle.js"></script>
<script>
  LiveWidget.init({
    trackingCode: 'your-unique-code-here',
    ws: 'wss://livewebtraffic.com'
  });
</script>

Step 3: Add to Your Website

Paste the code before the closing </body> tag on every page you want to track:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your content -->
  
  <!-- LiveWebTraffic - Add before closing body -->
  <script src="https://livewebtraffic.com/dist/widget.bundle.js"></script>
  <script>
    LiveWidget.init({
      trackingCode: 'your-code',
      ws: 'wss://livewebtraffic.com'
    });
  </script>
</body>
</html>

🔧 Configuration

Basic Configuration

The minimum required configuration:

LiveWidget.init({
  trackingCode: 'your-tracking-code',
  ws: 'wss://livewebtraffic.com'
});

Custom Container

If you want the widget to appear in a specific element:

<div id="my-traffic-widget"></div>

<script>
  LiveWidget.init({
    trackingCode: 'your-code',
    ws: 'wss://livewebtraffic.com',
    containerId: 'my-traffic-widget'
  });
</script>

🎨 Widget Options

Option Type Default Description
trackingCode String Required Your unique tracking code
ws String Required WebSocket server URL
containerId String null Custom container element ID
position String 'bottom-right' Widget position: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
theme String 'light' Theme: 'light' or 'dark'

Position Example

// Bottom right (default)
LiveWidget.init({
  trackingCode: 'your-code',
  ws: 'wss://livewebtraffic.com',
  position: 'bottom-right'
});

// Top left
LiveWidget.init({
  trackingCode: 'your-code',
  ws: 'wss://livewebtraffic.com',
  position: 'top-left'
});

Theme Example

// Dark theme
LiveWidget.init({
  trackingCode: 'your-code',
  ws: 'wss://livewebtraffic.com',
  theme: 'dark'
});

🔌 API Reference

See the full API Reference page for complete API documentation.

💡 Examples

WordPress Integration

Add to your theme's footer.php before </body>:

<?php if (!is_admin()) : ?>
  <script src="https://livewebtraffic.com/dist/widget.bundle.js"></script>
  <script>
    LiveWidget.init({
      trackingCode: 'your-code',
      ws: 'wss://livewebtraffic.com'
    });
  </script>
<?php endif; ?>

React Integration

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script1 = document.createElement('script');
    script1.src = 'https://livewebtraffic.com/dist/widget.bundle.js';
    script1.async = true;
    
    script1.onload = () => {
      window.LiveWidget.init({
        trackingCode: 'your-code',
        ws: 'wss://livewebtraffic.com'
      });
    };
    
    document.body.appendChild(script1);
    
    return () => {
      document.body.removeChild(script1);
    };
  }, []);

  return <div>Your App</div>;
}

❓ Frequently Asked Questions

Is LiveWebTraffic free?

Yes! LiveWebTraffic is 100% free to use with unlimited traffic tracking.

Does it slow down my website?

No. The widget is only 6.6KB and loads asynchronously without blocking page rendering.

Is visitor data stored?

We keep the most recent 500 visitors per site. Older data is automatically removed.

Can I hide the widget from certain pages?

Yes, simply don't include the tracking code on those pages.

Does it work with single-page applications (SPAs)?

Yes! The widget works with React, Vue, Angular, and other SPA frameworks.

Need Help? Contact us at support@livewebtraffic.com