> For the complete documentation index, see [llms.txt](https://pet-poodl.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://pet-poodl.gitbook.io/pet-for-developers/whitelabel/plug-and-go/initpoodlapp.md).

# InitPoodlApp

If you are using plain HTML or any other Non-React Framework for your website, you can import our script to use the widget. If you are using a bundler like Webpack, you can import the `InitPoodlApp` function from `@poodl/widget` package.

## Setup

1\. Import `@poodl/widget` script. You can change `@latest` tag to any version.

```html
<script src="https://cdn.jsdelivr.net/npm/@poodl/widget@latest/bundles/poodl-app.min.js"></script>
```

2\. Define the container element.

```html
<div id="poodl-root" style="min-height:420px"></div>
```

3\. Call `InitPoodlApp` or `window.InitPoodlApp` to initiate the widget. You can call it again to change any configs like toggling between dark and light modes. You have to wrap the function in `window.onload` event function if this script is place before the container element.

```javascript
InitPoodlApp("poodl-root", {}); // second parameter is optional config object
```

## Summary

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Poodl Widget Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/@poodl/widget@latest/bundles/poodl-app.min.js"></script>
    <script>
      window.onload = () => {
        InitPoodlApp("poodl-root");
      };
    </script>
  </head>
  <body>
    <div id="poodl-root" style="min-height:420px"></div>
  </body>
</html>
```

Once you've done that, check out the [implementation walkthrough](https://github.com/bridges-team/whitelabel-docs/blob/main/general/plug-and-go/broken-reference/README.md) to learn how to customize your widget.
