This guide provides integration examples for popular web frameworks. Each section includes complete code examples and best practices.

​
React

​
Installation

npm install @linkrunner/web-sdk
# or
yarn add @linkrunner/web-sdk

​
Basic Setup

import { useLinkrunner } from "@linkrunner/web-sdk/react";

export default function App() {
    useLinkrunner({
        token: "YOUR_PROJECT_TOKEN",
        debug: true, // Enable debug logging in development
    });

    return (
        <div className="App">
            <h1>My React App</h1>
            <p>Linkrunner SDK is automatically tracking page views!</p>
        </div>
    );
}

​
With React Router

import { useLinkrunner } from "@linkrunner/web-sdk/react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
    useLinkrunner({
        token: "YOUR_PROJECT_TOKEN",
    });

    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/products" element={<Products />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </BrowserRouter>
    );
}

​
Next.js

​
Installation

npm install @linkrunner/web-sdk
# or
yarn add @linkrunner/web-sdk

​
Pages Router

// pages/_app.js
import { useLinkrunner } from "@linkrunner/web-sdk/react";

export default function MyApp({ Component, pageProps }) {
    useLinkrunner({
        token: "YOUR_PROJECT_TOKEN",
    });

    return <Component {...pageProps} />;
}

​
App Router

app/page.js (App Router)
'use client';
import { useLinkrunner } from '@linkrunner/web-sdk/react';

export default function Home() {
  useLinkrunner({
    token: "YOUR_TOKEN_HERE",
  });

  return (
    <div>
        Example
    </div>
  );
}

​
Support

If you encounter issues during integration, contact us at darshil@linkrunner.io.