crunchit

How to install (put a desired version if needed)

https://unpkg.com/crunchit@latest/crunchit.min.js https://cdn.jsdelivr.net/npm/crunchit@latest/crunchit.min.js

Regular applications (Plain HTML, CRA, Vue JS, Angular,Svelte, Preact, Semantic UI)

<script 
    src="https://cdn.jsdelivr.net/npm/crunchit@latest/crunchit.min.js"
    onload="init()"
    async
>
</script>

<script>
    function init() {
    try {
        window.letscrunch("YOUR_APP_ID");
    } catch (error) {
        console.error("Failed to load the Magic Pulse package", error);
    }
    }
</script>
    

NextJS applications (in _app.js)

export default function App({ Component, pageProps }) {
  useEffect(() => {
    if (window.letscrunch) {
      try {
        window.letscrunch("YOUR_APP_ID");
      } catch (error) {
        console.error("Failed to load the Magic Pulse package", error);
      }
    }
  }, []);
  return (
    <>
      <Script
        src="https://cdn.jsdelivr.net/npm/crunchit@latest/crunchit.min.js"
        strategy="beforeInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

Gatsby JS applications

1. Run this if you do not have html.js file in your src directory - cp .cache/default-html.js src/html.js

2. Add this before the end of your body tag

<script src="https://cdn.jsdelivr.net/npm/crunchit@latest/crunchit.min.js"
async
/>
<script
dangerouslySetInnerHTML={{
__html: `
    function init() {
      try {
        window.letscrunch("YOUR_APP_ID");
      } catch (error) {
        console.error("Failed to load the Magic Pulse package", error);
      }
    }
    if (window.addEventListener)
      window.addEventListener("load", init);
    else if (window.attachEvent)
      window.attachEvent("onload", init);
    else window.onload = init;
  `,
  }}
/>