### Setup Monorepo

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/README.md

Installs project dependencies and the bundle for the monorepo. These commands should be run when first downloading the repository.

```shell
> yarn install
> yarn install-bundle
```

--------------------------------

### Setup Packages

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/README.md

Installs or updates package dependencies and links local packages together. This command is essential for setting up the development environment.

```shell
> yarn bootstrap
```

--------------------------------

### JavaScript Bundle Reference

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/packages/vs-app/index.html

Reference to the main JavaScript bundle file for the Matterport Showcase SDK examples.

```html
<script src="js/main.bundle.js"></script>
```

--------------------------------

### Make a Prod Build

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/README.md

Generates a production build for all packages in the monorepo.

```shell
> yarn build-all-prod
```

--------------------------------

### Run Packages

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/README.md

Executes individual packages in a development environment. Each package can be run using its respective name prefixed with 'yarn'.

```shell
> yarn inspector
> yarn vs-app
> yarn easter
> yarn rc-app
> yarn embed-examples
```

--------------------------------

### Virtual Staging CSS

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/packages/vs-app/index.html

CSS styles for the virtual staging example, ensuring the content fills the available space.

```css
body { height: 100%; margin: 0px; padding: 0px; overflow: hidden; }
html { height: 100%; }
#content { height: 100%; }
```

--------------------------------

### Clean Packages

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/README.md

Cleans the project packages. A subsequent bootstrap command is required after cleaning.

```shell
> yarn clean
```

--------------------------------

### Remote Control Example - CSS Styling

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/packages/rc-app/index.html

This CSS snippet styles the body, html, and content elements for a remote control interface, ensuring full height and basic layout.

```css
body { height: 100%; margin: 0px; padding: 0px; overflow: hidden; font-family: 'Roboto', sans-serif; }
html { height: 100%; }
#content { height: 100%; background-color: #dadada; }
```

--------------------------------

### Load Showcase SDK JavaScript

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/packages/inspector/index.html

Loads the main JavaScript bundle for the Matterport Showcase SDK. This is typically the first step in integrating the SDK into a web page.

```javascript
src = 'js/main.bundle.js';
```

--------------------------------

### SDK Key Configuration

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/README.md

Defines the SDK key to be used for the Matterport Showcase SDK. This key needs to be inserted into the specified line in the common package.

```typescript
export const sdkKey = 'YOUR SDK KEY HERE';
```

--------------------------------

### Basic CSS for Showcase Display

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/packages/easter/index.html

This CSS code sets up the basic styling for the Matterport Showcase display, ensuring it occupies the full viewport and handles overflow.

```css
body { height: 100%; margin: 0px; padding: 0px; overflow: hidden; }
html { height: 100%; }
#content { height: 100%; position: relative; }
/* #phaser-canvas { position: absolute; height: 100%; width: 100%; } */
#sdk-iframe { position: absolute; height: 100%; width: 100%; }
```

--------------------------------

### Embed Showcase with URL Parameters

Source: https://github.com/matterport/showcase-sdk-examples/blob/main/packages/rc-app/side-by-side.html

This snippet demonstrates how to embed a Matterport showcase and pass URL parameters to it. It retrieves query parameters from the current URL and appends them to the showcase's source URL, ensuring that any dynamic information is correctly passed to the embedded showcase.

```javascript
var urlParams = new URLSearchParams(window.location.search);
var queryString = urlParams.toString();
var url0 = `./index.html?${queryString}`;
document.getElementById('iframe0').setAttribute('src', url0);
document.getElementById('iframe1').setAttribute('src', url0);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.