> For the complete documentation index, see [llms.txt](https://poodl-exchange-docs.gitbook.io/pet-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://poodl-exchange-docs.gitbook.io/pet-for-developers/whitelabel/quick-start/poodlapp.md).

# PoodlApp

Add Poodl White Label to a project using React.

## NPM Package

<https://www.npmjs.com/package/@poodl/widget?activeTab=readme>

## Installation

From the root of your project, if you use YARN, run:

```typescript
yarn add @poodl/widget
```

If you use NPM, run:

```typescript
npm i @poodl/widget
```

## Import

Import the widget with:

```typescript
import { PoodlApp } from "@poodl/widget";
```

## Rendering

You can now render the widget as a component with

```typescript
<PoodlApp {...config} />
```

where `config` is an object specifying all the customizations. Learn more about that in the implementation walkthrough.

{% hint style="info" %}
Note that if you do not specify any custom configuration, you will get the default ones.
{% endhint %}

## Summary

Once you have installed the package with YARN or NPM, add the following code to one of your pages to render the widget with default options.

```typescript
import { PoodlApp } from "@poodl/widget";

export default function App() {
  return (
    <div className="App">
      <PoodlApp />
    </div>
  );
}
```