@pageloop/vanilla

The framework-agnostic PageLoop widget: a vanilla DOM renderer plus a one-call PageLoop.init(). Use it in any bundler-based app (Vite, webpack, esbuild — with or without a framework), or drop the prebuilt UMD bundle into a plain <script> tag.

The React / Preact / Solid wrappers ship as subpaths of @pageloop/client (@pageloop/client/react, @pageloop/client/preact, @pageloop/client/solid) and are thin layers over this package; reach for them only if you want framework-native hooks.

Install (bundler / SPA)

pnpm add @pageloop/vanilla

Initialise once at your app's entry point. The widget mounts into document.body and follows client-side route changes (pushState/popstate/hashchange) on its own, so a single call covers every route. Import the stylesheet alongside it.

// pageloop.ts — imported once from your app entry (main.ts / index.ts)
import { PageLoop } from '@pageloop/vanilla';
import '@pageloop/vanilla/style.css';

// Keep the instance around if you want imperative access later.
export const pageloop = PageLoop.init({
  endpoint: 'https://your-pageloop-server.com', // your server's origin
  projectId: 'your-project-slug',               // from the project dashboard
  // token: existingSessionJwt,                  // optional: SSO from the host app
});

// main.ts
import './pageloop'; // side-effect import boots the widget on app start

PageLoop.init(config) returns the running PageLoop instance for imperative use (pageloop.comments, pageloop.bus.on(...), pageloop.stop(), …).

Plain <script> (no bundler)

For an existing HTML page, load the prebuilt UMD bundle and call init:

<link rel="stylesheet" href="https://your-pageloop-server.com/pageloop/vanilla.css" />
<script src="https://your-pageloop-server.com/pageloop/pageloop.umd.js" defer></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    PageLoop.init({
      endpoint: 'https://your-pageloop-server.com',
      projectId: 'your-project-slug',
    });
  });
</script>

For self-updating script-tag installs, prefer the loader shim (@pageloop/loader) which fetches the current bundle on each load and rolls back on failure.

Config

PageLoopConfig — endpoint and projectId are required; token, transport, autoDiscover, and ui ({ theme, toolbarPosition, widgetMode, sidebarPosition, … }) are optional.

Other exports

VanillaRenderer (the UIRenderer used by the framework wrappers), CommentTooltip, and Tooltip are exported for advanced/custom integrations.