NanoLog Docs
Dashboard
NanoLog Docs

Quickstart & Installation

Getting NanoLog up and running on your platform takes less than two minutes. The widget is designed to be lightweight, asynchronous, and completely isolated from your existing CSS and JavaScript so it won't break your site. Once installed, it renders a gorgeous launcher FAB (Floating Action Button) that loads the unified in-app widget panel (housing updates, roadmaps, and feedback).

[!TIP] Integrating using AI Assistants? We provide a machine-readable llms.txt configuration file. Simply feed it to Cursor, GitHub Copilot, Gemini, or ChatGPT to get 100% correct, bug-free instructions for script injection, HMAC server-side signatures, custom theme bindings, and trigger hooks instantly.

Choose Your Installation Method

Select the approach that matches your stack:

Method 1: NPM Package & React SDK (@ahm-labs/nanolog)

For modern React, Next.js (App Router or Pages Router), Vite, or TypeScript applications, install our official SDK:

npm install @ahm-labs/nanolog
# or
pnpm add @ahm-labs/nanolog
# or
yarn add @ahm-labs/nanolog

Drop the <NanoLog /> component directly into your root layout or provider:

// app/layout.tsx or app/providers.tsx
import { NanoLog } from '@ahm-labs/nanolog/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <NanoLog appId="YOUR_APP_ID" />
      </body>
    </html>
  );
}

Read the full NPM Package & React SDK Guide for custom trigger buttons, hooks (useNanoLog()), and programmatic control.

Method 2: Universal HTML Script Tag (Vanilla JS, Astro, Vue, Laravel, etc.)

  1. Log into your NanoLog Dashboard.
  2. If you haven't already, create a New Project for your application.
  3. On the project home page, copy your project's customized HTML installation snippet.

Installation Snippet Tab

  1. Copy the provided HTML snippet. It will look like this:
<script src="https://nanolog.dev/widget.min.js" defer></script>
<script>
  window.addEventListener('load', function() {
    window.NanoLog.init({
      appId: 'YOUR_APP_ID',
      // Optional: Context data for segmentation
      context: {
        plan: 'pro',
        userId: '12345'
      }
    });
  });
</script>
  1. Paste this snippet into the <head> or just before the closing </body> tag of your application's HTML template.

When loaded, the launcher will mount itself seamlessly on your page. When users click it, the high-fidelity in-app widget drawer will open automatically.

Embedded Widget Preview

Method 3: AI Coding Agents via Model Context Protocol (@ahm-labs/nanolog-mcp)

Connect Cursor, Claude Code, Antigravity, or Windsurf directly to your NanoLog workspace so your AI assistants can triage customer feedback and publish release notes right from your terminal:

npx -y @ahm-labs/nanolog-mcp

Add to your .cursor/mcp.json or claude_desktop_config.json:

{
  "mcpServers": {
    "nanolog": {
      "command": "npx",
      "args": ["-y", "@ahm-labs/nanolog-mcp"],
      "env": {
        "NANOLOG_API_URL": "https://nanolog.dev",
        "NANOLOG_API_KEY": "YOUR_NANOLOG_API_KEY",
        "NANOLOG_APP_ID": "YOUR_APP_ID"
      }
    }
  }
}

Read the full MCP Server Documentation for supported tools and automated workflow examples.

Security Configuration & Allowed Domains

To prevent unauthorized domains from embedding your widget and consuming your monthly usage quota, NanoLog strictly enforces Allowed Domains security.

  1. Navigate to the Advanced & Security page under Project Settings in your sidebar.
  2. Enter the allowed domain names (separated by commas or on new lines) where the widget is authorized to load (e.g., https://mywebsite.com, http://localhost:3000).
  3. Turn on the Allow Localhost setting if you want to allow local testing and development.
  4. Click Save Settings. Any requests originating from unauthorized domains will be immediately blocked.

Note: If you are developing locally, make sure to enable "Allow Localhost Testing" in the Advanced Settings, otherwise the widget will refuse to load!

Allowed Domains Security

That's it! Your widget is now fully secure, live, and ready to engage your users!

Next Steps

Now that your widget is live, you can start publishing updates!