---
title: Getting Started
slug: viewer-2d/getting-started
docTags:
createdAt: 2024-02-21T14:30:41.295Z
---
Use the 2D Viewer API to embed the 2D Viewer in your web applications.
:::hint{type="info"}
Using **jQuery**? More information on using **jQuery** with the 2D Viewer [here](docId\:GnvS1sNSDTrWKlXDnP9qh).
:::
## Installation
### 1. Add the 2D Viewer to your project
Include the 2D Viewer in your HTML file using a script tag, this will add the global `bimsync` object to the `window` object.
```html
```
### 2. Provide a container for the 2D Viewer
Create a `div` element for attaching a 2D Viewer instance to.
```html
```
### 3. Initialize the 2D Viewer API
Set a callback function and then invoke the `loadViewer2d` method, the 2D Viewer is ready once callback invoked.
```javascript
bimsync.setOnViewer2dLoadCallback(onViewer2dLoad);
bimsync.loadViewer2d();
```
### 4. Create a 2D Viewer instance
Provide the `div` element and an options object to the constructor method.
```javascript
const viewer2dElement = document.getElementById("viewer-2d");
const viewer2dOptions = {
hoverSpaces: true,
showViewpoint: false,
selectColor: "#ff0000"
};
const viewer2d = new bimsync.viewer2d.Viewer2D(viewer2dElement, viewer2dOptions);
```
### 5. Interact with the 2D Viewer
Call methods on the 2D Viewer instance to interact with the 2D Viewer.
```javascript
viewer2d.loadUrl(tokenUrl).then(() => {
const storeys = viewer2d.getStoreys();
if (storeys.length > 0) {
viewer2d.showStorey(storeys[0].id);
}
});
```
## Usage
```html
```
## Options
Adjust the default behavior of the 2D Viewer by providing an options object when creating a 2D Viewer instance.
### Properties
| **Name** | **Type** | **Default** | **Description** |
| --------------- | -------- | ----------- | ----------------------------------------------------- |
| `hoverSpaces` | Boolean | `false` | Whether mouse hover highlights space below the cursor |
| `showViewpoint` | Boolean | `true` | Sets viewpoint visibility |
| `selectColor` | String | `#a7f555` | Sets the CSS color of selected objects |