Setup Instructions

Plain HTML

For a standard HTML website, copy the following two lines and paste them inside the <head> section of your HTML file(s), preferably just before the closing </head> tag. 

<link rel="stylesheet" href="https://unpkg.com/checkra@latest/dist/style.css">
<script src="https://unpkg.com/checkra@latest/dist/checkra.umd.cjs" defer></script>

Checkra will appear automatically once the page loads.

Shopify

To add Checkra to your Shopify theme and have it appear only during theme development or preview, follow these steps:

  1. Go to your Shopify Admin > Online Store > Themes.
  2. Find your current theme, click "Actions" > "Edit code".
  3. Under "Layout", click on theme.liquid.
  4. Find the closing </head> tag.
  5. Paste the following code snippet just before the closing </head> tag. This uses Shopify's Liquid templating to detect if you're viewing a non-live theme or using the theme editor/previewer.
{# Check if it's a development theme or preview mode #}
{% if theme.role == 'development' or request.design_mode %}

  <!-- Load Checkra only in development/preview -->
  <link rel="stylesheet" href="https://unpkg.com/checkra@latest/dist/style.css">
  <script src="https://unpkg.com/checkra@latest/dist/checkra.umd.cjs" defer></script>

{% endif %}

6. Click "Save". Checkra will now only appear when you are previewing the theme or working in the theme editor, not on your live storefront.

Squarespace

To add Checkra to your Squarespace site so it appears only when you are logged in and editing/previewing (not for public visitors):

  1. Go to your Squarespace Dashboard > Settings > Advanced > Code Injection.
  2. In the "Header" section, paste the following code snippet. This uses Squarespace's {.squarespace-user-logged-in} tag which only renders content when an administrator is logged in.
{.squarespace-user-logged-in}
  <!-- Load Checkra only when logged in -->
  <link rel="stylesheet" href="https://unpkg.com/checkra@latest/dist/style.css">
  <script src="https://unpkg.com/checkra@latest/dist/checkra.umd.cjs" defer></script>
{.end}

3. Click "Save". Checkra should now only appear for logged-in administrators, effectively acting as a preview-only tool.

Note: Code Injection is typically available on Business and Commerce plans.

Webflow

Webflow doesn't have a straightforward way to detect "preview" mode via custom code for conditional loading. Here are two common approaches to use Checkra only during development:

Approach 1: Manual Add/Remove (Recommended)

  1. Go to your Webflow Project Settings > Custom Code.
  2. In the "Head Code" section, paste the standard Checkra code snippet while you are designing and testing:
    3. <!-- Add this code when developing -->
<link rel="stylesheet" href="https://unpkg.com/checkra@latest/dist/style.css">
<script src="https://unpkg.com/checkra@latest/dist/checkra.umd.cjs" defer></script>
  3. Click "Save Changes". Use Checkra within the Webflow Designer preview or on your staging domain (e.g., `your-site.webflow.io`).
  4. IMPORTANT: Before publishing to your live domain, remove this code snippet from the "Head Code" section and save changes.

Approach 2: Staging Domain Only

If you primarily test on your Webflow staging domain (`*.webflow.io`), you can add JavaScript to check the hostname.

  1. Go to Project Settings > Custom Code.
  2. In the "Footer Code" section (important: must be footer), paste this script:
<script>
(function() {
  // Load Checkra only on the .webflow.io staging domain
  if (window.location.hostname.endsWith('.webflow.io')) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://unpkg.com/checkra@latest/dist/style.css';
    document.head.appendChild(link);

    var script = document.createElement('script');
    script.src = 'https://unpkg.com/checkra@latest/dist/checkra.umd.cjs';
    script.defer = true;
    document.head.appendChild(script);
  }
})();
</script>

3. Click "Save Changes" and publish. Checkra will now load only on your `*.webflow.io` domain, not your custom domain(s).

Note: Adding custom code usually requires a paid Webflow site plan.

NPM / Build Tools

If you're using a JavaScript framework or build tools (like Vite, Webpack, etc.):
1. Install the package using your preferred package manager.
2. Import initCheckra in your project's entry point.
3. Include the CSS via a <link> tag in your HTML's <head> tag.
4. Call initCheckra() when your application mounts or the DOM is ready. 

# 1. Install
npm install checkra
# or yarn add checkra
# or pnpm add checkra

# 2. Add CSS to HTML 
<link rel="stylesheet" href="https://unpkg.com/checkra@latest/dist/style.css">
# Or import it if your bundler supports it:
# import 'checkra/dist/style.css';

# 3. Import in your main JS/TS file
import { initCheckra } from 'checkra';

# 4. Initialize (example for vanilla JS)
document.addEventListener('DOMContentLoaded', () => {
  const checkraInstance = initCheckra({
    // Optional configuration
    // isVisible: true // Default is true
  });
});