# 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](https://docs.echo3d.com/quickstart/get-api-key), 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="https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M41BcmqhdFQ3r89wcIR%2Fuploads%2FKmSpqIEqeQeuGlCMWnZE%2Fimage.png?alt=media&#x26;token=fb026449-881e-4d08-a305-c2b675a99d69" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3757500311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M41BcmqhdFQ3r89wcIR%2Fuploads%2F0mGSzAxQRNUFLoFS73xg%2Fimage.png?alt=media&#x26;token=8f4839f5-7c24-4a5e-ac25-1f4476e5fb03" alt=""><figcaption></figcaption></figure>
