Search

 

Need Support

Text Message Us  +1 727-610-1188

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

<link rel="stylesheet" href="promptinator.css" />
<script type=“module”>
import Promptinator from ‘./businessPromptinator.js’;// initialise every

document.querySelectorAll(‘.Promptinator’).forEach(el =>
Promptinator.init({ mount: el })
);
script>
<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)

window.businessData = {
phone: "18005551234", // must match ?ph=… or a 10‑digit segment in the path
name: "Acme Pizza",
slogan: "Hot & Ready in 20",
address: "123 Main St",
city: "Springfield",
state: "IL",
zip: "62701",
website: "https://acmepizza.example",
tags: ["Delivery","Carry‑out"],
location_tags: ["Downtown","North Side"]
};

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