Your own HTML

Paste the code where the plan should appear:

<script src="https://cdn.plan-wise.org/widget.js" async></script>
<div data-planwise="booking" data-business-id="biz_…" data-key="pk_live_…" data-venue-id="ven_…" style="min-height:480px"></div>

What the code holds

• <script … async> loads the widget without holding up the page. If several pages carry the plan, this line may go once in <head>.
• data-planwise="booking" marks where the plan goes.
• data-business-id and data-key: your business and its public key. The key is meant to be visible in HTML: it works only on the addresses allowed in the dashboard.
• data-venue-id: the venue.
• style="min-height:480px" holds the space while the widget loads, so the page does not jump.

A pk_live_… key works only on your published site. It does not work on localhost.

Content Security Policy

If your site sends a Content-Security-Policy header, add:

script-src  https://cdn.plan-wise.org;
connect-src https://api.plan-wise.org https://cfg.plan-wise.org https://cdn.plan-wise.org wss://rt.plan-wise.org;
img-src     https://assets.plan-wise.org https://cdn.plan-wise.org data: blob:;
font-src    https://assets.plan-wise.org https://cdn.plan-wise.org;
style-src   'unsafe-inline';

Without it the browser blocks the widget, and the console shows runtime_load_failed.