Getting Started

Install LinkFox with npm or without npm, then choose the right integration path.

Choose an integration path

LinkFox supports two primary ways to integrate:

Use npm if your app already has a package manager and build step
Skip npm if you want to paste a script tag into static HTML, a CMS, or a site builder

Install with npm

Recommended for React, Next.js, Nuxt, Astro, Vite and similar frameworks.

1. Install packages

npm install @linkfox/web @linkfox/core

You can also use:

pnpm add @linkfox/web @linkfox/core

yarn add @linkfox/web @linkfox/core

2. Register Web Components on the client

import '@linkfox/web';

export function Sidebar() {
  return (
    <linkfox-widget
      slug="game-father"
      api-key={process.env.NEXT_PUBLIC_LINKFOX_API_KEY}
      group="game"
      title="Recommended Sites"
    />
  );
}

3. Use the core client on the server

import { createLinkFoxClient } from '@linkfox/core';

const linkfox = createLinkFoxClient({
  apiKey: process.env.LINKFOX_API_KEY!,
});

export async function getNetwork() {
  return linkfox.getSiteDelivery('game-father', {
    group: 'game',
    utmKey: 'ref',
    utmValue: 'server',
  });
}

SSR with a private API key

If you need private LinkFox data, do not pass api-key into a browser component. Use @linkfox/core on the server, then render the returned sites with your own React markup.

Next.js Server Component example

import { createLinkFoxClient } from '@linkfox/core';

const linkfox = createLinkFoxClient({
  apiKey: process.env.LINKFOX_API_KEY!,
});

export async function FooterLinks() {
  const data = await linkfox.getSiteDelivery('game-father', {
    group: 'game',
    utmKey: 'ref',
    utmValue: 'footer',
  });

  return (
    <div className="inline-flex flex-wrap items-center gap-2">
      {data.items.map((item) => (
        <a key={item.id} href={item.url} target="_blank" rel="noreferrer">
          {item.name}
        </a>
      ))}
    </div>
  );
}

When to choose SSR

Choose SSR when the network includes private or draft sites
Choose SSR when you do not want to expose your API key to the browser
Choose SSR when you want full control over HTML and styles
Choose Web Components only for public delivery in the browser

Install without npm

Best for static sites, CMS templates, WordPress snippets, Webflow embeds, and plain HTML pages.

Option A. Download the source zip

If you do not want to publish or install from npm, download the packaged source bundle:

Download LinkFox SDK source zip

After extracting it, copy these folders into your React app:

packages/linkfox-web/src
packages/linkfox-core/src

Recommended target structure:

src/lib/linkfox/core/*
src/lib/linkfox/web.ts

Then import the web components once on the client:

import '@/lib/linkfox/web';

export function Sidebar() {
  return (
    <linkfox-widget
      slug="game-father"
      api-key={process.env.NEXT_PUBLIC_LINKFOX_API_KEY}
      group="game"
      title="Recommended Sites"
    />
  );
}

If you only want data access, copy linkfox-core/src and call the client directly:

import { createLinkFoxClient } from '@/lib/linkfox/core';

const linkfox = createLinkFoxClient({
  apiKey: process.env.LINKFOX_API_KEY!,
});

Option B. Import the component script

<script type="module">
  import 'https://linkfox.dev/packages/linkfox-web/dist/index.js';
</script>

1. Place a component in your HTML

<linkfox-grid
  slug="game-father"
  group="game"
  title="Related Products"
  max-items="4"
  utm-key="ref"
  utm-value="landing"
></linkfox-grid>

This browser pattern is for public delivery. Do not paste a private api-key into page source.

2. Optional: add CSS overrides

<style>
  linkfox-grid.custom-links {
    --lf-background: transparent;
    --lf-border: rgba(0, 0, 0, 0.08);
    --lf-shell-padding: 0;
  }

  linkfox-grid.custom-links::part(card) {
    border-radius: 10px;
  }
</style>

What to choose

Choose @linkfox/web when you want ready-made UI blocks
Choose @linkfox/core when you only need structured data
Choose the source zip when you want to vendor LinkFox directly into your repo
Choose REST API when you want plain JSON over HTTP without importing LinkFox packages

Getting Started

On this page