Get copy and micro-UX improvements for your existing website. Share the results and analyse the impact all from the same tool.
- ✨ AI Live Editor: Instantly make, test and analyze copy & micro-UX changes using an intuitive AI sidebar – without leaving your own website. Say goodbye to slow PRs and clunky CMS workflows
- 🚀 Ship changes with one command: Simply type
/publishto generate a publicly shareable URL, or/saveto create a private draft
- Developers: Rapid Prototyping & Validation of UI/UX hypotheses
- Designers: Iterate on live UI visuals, saving devs from back-and-forths
- Growth Teams: Validate UI ideas quickly, preventing dev effort on unproven features
Add the following lines inside the <head> section of your HTML file:
<!-- Inside the <head> section -->
<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># Using npm
npm install checkra
# Using yarn
yarn add checkra
# Using pnpm
pnpm add checkraNote: When installing via a package manager, you still need to include the CSS separately. Add the following line to the <head> of your HTML:
<link rel="stylesheet" href="https://unpkg.com/checkra@latest/dist/style.css">Basic Usage (ES Module / ESM CDN):
import { initCheckra } from 'checkra';
// Initialize Checkra (usually after the DOM is ready)
const checkra = initCheckra({
isVisible: false // Start hidden, show later via API
});
// Show the viewer when a custom button is clicked
const btn = document.getElementById('show-sidepanel');
btn?.addEventListener('click', () => {
checkra?.show();
});
// Optionally hide it again
const hideBtn = document.getElementById('hide-sidepanel');
hideBtn?.addEventListener('click', () => {
checkra?.hide();
});If you are using the simple CDN script tag installation but need to configure Checkra before it initializes (e.g., to disable the UI conditionally), you can define a global CheckraConfig object in a <script> tag placed before the main Checkra script:
<!-- Place this *before* the esm checkra.js script -->
<script>
// Example: Disable Checkra UI based on some condition
if (window.location.hostname !== 'dev.mysite.com') {
window.CheckraConfig = { isVisible: false };
}
// If CheckraConfig is not set, default options will be used (isVisible: true)
</script>
<!-- Standard Checkra Scripts -->
<link rel="stylesheet" href="https://unpkg.com/checkra@latest/dist/style.css">
<script type="module" src="https://unpkg.com/checkra@latest/dist/checkra.js" defer></script>A common requirement when using platforms like Shopify, Squarespace, or Webflow is to load Checkra only during development or preview sessions, not on the live site. Instead of using window.CheckraConfig, it's generally better to conditionally include the Checkra <link> and <script> tags using your platform's specific templating or logic. Refer to the Setup Guide for platform-specific examples.
The initCheckra(options) function returns an API object (or null on failure) with the following methods:
show(): void– show the AI sidepanel.hide(): void– hide the AI sidepanel.showSettings(): void– open the settings modal.destroy(): void– tear down UI and listeners.startLogin(): Promise<void>– begin Google OAuth flow.handleAuthCallback(): Promise<boolean>– finalize OAuth on the callback page.logout(): Promise<void>– clear session.isLoggedIn(): Promise<boolean>– check session.getAuthToken(): Promise<string | null>– get (and refresh) bearer token.
The initCheckra function accepts an optional configuration object:
interface CheckraOptions {
/**
* Whether to render the Checkra UI elements (button, viewer) in the DOM.
* If set to false, the library will not add any UI elements, but API methods
* like destroy() might still be relevant.
* @default true
*/
isVisible?: boolean;
/**
* Custom CSS styles for UI elements (if needed in the future).
* Currently unused.
*/
// style?: Partial<CSSStyleDeclaration>; // Example if needed later
}By default, the Checkra sidepanel will "dock" to the right side of your page by applying a margin-right to the <html> element. This pushes your page content to the left, making the panel sit alongside your website content rather than overlaying it.
- A class
checkra-panel-openis added to the<html>element when the panel is visible. - The width of the panel (and thus the margin applied) is controlled by the CSS custom property
--checkra-panel-width(defaults to360px). You can override this in your own CSS if needed::root { --checkra-panel-width: 400px; /* Example: make panel wider */ }
- On smaller screens (typically <= 768px wide), this docking behavior is disabled, and the panel will revert to an overlay, taking up the full width of the viewport. This is to ensure a better experience on mobile devices.
If this docking behavior interferes with your site's layout (e.g., sites with complex horizontal scrolling or full-width fixed elements), you can customize the behavior of .checkra-panel-open or #checkra-feedback-viewer in your own stylesheets.