> ## Documentation Index
> Fetch the complete documentation index at: https://docs.linkrunner.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Web SDK

> Complete guide for integrating Linkrunner in web applications

## Requirements

* Modern browser (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+)
* JavaScript ES6+ support
* HTTPS enabled (recommended for production)

## Getting Your Web SDK Token

Before installing the SDK, you'll need to obtain your Web SDK token:

1. Go to [https://linkrunner.io/dashboard](https://linkrunner.io/dashboard)
2. In the top navigation, click on **Settings**
3. In the left sidebar, select **Web SDK**
4. Copy your **Web SDK Token** from this page

## Installation

### CDN

Add the Linkrunner SDK to your HTML:

```html theme={null}
<!-- Auto-initialize from script attributes -->
<script src="https://sdk.linkrunner.io/latest/linkrunner-sdk.min.js" token="YOUR_PROJECT_TOKEN" debug="true"></script>
```

### NPM Package

```bash theme={null}
# Using npm
npm install @linkrunner/web-sdk

# Using yarn
yarn add @linkrunner/web-sdk
```

### Module Import

After installing via NPM, import the SDK:

```javascript theme={null}
// ES Module
import LinkrunnerSDK from "@linkrunner/web-sdk";

// CommonJS
const LinkrunnerSDK = require("@linkrunner/web-sdk");
```

## Configuration

### Script Attributes (CDN)

When using the CDN version, configure via script attributes:

```html theme={null}
<script src="https://sdk.linkrunner.io/latest/linkrunner-sdk.min.js" token="YOUR_PROJECT_TOKEN"></script>
```

### Manual Initialization

For manual initialization or when using NPM:

```javascript theme={null}
window.LinkrunnerSDK.init({
    token: "YOUR_PROJECT_TOKEN",
});
```

### Getting Store Links (CDN)

After initialization, you can use the `getStoreLink` function:

```javascript theme={null}
// Initialize the SDK first
window.LinkrunnerSDK.init({
    token: "YOUR_PROJECT_TOKEN",
});

// Get store link
async function handleGetStoreLink() {
    try {
        const storeLink = await LinkrunnerSDK.getStoreLink();
        console.log("Store link:", storeLink);
        // Use the store link as needed
    } catch (error) {
        console.error("Error getting store link:", error);
    }
}

// Call the function when needed
handleGetStoreLink();
```

## Verification

To verify the SDK is working:

1. Open your browser's developer console
2. Look for "Linkrunner SDK initialized" message
3. Check that no errors are displayed

<Note>Enable debug mode during development to see detailed logs.</Note>

## Framework Integrations

### React

#### Installation

```bash theme={null}
npm install @linkrunner/web-sdk
# or
yarn add @linkrunner/web-sdk
```

#### Basic Setup

```javascript theme={null}
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>
    );
}
```

#### Getting Store Links

Use the `getStoreLink` function to retrieve store links for your products:

```javascript theme={null}
import { useLinkrunner } from "@linkrunner/web-sdk/react";

export default function ProductComponent() {
    const { getStoreLink } = useLinkrunner({
        token: "YOUR_PROJECT_TOKEN",
    });

    const handleGetStoreLink = async () => {
        try {
            const storeLink = await getStoreLink();
            if (storeLink) {
                window.open(storeLink, "_blank");
            }
            // Use the store link as needed
        } catch (error) {
            console.error("Error getting store link:", error);
        }
    };

    return (
        <div>
            <h2>Product Page</h2>
            <button onClick={handleGetStoreLink}>Get Store Link</button>
        </div>
    );
}
```

#### With React Router

```javascript theme={null}
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

```bash theme={null}
npm install @linkrunner/web-sdk
# or
yarn add @linkrunner/web-sdk
```

#### Pages Router

```javascript theme={null}
// 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

```javascript theme={null}
// 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>;
}
```

## Next Steps

<CardGroup cols={2}>
  <Card title="Test Your Integration" icon="flask" href="/testing/integration-testing">
    Validate your setup end-to-end
  </Card>

  <Card title="Track Custom Events" icon="bolt" href="/api-reference/event-capture">
    Learn about event tracking
  </Card>
</CardGroup>

## Support

If you encounter issues during integration, contact us at [support@linkrunner.io](mailto:support@linkrunner.io).