Home
Sign up — start free Sign in

How-to guide · chapter 2 of 10

Install on your site

Where to paste the script: plain HTML, Next.js, React, Shopify, WordPress, Webflow.

BugTape is one script. Paste it into the <head> of your site with your project key, and it starts watching for errors on every page that loads it.

Get your key

In the console, open Setup. Step 2 creates a project key that starts with bt_live_. It is shown once, so copy it before you leave the page. You can make a new key any time from Settings → API keys.

The key is public: it can only send reports, never read them. It is fine in your page source.

The script

<script type="module">
  import { init } from 'https://app.bugtape.ai/bugtape.mjs';
  init({ apiKey: 'bt_live_your_key_here' });
</script>

Setup fills in your real key and the choices from its Privacy step (step 3): whether to show the bug-report button (see the bug-report button) and what the replay records. If you use a cookie or consent banner, call init only after the visitor allows it.

Where to paste it

Plain HTML

Paste the script just before </head> in every page, or in the shared layout file that all pages use.

Next.js

Setup's Next.js tab gives you a small component that loads the script with next/script. Render it once from app/layout.tsx. It runs in the browser only.

React, Vue, Svelte and Vite apps

Paste the script into index.html, just before </head>. You do not need an npm package.

Shopify

  1. In Shopify admin, open Online Store → Themes.
  2. On your live theme, choose Edit code.
  3. Open layout/theme.liquid.
  4. Paste the script just before </head> and save.

BugTape now covers your storefront: home, collections, product pages and the cart. It records errors from every script on those pages, including the apps you installed. Shopify's own checkout pages do not load theme scripts, so they are not covered.

WordPress

Add the script to your theme's header, either in the theme's header.php just before </head> or with a plugin that inserts code into the site header.

Webflow

Open Site settings → Custom code, paste the script into Head code and publish.

Sites with a Content Security Policy

Allow https://app.bugtape.ai in script-src (to load the module) and in connect-src (to send reports).

Next

Send your first bug to check the install works.