Skip to content

Installation

Adding Plotap takes one line and works on any site: static HTML, WordPress, Webflow, Next.js, anything that lets you add a script tag.

1. Get your snippet #

In the dashboard, open your site and go to the Install tab. You'll see a snippet with your public key. It looks like this:

index.html: before </body>
<script src="https://api.plotap.com/widget.js" data-key="hx_pub_••••••••••" defer></script>
  1. 1. Paste the tag just before the closing </body> on every page.
  2. 2.Add your site’s domain to the allowed origins in Settings so the key only works on your site.
  3. 3. A floating button appears at the corner. Visitors toggle it on, select text, and get an explanation.

2. Paste it before </body> #

Add the script just before the closing </body> tag of every page where you want the widget:

html
<script
  src="https://api.plotap.com/widget.js"
  data-key="hx_pub_your_key_here"
  defer
></script>

The data-key is your public key, it's safe to ship in client-side HTML. It only works from the origins you allow (see Quotas, origins & keys).

3. Verify #

Reload your page. A floating toggle button appears in the corner. Turn it on, highlight some text, and you should see an explanation popup.

Not seeing the button?

Check that the widget is enabled (Overview tab) and that your site's origin is in the allowed origins list. A blocked origin renders nothing.

Framework notes #

  • Next.js / React: add it with the <Script> component (strategy afterInteractive) or drop the raw tag in your root layout.
  • WordPress: paste the snippet into your theme footer or a "custom HTML" block.
  • Single-page apps: the widget attaches once on load and listens globally, so client-side route changes are fine, no re-init needed.