> For the complete documentation index, see [llms.txt](https://docs.echo3d.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.echo3d.com/web/using-the-package.md).

# Using the Package

Our NPM package allows you to add 3D models to your website.

## \<Echo/> Component

This package contains only one component, a 3D model viewer built using [google model-viewer](https://modelviewer.dev/).&#x20;

This component can be configured with an `apiKey` and `entryID` to stream and display models from the echo3D platform as well as a direct `src` URL to display local or cloud files. Common `<model-viewer/>` configuration parameters are also exposed.

### Required Parameters

You must provide `src` or both `apiKey` and `entryID`.

`src`: Element will make no query and pass this URL directly to

`apiKey`: Your echo3D project [API key](/quickstart/get-api-key.md), e.g. `your-key-1234`.

`entryID`: The entry ID of the hologram you would like to display

### Optional Parameters

`className`: The CSS classes that will be applied to the element. If no classes are provided, the component will default to a 600px height viewer.

`securityKey`: provide your security key if it is enabled for your project

`disableZoom`: When defined, disables zoom (camera controls must be enabled)

`cameraOrbit`: The starting focal point of the viewer

`cameraControls`: When defined, camera controls for the viewer are disabled

`autoRotate`: When defined, automatic rotation of the model is disabled

`tapToCenter`: When defined, tap-to-recenter behavior is enabled

## Code Example

```html
<Echo
   apiKey="YOUR-API-KEY"
   entryID="dbe31c16-hero.glb"
/>
```

<figure><img src="/files/GkZq5AsZvpDSmSlhKX0l" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/7GIe4d7bcLycI1fclWbP" alt=""><figcaption></figcaption></figure>