Docs · Widget

Framework recipes

ShowKit is a plain <script> tag — it works anywhere HTML works. These are the copy-paste snippets for the most common stacks.

Next.js (App Router)

Use next/script in your root layout so the widget loads on every authenticated page.

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://showkit.dev/api/widget/v1.js"
          data-workspace="acme"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Astro

// src/layouts/Base.astro
<html>
  <body>
    <slot />
    <script src="https://showkit.dev/api/widget/v1.js" data-workspace="acme" defer></script>
  </body>
</html>

Rails (ERB)

<%# app/views/layouts/application.html.erb %>
<body>
  <%= yield %>
  <script src="https://showkit.dev/api/widget/v1.js" data-workspace="acme" defer></script>
</body>

SvelteKit

<!-- src/app.html -->
<body>
  <div>%sveltekit.body%</div>
  <script src="https://showkit.dev/api/widget/v1.js" data-workspace="acme" defer></script>
</body>

Plain HTML / static site

Drop it in the <head>. That's the whole thing.

<head>
  <script src="https://showkit.dev/api/widget/v1.js" data-workspace="acme" defer></script>
</head>

Don't see your framework? If it renders HTML, ShowKit works. The pattern is always the same: drop a <script> tag with data-workspace into the page shell.