Merge pull request #21431 from newrelic/nr-448474-ba-npm-update

WriteMayur · web-flow · commit 6c479c14416f · 2025-08-13T18:41:41.000+05:30
feat: Added new npm guided flow
diff --git a/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx b/src/content/docs/browser/browser-monitoring/installation/install-browser-monitoring-agent.mdx
@@ -32,6 +32,10 @@ There are four ways to install the browser agent. Depending on your specific nee
 
 <Tabs>
   <TabsBar>
+    <TabsBarItem id="npm">
+      Install with npm
+    </TabsBarItem>
+
     <TabsBarItem id="1">
       Get JavaScript via UI
     </TabsBarItem>
@@ -43,13 +47,25 @@ There are four ways to install the browser agent. Depending on your specific nee
     <TabsBarItem id="3">
       Create JavaScript via NerdGraph
     </TabsBarItem>
-
-    <TabsBarItem id="4">
-      Install via NerdGraph and npm
-    </TabsBarItem>
   </TabsBar>
 
   <TabsPages>
+    <TabsPageItem id="npm">
+      Go to <DNT>**[one.newrelic.com](https://one.newrelic.com) > Integrations & Agents > Browser and mobile > Browser monitoring**</DNT> and follow the instructions to generate the browser npm snippet in the UI.
+
+      <ButtonGroup>
+        <ButtonLink
+          role="button"
+          to="https://onenr.io/0MRNpYqNqQn"
+          variant="primary"
+        >
+          Get your browser snippet
+        </ButtonLink>
+      </ButtonGroup>
+
+      Once you have the snippet, paste it at the first line of your source file, before any other code. This ensures that the browser agent is loaded before any other scripts execute.
+
+    </TabsPageItem>
     <TabsPageItem id="1">
       Go to <DNT>**[one.newrelic.com](https://one.newrelic.com) > Integrations & Agents > Browser and mobile > Browser monitoring**</DNT> and follow the instructions to generate the browser JavaScript snippet in the UI.
 
@@ -67,8 +83,6 @@ There are four ways to install the browser agent. Depending on your specific nee
 
       For more detailed information about the placing the snippet, see [JavaScript placement requirements](/docs/browser/new-relic-browser/page-load-timing-resources/instrumentation-browser-monitoring#javascript-placement).
 
-      (If you'd like to install the browser agent via npm, see our [`@newrelic/browser-agent` package](https://www.npmjs.com/package/@newrelic/browser-agent).)
-
       <Collapser
         id="browser_delay"
         title="Delay browser monitoring"
@@ -104,7 +118,7 @@ There are four ways to install the browser agent. Depending on your specific nee
     <TabsPageItem id="2">
       With an APM agent, you can deploy browser monitoring without manually adding the snippet to your code. When you restart the agent, it automatically uses the latest version of the browser agent.
 
-      If you're using an APM (application performance monitoring) agent to monitor the backend of your browser app and you've got a non-[SPA](/docs/browser/single-page-app-monitoring/get-started/introduction-single-page-app-monitoring) app, then we recommend using this method.
+      If you're using an APM agent to monitor the backend of your browser app and you've got a non-[SPA](/docs/browser/single-page-app-monitoring/get-started/introduction-single-page-app-monitoring) app, then we recommend using this method.
 
       There are specific steps for each APM agent:
 
@@ -125,14 +139,16 @@ There are four ways to install the browser agent. Depending on your specific nee
       Once you have the snippet, add it to the `<head>` tag of your app.
     </TabsPageItem>
 
-    <TabsPageItem id="4">
-      If you want to automate browser monitoring deployment across multiple web apps, you can use NerdGraph and our browser agent npm package to configure and deploy the agent as part of your application build process.
-
-      For more on this, see [instrument multiple apps with npm and NerdGraph](/docs/apis/nerdgraph/examples/combining-npm-nerdgraph/).
-    </TabsPageItem>
   </TabsPages>
 </Tabs>
 
+  <Callout variant="important">
+
+    If you want to automate browser monitoring deployment across multiple web apps, you can use NerdGraph and our browser agent npm package to configure and deploy the agent as part of your application build process.
+
+    For more on this, refer to [instrument multiple apps with npm and NerdGraph](/docs/apis/nerdgraph/examples/combining-npm-nerdgraph/).
+  </Callout>
+
 ## What's next? [#whats-next]
 
 When you've installed the browser agent, wait a few minutes and look for the data in [our browser monitoring UI](https://one.newrelic.com/nr1-core?filters=%28domain%3D%27BROWSER%27%20AND%20type%3D%27APPLICATION%27%29&state=1f7bae2d-dd3a-0027-3079-b60bcd19ded9&_gl=1*15f78ub*_ga*MTE0MTA2MTA5MS4xNzE4OTI0MDkw*_ga_R5EF3MCG7B*MTcyMTMxMzk2MC41Ny4xLjE3MjEzMTg2MzcuNDcuMS4xMDYwNTI3Njcw).
