# Web app quickstart ## Prerequisites This guide assumes that you’ve already created a Whereby Embedded account and a meeting room to join with your web app. If you’ve not already taken these steps, you can do so by following the [Whereby Embedded initial setup guide](https://docs.whereby.com/getting-started/overview-of-whereby-embedded/initial-setup). ## Setting up the app Our sample app uses vanilla HTML, CSS, and JavaScript. You can create your own sample files to follow along with the tutorial or download our [web app starter template](https://github.com/whereby/demos/tree/main/webapp-template) to use as a starting point. {% hint style="info" %} **Note**: You can also find our [finished web component quickstart web app](https://github.com/whereby/demos/tree/main/web-component-quickstart) on GitHub. {% endhint %} ## Using the component The prebuilt web component is available as part of the [Whereby Browser SDK](https://www.npmjs.com/package/@whereby.com/browser-sdk), published on npm. You can include it in your app via a package manager, such as npm or yarn, and install instructions can be found [here](https://docs.whereby.com/whereby-for-web-browser/react-based-browser-sdk/quick-start). ### Install methods To install the web component, there are different methods that can be used. You can either use a ` ``` #### Using a package manager When using React or a bundler like Webpack, Rollup, Parcel, etc., you can install the Whereby Browser SDK in your project using npm: ```bash npm install @whereby.com/browser-sdk ``` #### Importing the SDK With the browser SDK included in your project, you can then import it as follows: ```javascript import "@whereby.com/browser-sdk/embed" ``` ### How to use After installation, add the following to your HTML document’s ``, substituting `YOUR-ROOM-URL` for the room URL you obtained in the initial setup guide: ```html ``` {% hint style="info" %} **Note**: You can use a `hostRoomUrl` instead of the `roomUrl`, if you want to give the user [host privileges](https://docs.whereby.com/whereby-product-features/user-roles-and-privileges#hosts). {% endhint %} To ensure the component fits the page, we’ll set it to fill the entire viewport for now. Add the following rules to your web app’s CSS: ```css :root { height: 100%; margin: 0; overflow: hidden; } body, whereby-embed { height: inherit; margin: inherit; } ``` Load your sample app in a web browser. You should see the Whereby interface appear, allowing you to enter your name and join the meeting room. ## Customizing your app Now that you’ve got a basic app running, you’ll want to customize it to your liking. Whereby’s web component has many options for customizing your app: * [Global settings](https://docs.whereby.com/whereby-product-features/dashboard-preferences) via your account dashboard. * Per-room settings via component [attributes](https://docs.whereby.com/whereby-for-web-browser/web-component-and-pre-built-ui/configuring-with-attributes) and [room creation settings](https://docs.whereby.com/whereby-product-features/using-the-rest-api). * Creating custom behavior and controls using [commands](https://docs.whereby.com/whereby-for-web-browser/web-component-and-pre-built-ui/using-commands) and [events](https://docs.whereby.com/whereby-for-web-browser/web-component-and-pre-built-ui/using-whereby-events). Our next steps are to explore a couple of the customization options that Whereby has to offer. Subsequent sections will explain all the options in full. ### Setting custom brand colors 1. In your account dashboard: Go to the **Configure** screen and access the **Appearance** section. 2. Set new primary, secondary, and focus highlight colors. 3. Set a new background color, and upload a background image. 4. Upload a company logo. 5. Reload your sample app to see how these settings change the look and feel. ### Setting web component attributes There are many different attributes you can set on the web component to configure various aspects of the video call experience. Let's set a couple now. Update the component as follows: ```html ``` The effect of the [attributes](https://docs.whereby.com/reference/using-the-whereby-embed-element#attributes-of-the-component) is as follows: * `cameraEffect="blur"`: Sets a blur effect on the camera background by default. * `minimal="on"`: Uses the minimal Whereby UI. * `logo="off"`: Hides the company logo. Save your code and reload your app to see the effect of the attributes. You’ve just built a working video calling app with Whereby Embedded and customized it with your own branding and layout. Next, we'll explore advanced options like event handling and custom controls. ## See also * [Meeting controls](https://whereby.helpscoutdocs.com/article/458-meeting-controls) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.whereby.com/whereby-for-web-browser/web-component-and-pre-built-ui/web-app-quickstart.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.