- Add
<script>to<head>section of your page
<head>
<!-- all other scripts that you already use -->
<script
src="https://cdn.dostanesie.pl/dostanesie-pl-widget.js"
type="text/javascript"
></script>
</head>- Add
<div>to<body>section of your page
<body>
<!-- rest of your site content -->
<div id="dostanesie-pl-widget"></div>
</body>Options should be passed as data-* attributes to <div id="dostanesie-pl-widget"></div> element.
<div id="dostanesie-pl-widget" data-debug="true"></div>All options with default values can be found in IWidgetConfig.ts.
| Name | Type | Optional | Default value | Description |
|---|---|---|---|---|
| disable-animations | boolean | yes | false |
Disables all animations, can be useful when parent page supports different accessibility settings |
| show-branding | boolean | yes | true when not using WordPress. On WordPress pages it's set to false to comply with plugins guideline. |
When set to false, hides logo of dostanesie.pl and removes button with link to dostanesie.pl portal |
| debug | boolean | yes | false |
Enables verbose logging in console |
- widget is react application responsible for rendering calculator and its logic stored in src folder
- plugin is a block based WordPress plugin written in JavaScript and PHP stored in wordpress folder
show-brandingis set tofalseby default to comply with WordPress plugin guidelines.- Plugin is not loaded from cdn.dostanesie.pl. Instead, it is provided with plugin zip file.
debugoption is always set in<div>attribute, value can be changed by switchingdebugin page editor or viaWP_DEBUGphp variable.<div>is generated dynamically by WordPress plugin to allow using multiple widgets on the same page.- Widget is built using dedicated vite mode and entrypoint.
cd wordpress-plugin/calculator-dostanesie-pl
pnpm install
# build widget in wordpress-plugin mode
pnpm run widget:dev:wordpress
cd wordpress-plugin
pnpm install
# start wordpress-plugin locally, requires docker
pnpm run wordpress-plugin:wp-env
# start webpack in watch mode, requires prebuilt widget
pnpm run wordpress-plugin:devMake sure you have wp-cli installed.
cd wordpress-plugin/calculator-dostanesie-pl
# gather all strings from source code
pnpm run wordpress-plugin:generate-pot
# copy pot file to actual translation file
cp languages/dstpl-pl_PL.pot languages/dstpl-pl_PL.po
# generate json used by frontend part
pnpm run wordpress-plugin:generate-json
# generate json
pnpm run wordpress-plugin:generate-mo