Promptinator by Melanie AI

A zero‑dependency JavaScript micro‑framework that turns any block of text into an editable, AI‑aware conversation form.

1 · Why Promptinator?

Traditional forms are rigid; AI‑generated content is often detached from your real‑world data. Promptinator bridges that gap:

Dynamic tokens let you sprinkle shortcodes directly in copy, instantly rendering text inputs, radio buttons, check‑boxes, dropdowns, URL pickers and more.
Inline editing (✏️) means anyone—non‑coders included—can tweak the underlying prompt in‑place and re‑render with one click.
“Think” mode adds one‑click links to ChatGPT, Perplexity and Copilot, seeding those models with the filled‑in prompt so your business context travels with the user.
Business autoload pulls profile fields (name, address, services, etc.) from window.businessData, or falls back to the phone number in the page URL—great for directory sites that serve thousands of microsites from a single JS/CSS pair.

2 · Files in this package

File	Purpose
`businessPromptinator.js`	The ES‑module containing the Promptinator class and built‑in toolbar/snippet helper.
`promptinator.css`	Scoped dialog / popup styles plus optional button theming and mobile tweaks.
`README.md`	You’re reading it.
(optional) assets/…	Any screenshots or GIFs you add.

Both JS and CSS are completely standalone—no frameworks, no build step.

3 · Quick‑start (90 seconds)

html

<!-- ❶  Drop in the styles -->

<link rel="stylesheet" href="promptinator.css" />

<!– ❷ Load the module –>
<script type=“module”>
import Promptinator from ‘./businessPromptinator.js’;// initialise every <div class=”Promptinator”>
document.querySelectorAll(‘.Promptinator’).forEach(el =>
Promptinator.init({ mount: el })
);
</script><!– ❸ Write any prompt inside the DIV, using tokens –>
<div class=“Promptinator” data-edit=“1” data-think=“1”>
[A-name-~Your name here~] just booked a
[B-tone-|Standard|VIP|~VIP~] service on
[D-date-31~1~] / [D-month-12~1~] / 2025.
</div>

Reload the page, click tokens to fill them, hit ✏️ to tweak the raw text, or open ChatGPT to continue the conversation.

4 · Token cheat‑sheet

Token	Renders	Syntax
A	Text box / textarea	`[A-label-~default text~]`
B	Radio button set	`[B-label-
C	Checkbox group	`[C-label-
D	Dropdown (num or text)	`[D-label-10~3~]` or `[D-label-
E	Action — email or POST submit	`[E-contact-~me@site.com~]`
I	URL picker & live iframe	`[I-reference-
H	Hidden token (GPT system prompt)	`[H-internal-~Do NOT show this text~]`

[name], [address], [C-service-], etc. are auto‑filled when window.businessData is present.

5 · Controlling behaviour with data‑attributes

Attribute	Type	Default	Meaning
`data-edit=”0	1″`	Boolean	`1`
`data-think=”0	1″`	Boolean	`1`
`data-prompt="…"`	String	—	Supply the raw prompt from JS instead of innerText. Useful when you generate prompts server‑side.

Simply omit the attribute or set it to 0 / false to disable.

6 · Business field auto‑population (optional)

Place [name] or [C-service-] in your prompt; Promptinator swaps them for the stored values on first render.

7 · AI integration (“Think” mode)

If data-think="1" and the prompt is not empty and there is no [E‑] submit token, Promptinator shows branded buttons: 🧠 ChatGPT, 🔎 Perplexity, 🤖 Copilot.
Each button opens the chosen service with the fully interpolated prompt pre‑filled—no API keys, just a URL parameter.
Hidden [H‑] tokens are included in that exported text, so you can inject system instructions without exposing them in the visible copy.

8 · Inline editor & shortcode toolbar

Click ✏️ to reveal the raw prompt in a <textarea>. Above it, a snippet toolbar lets authors insert any token from a dropdown—labels auto‑number so you never repeat IDs. Toolbar code lives entirely in the JS module; no external UI library.

9 · Accessibility & graceful degradation

Tokens resolve to plain text when JavaScript is disabled.
All inputs and buttons are keyboard‑navigable.
AI buttons are hidden on <320 px screens one‑per‑row on narrow viewports, thanks to the mobile rules in promptinator.css.

10 · Security & privacy notes

No data is sent anywhere unless the user clicks an AI button or a [E‑] submit token.
Email [E‑] tokens open the user’s mail client via mailto: so nothing is stored server‑side.
POST [E‑] tokens construct an HTML form on the fly and POST it to the endpoint you provide—use HTTPS.

11 · Extending Promptinator

Promptinator is delivered as an ES‑module; simply import it, then extend:

Because everything is written in vanilla JS, you can fork the file, tree‑shake what you don’t need, or rename the CSS classes to fit your design system.

12 · License

Just sign up at bestdealon.com

13 · Contributing

Fork → feature branch → pull request.
Keep dependencies at zero.
All new UI elements must fit in promptinator.css or remain fully scoped.
Please run a11y checks—this tool should empower everyone.

Happy conversational‑SEO hacking!

Have questions? Ping John Coates via john@rfsafe.com or open an issue in the repo.

Source

Promptinator by Melanie AI

1 · Why Promptinator?

2 · Files in this package

3 · Quick‑start (90 seconds)

4 · Token cheat‑sheet

5 · Controlling behaviour with data‑attributes

6 · Business field auto‑population (optional)

7 · AI integration (“Think” mode)

8 · Inline editor & shortcode toolbar

9 · Accessibility & graceful degradation

10 · Security & privacy notes

11 · Extending Promptinator

12 · License

13 · Contributing