---
title: Install the agent
description: Install and initialize the EDOT Browser agent (package or bundle).
url: https://www.elastic.co/elastic/docs-builder/docs/3028/reference/opentelemetry/edot-sdks/browser/install-agent
products:
- Elastic Cloud Serverless
- Elastic Distribution of OpenTelemetry Browser (RUM)
- Elastic Distribution of OpenTelemetry SDK
- Elastic Observability
applies_to:
- Serverless Observability projects: Generally available
- Elastic Stack: Generally available
- Elastic Distribution of OpenTelemetry Browser (RUM): Preview
---
# Install the agent
EDOT Browser is available in two distribution formats: a package for applications that use a bundler, and a prebuilt bundle you can load with a script tag.
The contrib instrumentations included in EDOT Browser are experimental. They may introduce breaking changes to configuration or APIs. Because of that, EDOT Browser uses a development version (`0.x`) and increments the minor version when instrumentations introduce breaking changes or when new features are added.
## Installation methods
| Option | Best for | Trade-offs |
|-------------|------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Package** | Applications that use a bundler (for example, webpack, esbuild, or Rollup). | Uses your bundler, so EDOT is included in your application bundle, increasing its size. Provides type definitions, so your build step might catch breaking changes at compile time. |
| **Bundle** | Applications that don't use a bundler (a single JavaScript file loaded with a `
```
To activate the bundle, add a `
```
Although this is the recommended approach, be aware of the following limitation: because EDOT Browser is downloaded and initialized asynchronously, distributed tracing doesn't capture requests that occur before the agent is initialized.
## Initialize EDOT Browser
Initialize EDOT Browser as early as possible in your application lifecycle so it can capture initial page loads, user interactions, and network requests. Call `startBrowserSdk`:
- At the top of your application entry point
- In a framework-specific bootstrap location (for example, a React root component, Angular `main.ts`, or a Vue plugin)
Minimal example (package):
```js
import { startBrowserSdk } from '@elastic/opentelemetry-browser';
startBrowserSdk({
serviceName: 'my-web-app',
otlpEndpoint: 'https://telemetry.example.com', // reverse proxy URL; do not include /v1/traces or other signal paths
});
```
At a minimum, configure:
- `serviceName`: Identifies your frontend application in Elastic Observability.
- `otlpEndpoint`: Must point to your reverse proxy (not directly to Elastic Observability).
For all configuration options, refer to [Configure EDOT Browser](https://www.elastic.co/elastic/docs-builder/docs/3028/reference/opentelemetry/edot-sdks/browser/configuration).
## Verify setup
You have successfully set up EDOT Browser when the SDK loads without errors in the browser console and telemetry flows to your reverse proxy. To confirm data in Elastic Observability, open Kibana and check for your service and traces. For what you see in the UI, refer to [What to expect in Kibana](/elastic/docs-builder/docs/3028/reference/opentelemetry/edot-sdks/browser/setup#what-to-expect-in-kibana) in the setup guide.
## Next steps
- Refer to [Set up EDOT Browser](https://www.elastic.co/elastic/docs-builder/docs/3028/reference/opentelemetry/edot-sdks/browser/setup) for an overview and what to expect in Kibana.
- Refer to [Configure EDOT Browser](https://www.elastic.co/elastic/docs-builder/docs/3028/reference/opentelemetry/edot-sdks/browser/configuration) to customize behavior and defaults.
- Review [Supported technologies](https://www.elastic.co/elastic/docs-builder/docs/3028/reference/opentelemetry/edot-sdks/browser/supported-technologies) for browsers and instrumentations.