💻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>
Once you've done that, check out the implementation walkthrough to learn how to customize your widget.
Last updated