Back to Knowledge Base

Custom Integration

Universal JavaScript SDK for custom stacks (React, Vue, plain HTML, etc.).

Integration Steps

  1. Create your account: Login to the Smart Prefetch Dashboard.
  2. Add your store: Navigate to the "Stores" section and click "Add Store". Enter your website's domain name.
  3. Get your script: After adding your store, the dashboard will provide a unique script tag.
  4. Install the script: Copy the script tag and paste it into the <head> and </head> tags of your website's HTML template.
Example Code (Get yours from Dashboard)
<script src="https://pub-cdn.smartprefetch.link/prefetch/index.min.js" async></script>

Note: Ensure the script is loaded with the async attribute to prevent blocking your page rendering. The script is lightweight (< 2kb) and won't impact your initial load time.

Excluding Specific Patterns

Custom storefronts often have unique URL structures or specific paths that should not be prefetched (e.g., logout links, admin dashboards, or dynamic cart actions).

Recommendation: We strongly recommend configuring Advanced Prefetch Rules to exclude these patterns and prevent unintended behavior.

Read our guide on setting up Advanced Rules →

Popular Platforms

One of the most powerful features of this integration is its universal nature. While we offer dedicated plugins for platforms like WooCommerce and Shopify for the easiest setup, the universal script is framework-agnostic and designed to work out-of-the-box with any other technology stack.

  • JavaScript Frameworks: React, Vue.js, Angular, Svelte, etc.
  • Static Site Generators (SSG): Jekyll, Hugo, Gatsby, Next.js, Eleventy, etc.
  • E-commerce Platforms: Magento, BigCommerce (with theme access).
  • Headless E-commerce: Shopify Hydrogen, Adobe Commerce (Headless), commercetools, VTEX, Salesforce Commerce Cloud, etc.
  • Plain Old HTML, CSS & JavaScript: The foundational technologies of the web.