> For the complete documentation index, see [llms.txt](https://crunch.gitbook.io/developer-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://crunch.gitbook.io/developer-docs/getting-started/web-installations.md).

# Web Installations

Crunch can be installed on any frontend web application built using any framework, some popular ones are listed here:

### **Step 1:**

**Get the `App_ID` for your project to install Crunch scripts in your project.**

> You can find your Crunch's project ID as follows —
>
> 1. During the new project creation in the script installation setup.
> 2. In the project level settings within Crunch App.
> 3. Reach out to your Crunch account manager to provide you with an ID

***

### **Step 2:**

Select the script which is relevant for your project.

#### **Plain HTML app, Create React App, Vue JS, Angular, Svelte, Preact, Semantic UI —**

{% code lineNumbers="true" %}

```markup
<script 
    src="https://storage.googleapis.com/crunch_tracking_script/crunchit.min.js"
    onload="init()"
    async
>
</script>
<script>
    function init() {
    try {
        window.letscrunch("YOUR_UNIQUE_APP_ID");
    } catch (error) {
        console.error("Failed to load Crunch", error);
    }
    }
</script>
```

{% endcode %}

#### &#x20;NextJS applications (in \_app.js) —

{% code overflow="wrap" lineNumbers="true" %}

```markup
export default function App({ Component, pageProps }) {
  useEffect(() => {
    if (window.letscrunch) {
      try {
        window.letscrunch("YOUR_UNIQUE_APP_ID");
      } catch (error) {
        console.error("Failed to load Crunch", error);
      }
    }
  }, []);
  return (
    <>
      <Script
        src="https://storage.googleapis.com/crunch_tracking_script/crunchit.min.js"
        strategy="beforeInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}
```

{% endcode %}

#### 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`<br>
2. Add this before the end of your body tag

```html
<script src="https://storage.googleapis.com/crunch_tracking_script/crunchit.min.js"
async
/>
<script
dangerouslySetInnerHTML={{
__html: `
    function init() {
      try {
        window.letscrunch("YOUR_UNIQUE_APP_ID");
      } catch (error) {
        console.error("Failed to load Crunch", error);
      }
    }
    if (window.addEventListener)
      window.addEventListener("load", init);
    else if (window.attachEvent)
      window.attachEvent("onload", init);
    else window.onload = init;
  `,
  }}
/>
```