Live Playground

See it in action

Tap any button below. Every notification is rendered by the Pulse SDK with one line of code.

Toasts

Pulse.success("...")

Modals & Confirm

Pulse.modal(...)

With Image

image: "..."

Auto-close Timer

timer: 3000

Draggable Modal

draggable: true

Loading & Flow

Pulse.loading(...)

Input & Form

Pulse.form(...)

Input Types

type: "..."

Every input type works inside Pulse.form(). Tap to try each one.

Examples — copy any snippet

1. Setup (once)
<script src="https://pulsenotify.online/sdk/pulse.js"></script>
<script>
  Pulse.init({
    apiKey:  "pn_your_api_key",
    baseUrl: "https://pulsenotify.online/api/notify.php"
  });
</script>
Toasts
Pulse.success("Saved successfully!");
Pulse.error("Connection failed.");
Pulse.warning("License expires in 7 days.");
Pulse.info("Welcome back!");

// with custom title
Pulse.success("File uploaded.", { title: "Upload complete" });
Modal & Confirm
// modal with OK button
Pulse.modal("success", "All done!");
Pulse.modal("error", "Something went wrong.");

// confirm (Yes / No) — returns true/false
const ok = await Pulse.confirm("Delete this record?");
if (ok) {
  // user clicked Yes
}
With Image
// toast with image
Pulse.success("Your photo is live.", {
  title: "Upload complete",
  image: "https://yoursite.com/photo.jpg"
});

// modal with image
Pulse.modal("Thanks for joining!", {
  type: "success",
  title: "Welcome",
  image: "https://yoursite.com/welcome.png"
});
Auto-close Timer
// toast closes after 3s (with progress bar)
Pulse.info("Closing in 3 seconds", { timer: 3000 });

// hide the bar
Pulse.info("No bar", { timer: 3000, timerBar: false });

// modal auto-closes after 4s
Pulse.modal("Auto-closing", { type: "warning", timer: 4000 });
Draggable Modal
Pulse.modal("Hold the dots on top to move me.", {
  type: "info",
  title: "Drag me",
  draggable: true
});
Loading
const l = Pulse.loading("Processing...");
// ...do your work...
l.close();
l.setText("Almost done...");
Input & Form
// single input
const name = await Pulse.prompt("What's your name?", {
  title: "Enter name", placeholder: "Juan"
});

// password input (with show/hide toggle)
const pw = await Pulse.prompt("Enter password", { password: true });

// multi-field form — returns { field: value }
const r = await Pulse.form({
  title: "Create account",
  icon: "user",
  okText: "Sign up",
  fields: [
    { name: "name",  type: "text",     label: "Full name" },
    { name: "email", type: "email",    label: "Email" },
    { name: "pass",  type: "password", label: "Password" }
  ]
});
if (r) console.log(r.name, r.email, r.pass);
All input types
const r = await Pulse.form({
  title: "All input types",
  okText: "Submit",
  fields: [
    { name: "name",  type: "text",     label: "Name" },
    { name: "email", type: "email",    label: "Email" },
    { name: "site",  type: "url",      label: "Website" },
    { name: "pass",  type: "password", label: "Password" },
    { name: "bio",   type: "textarea", label: "Bio", rows: 3 },
    { name: "plan",  type: "select",   label: "Plan",
      options: [
        { value: "monthly",  label: "Monthly" },
        { value: "lifetime", label: "Lifetime" }
      ] },
    { name: "gender", type: "radio", label: "Gender",
      options: ["Male", "Female"] },
    { name: "agree",  type: "checkbox", checkboxLabel: "I agree" },
    { name: "bday",   type: "date",  label: "Birthday" },
    { name: "photo",  type: "file",  label: "Photo", accept: "image/*" },
    { name: "level",  type: "range", label: "Level",
      min: 1, max: 10, value: 5 }
  ]
});
// r = { name, email, site, pass, bio, plan, gender,
//       agree:true/false, bday, photo:File, level }
console.log(r);
Login form (confirm before login)
loginForm.addEventListener('submit', async function(e){
  e.preventDefault();

  // ask Yes/No first
  const ok = await Pulse.confirm("Do you want to login now?");
  if (!ok) return;

  // show loading then submit
  const l = Pulse.loading("Signing you in...");
  setTimeout(() => { l.close(); loginForm.submit(); }, 600);
});
Delete with confirm
async function deleteItem(id){
  const ok = await Pulse.confirm("Delete this permanently?");
  if (!ok) return;
  await fetch("/delete?id=" + id);
  Pulse.success("Item deleted.");
}
Combine everything
Pulse.modal("Your order shipped!", {
  type: "success",
  title: "Order #1234",
  image: "https://yoursite.com/box.png",
  timer: 5000,        // auto-close after 5s
  draggable: true     // and draggable
});