Get Started

Documentation

Ship changelogs
in under five minutes.

Install the widget, connect GitHub, and let ShipLog turn commits into polished product updates.

Quick start

Paste one script tag before closing body.

Find your widget ID in the dashboard under Widget. Replace sl_YOUR_WIDGET_ID below.

html
<script
  src="https://www.getshiplog.site/widget.js"
  data-widget-id="sl_YOUR_WIDGET_ID"
></script>

By default a floating What's new button appears. To use your own button instead, add data-shiplog-open — see Custom triggers.

Custom triggers

Open the changelog from any button in your app.

When at least one custom trigger exists, the floating button is hidden automatically.

Data attribute (no JavaScript)

html
<button data-shiplog-open>What's New</button>

<script src="https://www.getshiplog.site/widget.js" data-widget-id="sl_YOUR_WIDGET_ID"></script>

Attach by selector

javascript
ShipLog.attach("#changelog-btn");
ShipLog.detach("#changelog-btn"); // cleanup

React / Next.js

tsx
useEffect(() => {
  ShipLog.attach("#changelog-btn");
  return () => ShipLog.detach("#changelog-btn");
}, []);

Or put data-shiplog-open on your button — no effect cleanup needed.

GitHub sync

Keep your changelog current without manual imports.

ShipLog reads commits and merged pull requests from your connected repo, rewrites them with AI, and creates changelog entries.

Easiest setup: open your project in the dashboard and click Auto-sync. ShipLog registers the GitHub webhook for you.

Manual webhook (optional)

If you prefer to configure GitHub yourself, use this payload URL:

url
https://www.getshiplog.site/api/webhook/github
FieldValue
Content typeapplication/json
EventsPushes, Pull requests
SecretMust match GITHUB_WEBHOOK_SECRET

You can also hit Sync Manually in the dashboard anytime for a manual pull. Duplicate entries are skipped automatically.

Script options

Configure the widget via data attributes on the script tag.

AttributeDefaultDescription
data-widget-idrequiredYour project widget ID
data-positionbottom-rightbottom-right, bottom-left, top-right, top-left
html
<script
  src="https://www.getshiplog.site/widget.js"
  data-widget-id="sl_abc123"
  data-position="bottom-left"
></script>

Next.js

Add the widget to your root layout.

tsx
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <script
          src="https://getshiplog.site/widget.js"
          data-widget-id="YOUR_WIDGET_ID"
          async
        ></script>
      </body>
    </html>
  )
}

For static sites, WordPress, Shopify, or Webflow — paste the script tag before </body>. Same snippet everywhere.

Widget API

Control the panel programmatically.

The script exposes window.ShipLog as soon as it loads.

MethodDescription
ShipLog.attach(selector)Bind click on matching elements
ShipLog.detach(selector)Remove listeners
ShipLog.open()Open the changelog panel
ShipLog.close()Close the panel
ShipLog.refresh()Refetch entries (returns a Promise)
javascript
document.addEventListener("shiplog:ready", () => {
  console.log("Widget ready");
});

document.addEventListener("shiplog:open", () => {
  // panel opened
});

Events dispatched on document: shiplog:ready, shiplog:open, shiplog:close, shiplog:update.

Need a hand?

Connect GitHub and publish your first changelog free — no credit card required.

Get started →