Installation

Install the SubJolt widget on your site in minutes. Choose your platform for step-by-step instructions.

Key Takeaways

  • Installation typically takes under 10 minutes for most platforms.
  • You'll need admin or editor access to your site's HTML, theme, or page builder.
  • The widget is a single snippet — no additional npm packages, build steps, or backend changes required.
  • After install, verify the widget loads by visiting your site with the SubJolt browser extension or checking the network tab for the widget request.

Platform Guides

  1. Copy the embed code from the setup wizard or your account dashboard
  2. Open your site's HTML and find the closing </body> tag
  3. Paste the embed code just before </body> — this ensures the widget loads after your page content
  4. Save and deploy your changes
  5. Visit your site and open the browser console to confirm the SubJolt script loaded without errors

  1. Log in to your Google Tag Manager workspace
  2. Click Tags → New and name the tag (e.g., 'SubJolt Widget')
  3. Choose Tag Type: Custom HTML
  4. Paste the SubJolt embed code into the HTML field
  5. Set a Trigger: All Pages (or limit to pages where the cancel button appears)
  6. Click Save, then Submit and Publish your workspace changes
  7. Visit your site and verify the widget loads by checking the browser console

  1. Go to your Shopify admin → Online Store → Themes
  2. Click the three-dot menu on your active theme → Edit code
  3. Open theme.liquid (the main layout file)
  4. Paste the SubJolt embed code just before the closing </body> tag
  5. Click Save
  6. Visit your storefront and verify the widget loaded by checking the browser console

  1. Install and activate a header/footer script plugin (e.g., WPCode or Insert Headers and Footers)
  2. Go to the plugin's settings and find the Footer Scripts section
  3. Paste the SubJolt embed code into the footer field
  4. Save changes
  5. If not using a plugin: go to Appearance → Theme Editor, open footer.php, and paste the code before </body>
  6. Visit your site and verify the widget loaded by checking the browser console

  1. Go to your Webflow project settings
  2. Navigate to the Custom Code tab
  3. Paste the SubJolt embed code in the Footer Code section
  4. Click Save
  5. Publish your site to apply the changes
  6. Visit your published site and verify the widget loaded by checking the browser console

  1. For standard React: add the script tag to your public/index.html before the closing </body> tag
  2. For Next.js: use the next/script component with strategy="afterInteractive" in your _app.tsx or layout.tsx
  3. The widget will automatically detect cancel buttons across route transitions
  4. If auto-detection doesn't work with your SPA routing, set a manual CSS selector in the setup wizard
  5. Verify the widget loaded by checking the browser console on your cancel page

  1. In your Squarespace admin, go to Settings → Developer Tools
  2. Click Code Injection
  3. Scroll to the Footer section
  4. Paste the SubJolt embed code into the Footer field
  5. Click Save
  6. Visit your site and verify the widget loaded by checking the browser console

  1. In your Wix Dashboard, go to Settings → Custom Code
  2. Click Add Code
  3. Paste the SubJolt embed code
  4. Set Place Code In to Body - End
  5. Under Pages, select All Pages
  6. Click Apply
  7. Visit your site and verify the widget loaded by checking the browser console

  1. In your BigCommerce admin, go to Storefront → Script Manager
  2. Click Create a Script
  3. Name the script (e.g., 'SubJolt Widget')
  4. Set Location to Footer and Pages to All Pages
  5. Paste the SubJolt embed code into the Script Contents field
  6. Click Save
  7. Visit your storefront and verify the widget loaded by checking the browser console

  1. In your Kajabi admin, go to Settings → Site Details
  2. Scroll to the Code Snippets section
  3. Paste the SubJolt embed code into the Footer field
  4. Click Save
  5. Visit your site and verify the widget loaded by checking the browser console

  1. In your Teachable admin, go to Site → Code Snippets
  2. Paste the SubJolt embed code into the Footer Code field
  3. Click Save
  4. Visit your site and verify the widget loaded by checking the browser console

Installation FAQ

Log in to your SubJolt account and run the setup wizard — your personalized embed code is generated during the installation step. You can also find it on the Troubleshooting page in your account dashboard under the embed code section.

Each SubJolt account is configured for a single domain. If you run multiple sites that each need a cancel flow, create a separate SubJolt account for each one. This keeps analytics, configuration, and gateway connections cleanly separated per site.

Yes. The widget monitors the DOM continuously for cancel buttons, including elements rendered dynamically after the initial page load. This covers React, Vue, Angular, and other SPA frameworks. If auto-detection misses your button, you can set a manual CSS selector in the setup wizard to target it directly.

Open your site in a browser, navigate to the page with the cancel button, and open the developer console (F12). Look for the SubJolt script loading without errors. You can also use the Troubleshooting page in your SubJolt dashboard, which checks your site for the widget script automatically.

More from the Help Center

Configuration
Set up cancellation reasons, save offers, and theming after installing.
Payment Gateways
Connect Stripe, Shopify, Chargebee, Recharge, or Recurly.
Troubleshooting
Fix common installation issues like widget not loading or button not detected.

Need help installing?

Our support team can walk you through the setup.

Contact Support