InitPoodlApp

Add the Poodl White Label to a plain HTML website.

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.

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

2. Define the container element.

<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.

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

Summary

<!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>

PreviousQuick Start NextPoodlApp

Last updated 2 years ago

InitPoodlApp

Add the Poodl White Label to a plain HTML website.

Setup

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

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

2. Define the container element.

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

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

Summary

<!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 to learn how to customize your widget.

PreviousQuick Start NextPoodlApp

Last updated 2 years ago