Website widget

Add Shiplet to the website your team already uses. Reviewers select an element, leave a comment, and return to the same shared feedback in Shiplet and the agent queue. Your site's login, forms, navigation, and live connections keep running on their original origin.

Install in two steps

1. Open Connect a website, sign in, choose an existing Shiplet or create one, and enter your site URL. Choose Create install snippet. 2. Copy the generated snippet into your shared page layout, once. Place the element near the end of the body, outside containers with transforms or clipping.

<script src="https://shiplet.cc/api/embed/widget.js" defer></script>
<shiplet-feedback installation-id="YOUR_INSTALLATION_ID"></shiplet-feedback>

Use the actual public installation ID from the setup page. It identifies the site connection and grants no reviewer access. There is no npm dependency, framework adapter, API key, or host backend to configure.

Register staging, production, and localhost separately. Each installation binds one Shiplet to one exact origin, including its port. HTTPS is required except for localhost development. Preview deployments with changing hostnames need their own registrations; wildcard origins are not accepted.

Paste this into your agent

The setup page generates this prompt with your actual snippet and origin. Copy that filled-in version, or replace the placeholders below:

Install Shiplet feedback in this frontend using the official instructions at
https://shiplet.cc/docs/embed.

Use this public installation ID: YOUR_INSTALLATION_ID
Registered site origin: https://YOUR_SITE
Shiplet origin: https://shiplet.cc

Load https://shiplet.cc/api/embed/widget.js once and mount
<shiplet-feedback installation-id="YOUR_INSTALLATION_ID"></shiplet-feedback>
once in the shared browser layout, outside route-specific content.

Preserve the site's authentication, navigation, and interactions. Do not add
API keys, a backend proxy, or a framework dependency. For SSR, initialize the
element in the browser and remove it during cleanup. Reuse an existing loader.
If a CSP exists, add the narrowly scoped script-src, style-src, and frame-src permissions
from the install guide. Never replace the site's CSP wholesale.

Verify: open feedback, sign in, select an element, submit and confirm a harmless
test comment, check it from another authorized reviewer, navigate to another
route, test a narrow viewport, and verify removing the element removes controls.
Register each additional origin through Shiplet. Report what was tested.

React and Next.js

Load the script once in the app shell. This component mounts the custom element after hydration and removes it on unmount. Next.js uses it as a client component.

"use client";
import { useEffect } from "react";

export function ShipletFeedback() {
  useEffect(() => {
    const src = "https://shiplet.cc/api/embed/widget.js";
    if (!document.querySelector(`script[src="${src}"]`)) {
      const script = document.createElement("script");
      script.src = src;
      script.defer = true;
      document.head.appendChild(script);
    }
    const widget = document.createElement("shiplet-feedback");
    widget.setAttribute("installation-id", "YOUR_INSTALLATION_ID");
    document.body.appendChild(widget);
    return () => widget.remove();
  }, []);
  return null;
}

For Vue, Svelte, Astro, static HTML, and CMS templates, use the two-tag snippet in the shared layout. If the framework manages mounting in JavaScript, create the element in its browser mount hook and remove it in its cleanup hook. SPA history changes are detected without replacing the host's history methods.

Review together

Choose Feedback, then Annotate, and select an element on the original page. Add the comment and confirm it in Shiplet's secure window. Other authorized reviewers receive the shared comments, and the same records appear in Shiplet's Feedback view and its documented REST and Code Mode MCP interfaces. Click a numbered pin to open its thread. Reply, resolve, and reopen from the widget; confirm each change in the secure Shiplet window. Shared threads refresh every five seconds while the widget is visible.

The site does not receive reviewer credentials. When third-party cookies are blocked, sign-in uses a secure Shiplet popup and a single-use handoff directly to Shiplet's embedded frame. Allow that popup when prompted. A browser that blocks all embedded storage can still prevent review; use a supported browser or the hosted review flow.

Configuration and removal

Attribute	Meaning
installation-id	Required public ID from Connect a website.
api-url	Optional Shiplet origin. Defaults to the script's origin; useful when self-hosting.
disabled	Boolean attribute. Removes the controls and stops the widget until removed.

To show the widget only in staging or review mode, conditionally mount the element in your application. disabled="false" still disables it because this is an HTML boolean attribute; remove the attribute to enable it.

Remove the script and element to uninstall. To revoke a connection centrally, open Connect a website, select the Shiplet, and choose Disconnect this site. Stored feedback is preserved.

Content Security Policy

Add the Shiplet origin to your existing script-src, style-src, and frame-src directives:

script-src … https://shiplet.cc;
frame-src … https://shiplet.cc;
style-src … https://shiplet.cc;

The widget loads its shadow-root stylesheet from /api/embed/widget.css. You do not need to allow inline styles for the widget. Authentication and feedback requests originate inside the Shiplet frame, so the host does not need Shiplet in its connect-src. Use your own Shiplet origin for self-hosted installations. Do not put credentials or a server installation secret into HTML.

Privacy and compatibility

The widget captures selected element text, page context, and a best-effort DOM image when you annotate. It does not automatically record browsing sessions. Credential-shaped URL parameters are removed. Add data-shiplet-private to an element or container to exclude it from selection and DOM capture, including when a parent container is selected. Form field values are excluded from DOM captures.

DOM images may omit cross-origin images, canvas, video, closed shadow roots, and nested frames. Review the captured context before submitting. Direct selection inside a cross-origin iframe is unavailable. The outer iframe can still be selected and discussed.

The widget requires permission to install code on the host website. For third-party work where you cannot install it, use Browser capture: capture the visible tab with the companion or browser picker, or upload a screenshot. Review and redact it, then share the visual copy for comments.

The separate Experimental URL preview mode is read-only and relocates a public page into Shiplet. It cannot reliably reproduce authentication, origin-bound JavaScript, forms, maps, or live connections. Use the widget for working websites and uploads for builds, files, and captured pages.

Next action

Connect your website, then invite a teammate through Access control and verify one shared comment.