1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="theme-color" content="#FBF9F8"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 8 <link rel="icon" href="/ds/assets/logos/notify-icon.png" sizes="256x256" type="image/png"> 9 <link rel="apple-touch-icon" href="/ds/assets/logos/notify-icon.png"> 10 <title>Notify! Automations - Zapier, Make, IFTTT, GitHub Actions & 5000+ Apps</title> 11 <!-- Canonical: getnotifyapp.com and the pingie hostnames serve byte-identical 12 pages, which reads to a search engine as duplicate content across 13 domains. This names the one that should rank, so signals do not split. --> 14 <link rel="canonical" href="https://getnotifyapp.com/automation/"> 15 16 <!-- Link previews: without these, a shared link renders as a bare URL in 17 Slack, iMessage, Discord and every social feed. --> 18 <meta property="og:type" content="website"> 19 <meta property="og:site_name" content="Notify!"> 20 <meta property="og:url" content="https://getnotifyapp.com/automation/"> 21 <meta property="og:title" content="Notify! Automations - Zapier, Make, IFTTT, GitHub Actions & 5000+ Apps"> 22 <meta property="og:description" content="Automate notifications from thousands of apps with Notify!, Zapier, Make.com, IFTTT, GitHub Actions and our API. No coding required, connect your workflow in minutes."> 23 <meta property="og:image" content="https://getnotifyapp.com/og-image.png"> 24 <meta property="og:image:type" content="image/png"> 25 <meta property="og:image:width" content="1200"> 26 <meta property="og:image:height" content="630"> 27 <meta property="og:image:alt" content="Notify! Websites, scripts, and servers. Get notified. Free forever, private, yours."> 28 <meta name="twitter:card" content="summary_large_image"> 29 <meta name="twitter:title" content="Notify! Automations - Zapier, Make, IFTTT, GitHub Actions & 5000+ Apps"> 30 <meta name="twitter:description" content="Automate notifications from thousands of apps with Notify!, Zapier, Make.com, IFTTT, GitHub Actions and our API. No coding required, connect your workflow in minutes."> 31 <meta name="twitter:image" content="https://getnotifyapp.com/og-image.png"> 32
32<script type="application/ld+json"> 33 { 34 "@context": "https://schema.org", 35 "@type": "BreadcrumbList", 36 "itemListElement": [ 37 { 38 "@type": "ListItem", 39 "position": 1, 40 "name": "Home", 41 "item": "https://getnotifyapp.com/" 42 }, 43 { 44 "@type": "ListItem", 45 "position": 2, 46 "name": "Automations", 47 "item": "https://getnotifyapp.com/automation/" 48 } 49 ] 50 } 51 </script>
51 52 <meta name="twitter:image:alt" content="Notify! Websites, scripts, and servers. Get notified. Free forever, private, yours."> 53 54 <meta name="description" content="Automate notifications from thousands of apps with Notify!, Zapier, Make.com, IFTTT, GitHub Actions and our API. No coding required, connect your workflow in minutes."> 55 56 <!-- Pingie / Notify! design system: self-hosts Inter + Material Symbols, defines every token. --> 57 <link rel="stylesheet" href="/ds/styles.css"> 58 59 <!-- 60 Apple Smart App Banner 61 62 This meta tag enables the Apple Smart App Banner on iOS Safari. 63 When users visit this site on an iOS device, they'll see a banner at the top 64 of the page promoting the Notify! app from the App Store. 65 66 How it works: 67 - Automatically appears on iOS Safari when the app is not installed 68 - Dismissible by the user (won't show again for that session if dismissed) 69 - Provides a direct "View" button when the app is already installed 70 - Includes app icon, name, and a brief description 71 72 Required attributes: 73 - app-id: The unique App Store ID for Notify! (674828893) 74 - app-name: The name of the app as it appears in the App Store ("Notify!") 75 76 Browser behavior: 77 - Only appears on iOS devices in Safari 78 - Desktop and non-Safari mobile browsers ignore this tag 79 - No effect on page performance or SEO 80 81 Learn more: https://developer.apple.com/documentation/webkit/promoting-apps-with-smart-app-banners 82 --> 83 <meta name="apple-itunes-app" content="app-id=6748288936"> 84 85 <style> 86 * { 87 margin: 0; 88 padding: 0; 89 box-sizing: border-box; 90 } 91 92 body { 93 font-family: var(--font-sans); 94 line-height: var(--leading-relaxed); 95 color: var(--web-text); 96 background: var(--web-bg); 97 min-height: 100vh; 98 overflow-x: hidden; 99 padding-top: 68px; 100 -webkit-font-smoothing: antialiased; 101 text-rendering: optimizeLegibility; 102 } 103 104 a { color: inherit; } 105 106 ::selection { 107 background: rgba(15, 168, 215, 0.22); 108 } 109 110 /* ============================================================ 111 Navigation Bar (translucent, light) 112 ============================================================ */ 113 .navbar { 114 position: fixed; 115 top: 0; 116 left: 0; 117 right: 0; 118 background: rgba(251, 249, 248, 0.82); 119 backdrop-filter: blur(var(--blur-nav)); 120 -webkit-backdrop-filter: blur(var(--blur-nav)); 121 z-index: 1000; 122 padding: 13px 0; 123 border-bottom: 1px solid var(--web-border); 124 box-shadow: 0 1px 3px rgba(27, 28, 28, 0.04); 125 } 126 127 /* iOS Smart App Banner spacing - only on iOS devices */ 128 @supports (-webkit-touch-callout: none) { 129 body { 130 padding-top: 152px; /* Add spacing for Smart App Banner (84px) + navbar (68px) */ 131 } 132 133 /* Adjust mobile menu position for iOS */ 134 @media (max-width: 1024px) { 135 .nav-links { 136 top: 152px; /* Align with navbar position */ 137 } 138 } 139 } 140 141 .nav-container { 142 max-width: var(--container-max); 143 margin: 0 auto; 144 padding: 0 24px; 145 display: flex; 146 justify-content: space-between; 147 align-items: center; 148 position: relative; 149 } 150 151 .nav-logo { 152 display: flex; 153 align-items: center; 154 gap: 11px; 155 text-decoration: none; 156 color: var(--web-text); 157 font-size: 18px; 158 font-weight: var(--weight-extrabold); 159 letter-spacing: var(--tracking-tight); 160 transition: transform var(--dur-base) var(--ease-out); 161 } 162 163 .nav-logo:hover { 164 transform: scale(1.03); 165 } 166 167 .nav-logo img { 168 width: 32px; 169 height: 32px; 170 border-radius: 8px; 171 } 172 173 .nav-logo .by-pingie { 174 font-weight: var(--weight-medium); 175 color: var(--web-text-muted); 176 font-size: 13px; 177 } 178 179 .nav-links { 180 display: flex; 181 gap: 28px; 182 align-items: center; 183 } 184 185 .nav-link { 186 color: var(--web-text-muted); 187 text-decoration: none; 188 font-weight: var(--weight-medium); 189 font-size: 14px; 190 transition: color var(--dur-base) var(--ease-standard); 191 position: relative; 192 } 193 194 .nav-link:after { 195 content: ''; 196 position: absolute; 197 bottom: -6px; 198 left: 0; 199 right: 0; 200 height: 2px; 201 background: var(--pingie-cyan); 202 border-radius: 2px; 203 transform: scaleX(0); 204 transition: transform var(--dur-base) var(--ease-out); 205 } 206 207 .nav-link:hover { 208 color: var(--web-text); 209 } 210 211 .nav-link:hover:after { 212 transform: scaleX(1); 213 } 214 215 .nav-link.active { 216 color: var(--web-text); 217 font-weight: var(--weight-semibold); 218 } 219 220 .nav-link.active:after { 221 transform: scaleX(1); 222 } 223 224 .nav-cta { 225 background: var(--gradient-notify-primary); 226 color: #fff; 227 padding: 9px 20px; 228 border-radius: var(--radius-pill); 229 text-decoration: none; 230 font-weight: var(--weight-semibold); 231 font-size: 14px; 232 transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); 233 } 234 235 .nav-cta:hover { 236 transform: translateY(-2px); 237 box-shadow: var(--glow-brand); 238 } 239 240 .nav-cta:active { 241 transform: scale(var(--press-scale)); 242 } 243 244 /* Mobile Menu Button */ 245 .mobile-menu-btn { 246 display: none; 247 background: none; 248 border: none; 249 color: var(--web-text); 250 cursor: pointer; 251 position: relative; 252 z-index: 1002; 253 padding: 4px; 254 line-height: 0; 255 } 256 257 .mobile-menu-btn .material-symbols-outlined { 258 font-size: 28px; 259 } 260 261 @media (max-width: 1024px) { 262 .nav-links { 263 position: fixed; 264 top: 68px; 265 left: 0; 266 right: 0; 267 background: rgba(251, 249, 248, 0.98); 268 backdrop-filter: blur(var(--blur-nav)); 269 -webkit-backdrop-filter: blur(var(--blur-nav)); 270 flex-direction: column; 271 align-items: flex-start; 272 padding: 20px 24px; 273 gap: 22px; 274 transform: translateY(-110%); 275 transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-standard); 276 box-shadow: 0 16px 40px rgba(27, 28, 28, 0.12); 277 border-bottom: 1px solid var(--web-border); 278 opacity: 0; 279 visibility: hidden; 280 } 281 282 .nav-links.active { 283 transform: translateY(0); 284 opacity: 1; 285 visibility: visible; 286 } 287 288 .mobile-menu-btn { 289 display: block; 290 } 291 292 .nav-link:after { 293 display: none; 294 } 295 296 .nav-cta { 297 align-self: stretch; 298 text-align: center; 299 } 300 } 301 302 .container { 303 max-width: var(--container-max); 304 margin: 0 auto; 305 padding: 0 24px; 306 } 307 308 /* ============================================================ 309 Eyebrows / section headers 310 ============================================================ */ 311 .eyebrow { 312 font-size: var(--text-2xs); 313 font-weight: var(--weight-bold); 314 letter-spacing: var(--tracking-widest); 315 text-transform: uppercase; 316 color: var(--studio-tertiary); 317 } 318 319 .section-head { 320 text-align: center; 321 max-width: 720px; 322 margin: 0 auto 44px; 323 } 324 325 .section-head .eyebrow { 326 display: block; 327 margin-bottom: 12px; 328 } 329 330 .section-title { 331 font-size: clamp(28px, 4vw, var(--text-h2)); 332 font-weight: var(--weight-extrabold); 333 letter-spacing: var(--tracking-tight); 334 color: var(--web-text); 335 line-height: var(--leading-tight); 336 } 337 338 .section-subtitle { 339 color: var(--web-text-muted); 340 font-size: 17px; 341 line-height: var(--leading-normal); 342 margin-top: 14px; 343 } 344 345 /* ============================================================ 346 Gradient header band (marketing tier) 347 ============================================================ */ 348 .hero { 349 padding: 32px 0 8px; 350 } 351 352 .hero-band { 353 position: relative; 354 overflow: hidden; 355 background: var(--gradient-notify); 356 border-radius: var(--radius-2xl); 357 padding: 56px 48px; 358 color: #fff; 359 box-shadow: 0 40px 80px -30px rgba(118, 75, 162, 0.52); 360 } 361 362 .hero-band::before { 363 content: ''; 364 position: absolute; 365 inset: 0; 366 background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.16) 1px, transparent 0); 367 background-size: 38px 38px; 368 opacity: 0.55; 369 pointer-events: none; 370 } 371 372 .hero-content { 373 position: relative; 374 z-index: 1; 375 max-width: 760px; 376 } 377 378 .hero-badge { 379 display: inline-flex; 380 align-items: center; 381 gap: 8px; 382 background: rgba(255, 255, 255, 0.18); 383 backdrop-filter: blur(10px); 384 -webkit-backdrop-filter: blur(10px); 385 border: 1px solid rgba(255, 255, 255, 0.28); 386 padding: 8px 16px; 387 border-radius: var(--radius-pill); 388 color: #fff; 389 font-weight: var(--weight-semibold); 390 font-size: 13px; 391 margin-bottom: 22px; 392 } 393 394 .hero-badge .material-symbols-outlined { 395 font-size: 17px; 396 } 397 398 h1.hero-title { 399 font-size: clamp(38px, 6vw, var(--text-display-lg)); 400 font-weight: var(--weight-black); 401 letter-spacing: var(--tracking-tighter); 402 line-height: var(--leading-none); 403 text-transform: uppercase; 404 margin-bottom: 18px; 405 } 406 407 .hero-description { 408 font-size: 18px; 409 color: rgba(255, 255, 255, 0.94); 410 max-width: 600px; 411 line-height: var(--leading-normal); 412 margin-bottom: 28px; 413 } 414 415 .hero-actions { 416 display: flex; 417 gap: 12px; 418 flex-wrap: wrap; 419 align-items: center; 420 } 421 422 .hero-btn { 423 display: inline-flex; 424 align-items: center; 425 gap: 8px; 426 padding: 13px 24px; 427 border-radius: var(--radius-pill); 428 text-decoration: none; 429 font-weight: var(--weight-semibold); 430 font-size: 15px; 431 transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); 432 } 433 434 .hero-btn .material-symbols-outlined { 435 font-size: 19px; 436 } 437 438 .hero-btn-solid { 439 background: #fff; 440 color: var(--notify-purple); 441 } 442 443 .hero-btn-solid:hover { 444 transform: translateY(-2px); 445 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); 446 } 447 448 .hero-btn-solid:active { 449 transform: scale(var(--press-scale)); 450 } 451 452 .hero-btn-ghost { 453 color: #fff; 454 border: 1px solid rgba(255, 255, 255, 0.5); 455 } 456 457 .hero-btn-ghost:hover { 458 background: rgba(255, 255, 255, 0.14); 459 } 460 461 /* ============================================================ 462 Platform / integration cards (Material-3, light) 463 ============================================================ */ 464 .platforms-section { 465 padding: 64px 0 24px; 466 } 467 468 .platforms-grid { 469 display: grid; 470 grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); 471 gap: 22px; 472 } 473 /* Four cards, not three. The container maxes out at ~1112px, so 474 auto-fit tops out at THREE columns and the fourth card landed alone 475 on its own row at 356px with two empty columns beside it. Capping at 476 two above the three-column threshold gives a clean 2x2 where all 477 four platforms carry equal weight, and it is shorter than the 478 orphaned three-up (1155px against 1392px). Below 1140px auto-fit 479 already resolves to two columns, then one, so this only overrides 480 the range that would otherwise orphan. Revisit if a fifth card is 481 ever added: five in a 2x2 orphans again. */ 482 @media (min-width: 1140px) { 483 .platforms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 484 } 485 486 .platform-card { 487 background: var(--web-surface); 488 border: 1px solid var(--web-border); 489 border-radius: var(--radius-2xl); 490 padding: 32px; 491 box-shadow: var(--shadow-studio); 492 position: relative; 493 display: flex; 494 flex-direction: column; 495 transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard); 496 } 497 498 .platform-card:hover { 499 transform: translateY(-4px); 500 border-color: rgba(15, 168, 215, 0.35); 501 box-shadow: 0 1px 3px rgba(27, 28, 28, 0.06), 0 24px 48px rgba(27, 28, 28, 0.10); 502 } 503 504 .platform-card.coming-soon::before { 505 content: 'Coming Soon'; 506 position: absolute; 507 top: 18px; 508 right: -34px; 509 background: var(--ios-amber); 510 color: #fff; 511 padding: 5px 40px; 512 font-size: 12px; 513 font-weight: var(--weight-bold); 514 letter-spacing: 0.04em; 515 transform: rotate(45deg); 516 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); 517 z-index: 1; 518 } 519 520 .platform-header { 521 display: flex; 522 align-items: center; 523 gap: 16px; 524 margin-bottom: 22px; 525 } 526 527 .platform-logo { 528 width: 56px; 529 height: 56px; 530 flex-shrink: 0; 531 display: flex; 532 align-items: center; 533 justify-content: center; 534 border-radius: var(--radius-lg); 535 color: #fff; 536 } 537 538 .platform-logo .material-symbols-outlined { 539 font-size: 28px; 540 } 541 542 .zapier-logo { background: linear-gradient(135deg, #FF6900 0%, #FCB900 100%); } 543 .make-logo { background: linear-gradient(135deg, #6C63FF 0%, #4ECDC4 100%); } 544 /* IFTTT's own near-black, which is how its brand reads everywhere else. */ 545 .ifttt-logo { background: linear-gradient(135deg, #1B1C1C 0%, #404752 100%); } 546 /* GitHub's own graphite, so the card reads as GitHub next to Zapier's 547 orange and Make's violet rather than borrowing either. */ 548 .github-logo { background: linear-gradient(135deg, #24292F 0%, #57606A 100%); } 549 .scripts-logo { background: linear-gradient(135deg, var(--ios-green) 0%, #1FA34B 100%); } 550 551 .platform-name { 552 font-size: 22px; 553 font-weight: var(--weight-bold); 554 letter-spacing: var(--tracking-tight); 555 color: var(--web-text); 556 } 557 558 .platform
558-tagline { 559 color: var(--web-text-muted); 560 font-size: 14px; 561 margin-top: 2px; 562 } 563 564 .platform-stats { 565 display: grid; 566 grid-template-columns: repeat(3, 1fr); 567 gap: 12px; 568 margin: 4px 0 22px; 569 padding: 18px; 570 background: var(--studio-surface-low); 571 border-radius: var(--radius-lg); 572 } 573 574 .stat { 575 text-align: center; 576 } 577 578 .stat-number { 579 font-size: 19px; 580 font-weight: var(--weight-bold); 581 letter-spacing: var(--tracking-tight); 582 color: var(--web-accent); 583 } 584 585 .stat-label { 586 font-size: 12px; 587 color: var(--web-text-muted); 588 margin-top: 4px; 589 } 590 591 .platform-features { 592 list-style: none; 593 margin: 0 0 24px; 594 flex-grow: 1; 595 } 596 597 .platform-features li { 598 display: flex; 599 align-items: flex-start; 600 gap: 10px; 601 padding: 7px 0; 602 color: var(--web-text-muted); 603 font-size: 14.5px; 604 line-height: var(--leading-normal); 605 } 606 607 .platform-features li .material-symbols-outlined { 608 font-size: 19px; 609 color: var(--ios-green); 610 flex-shrink: 0;
611 margin-top: 1px; 612 } 613 614 .platform-cta { 615 display: inline-flex; 616 align-items: center; 617 justify-content: center; 618 gap: 8px; 619 width: 100%; 620 padding: 14px 24px; 621 background: var(--gradient-notify-primary); 622 color: #fff; 623 text-decoration: none; 624 border-radius: var(--radius-pill); 625 font-weight: var(--weight-semibold); 626 font-size: 15px; 627 text-align: center; 628 margin-top: auto; 629 transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); 630 } 631 632 .platform-cta .material-symbols-outlined { 633 font-size: 19px; 634 } 635 636 .platform-cta:hover { 637 transform: translateY(-2px); 638 box-shadow: var(--glow-brand); 639 } 640 641 .platform-cta:active { 642 transform: scale(var(--press-scale)); 643 } 644 645 .platform-cta.disabled { 646 background: var(--studio-surface-high); 647 color: var(--text-quaternary); 648 cursor: not-allowed; 649 } 650 651 .platform-cta.disabled:hover { 652 transform: none; 653 box-shadow: none; 654 } 655 656 .script-links { 657 display: flex; 658 /* Wraps since the card grew from two links to four: without this 659 the row clips at phone widths and the last chips are cut off. */ 660 flex-wrap: wrap; 661 gap: 12px; 662 margin-top: auto; 663 } 664 665 .script-link { 666 /* The 150px basis makes four chips share one row on desktop and 667 fold into a tidy two-by-two on phones. */ 668 flex: 1 1 150px; 669 display: inline-flex; 670 align-items: center; 671 justify-content: center; 672 gap: 8px; 673 padding: 12px 16px; 674 background: var(--web-surface); 675 border: 1.5px solid rgba(48, 209, 88, 0.32); 676 color: #1FA34B; 677 text-decoration: none; 678 border-radius: var(--radius-pill); 679 font-weight: var(--weight-semibold); 680 text-align: center; 681 font-size: 14.5px; 682 transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out); 683 } 684 685 .script-link .material-symbols-outlined { 686 font-size: 19px; 687 } 688 689 .script-link:hover { 690 background: rgba(48, 209, 88, 0.08); 691 border-color: var(--ios-green); 692 transform: translateY(-2px); 693 } 694 695 /* ============================================================ 696 Integration showcase 697 ============================================================ */ 698 .integrations-showcase { 699 background: var(--web-surface); 700 border: 1px solid var(--web-border); 701 border-radius: var(--radius-2xl); 702 padding: 48px; 703 margin: 56px 0; 704 box-shadow: var(--shadow-studio); 705 } 706 707 .integration-grid { 708 display: grid; 709 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 710 gap: 14px; 711 margin-top: 8px; 712 } 713 714 .integration-chip { 715 background: var(--studio-surface-low); 716 border: 1px solid var(--web-border); 717 border-radius: var(--radius-lg); 718 padding: 18px 14px; 719 display: flex; 720 flex-direction: column; 721 align-items: center; 722 justify-content: center; 723 gap: 8px; 724 transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard); 725 } 726 727 .integration-chip:hover { 728 transform: translateY(-4px); 729 border-color: rgba(15, 168, 215, 0.4); 730 box-shadow: 0 12px 24px rgba(27, 28, 28, 0.08); 731 } 732 733 .integration-chip .material-symbols-outlined { 734 font-size: 26px; 735 color: var(--studio-tertiary); 736 } 737 738 .integration-chip .chip-label { 739 font-size: 12.5px; 740 font-weight: var(--weight-medium); 741 color: var(--web-text-muted); 742 text-align: center; 743 } 744 745 /* ============================================================ 746 Workflow examples 747 ============================================================ */ 748 .workflows-section { 749 padding: 56px 0; 750 } 751 752 .workflow-examples { 753 display: grid; 754 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 755 gap: 20px; 756 } 757 758 .workflow-example { 759 background: var(--web-surface); 760 border: 1px solid var(--web-border); 761 border-radius: var(--radius-xl); 762 padding: 28px; 763 box-shadow: var(--shadow-studio); 764 transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); 765 } 766 767 .workflow-example:hover { 768 transform: translateY(-3px); 769 box-shadow: 0 1px 3px rgba(27, 28, 28, 0.06), 0 18px 40px rgba(27, 28, 28, 0.09); 770 } 771 772 .workflow-header { 773 display: flex; 774 align-items: center; 775 gap: 14px; 776 margin-bottom: 16px; 777 } 778 779 .workflow-icon { 780 width: 48px; 781 height: 48px; 782 flex-shrink: 0; 783 background: var(--gradient-notify-primary); 784 border-radius: var(--radius-md); 785 display: flex; 786 align-items: center; 787 justify-content: center; 788 color: #fff; 789 } 790 791 .workflow-icon .material-symbols-outlined { 792 font-size: 24px; 793 } 794 795 .workflow-title { 796 font-size: 18px; 797 font-weight: var(--weight-bold); 798 letter-spacing: var(--tracking-tight); 799 color: var(--web-text); 800 } 801 802 .workflow-description { 803 color: var(--web-text-muted); 804 line-height: var(--leading-normal); 805 font-size: 14.5px; 806 margin-bottom: 18px; 807 } 808 809 .workflow-platforms { 810 display: flex; 811 gap: 8px; 812 flex-wrap: wrap; 813 } 814 815 .platform-badge { 816 padding: 5px 12px; 817 background: rgba(102, 126, 234, 0.10); 818 color: var(--web-accent); 819 border-radius: var(--radius-pill); 820 font-size: 12.5px; 821 font-weight: var(--weight-semibold); 822 } 823 824 /* ============================================================ 825 API / developer section 826 ============================================================ */ 827 .api-section { 828 background: var(--web-surface); 829 border: 1px solid var(--web-border); 830 border-radius: var(--radius-2xl); 831 padding: 48px; 832 margin: 56px 0; 833 box-shadow: var(--shadow-studio); 834 text-align: center; 835 } 836 837 .code-example { 838 /* Fixed dark, in BOTH themes, on purpose. Every color inside this 839 block (the #fff base, the 42%-white comments, and the five span 840 colors) was tuned for a dark terminal look; when a later theming 841 pass made --bg-base adaptive, light mode silently became white 842 text on a near-white card, readable only where a colored span 843 happened to cover it. A code block that always looks like a 844 terminal is also simply the convention. */ 845 background: #16181f; 846 color: #fff; 847 padding: 24px; 848 border-radius: var(--radius-lg); 849 margin: 28px auto 0; 850 max-width: 760px; 851 font-family: var(--font-mono); 852 font-size: 13.5px; 853 line-height: 1.7; 854 text-align: left; 855 overflow-x: auto; 856 border: 1px solid var(--hairline); 857 box-shadow: var(--shadow-md); 858 } 859 860 .code-example .code-comment { color: rgba(235, 235, 245, 0.42); } 861 .code-example .code-method { color: var(--ios-amber); } 862 .code-example .code-url { color: var(--pingie-cyan-bright); } 863 .code-example .code-string { color: var(--ios-green); } 864 .code-example .code-key { color: #C66BFF; } 865 866 .api-cta { 867 display: inline-flex; 868 align-items: center; 869 justify-content: center; 870 gap: 8px; 871 padding: 14px 28px; 872 background: var(--gradient-notify-primary); 873 color: #fff; 874 text-decoration: none; 875 border-radius: var(--radius-pill); 876 font-weight: var(--weight-semibold); 877 font-size: 15px; 878 margin: 28px auto 0; 879 transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); 880 } 881 882 .api-cta .material-symbols-outlined { font-size: 19px; } 883 884 .api-cta:hover { 885 transform: translateY(-2px); 886 box-shadow: var(--glow-brand); 887 } 888 889 .api-cta:active { transform: scale(var(--press-scale)); } 890 891 /* ============================================================ 892 Closing CTA band 893 ============================================================ */ 894 .cta-section { 895 padding: 24px 0 72px; 896 } 897 898 .cta-card { 899 background: var(--gradient-notify); 900 border-radius: var(--radius-2xl); 901 padding: 56px 44px; 902 text-align: center; 903 color: #fff; 904 position: relative; 905 overflow: hidden; 906 box-shadow: 0 40px 80px -30px rgba(118, 75, 162, 0.5); 907 } 908 909 .cta-card::before { 910 content: ''; 911 position: absolute; 912 inset: 0; 913 background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.14) 1px, transparent 0); 914 background-size: 38px 38px; 915 opacity: 0.5; 916 pointer-events: none; 917 } 918 919 .cta-card-inner { position: relative; z-index: 1; } 920 921 .cta-title { 922 font-size: clamp(26px, 4vw, 40px); 923 font-weight: var(--weight-black); 924 letter-spacing: var(--tracking-tighter); 925 text-transform: uppercase; 926 line-height: var(--leading-tight); 927 } 928 929 .cta-card .cta-subtitle { 930 font-size: 17px; 931 color: rgba(255, 255, 255, 0.92); 932 line-height: var(--leading-normal); 933 max-width: 560px; 934 margin: 14px auto 0; 935 } 936 937 .cta-buttons { 938 display: flex; 939 gap: 14px; 940 justify-content: center; 941 flex-wrap: wrap; 942 margin-top: 30px; 943 } 944 945 .cta-button { 946 display: inline-flex; 947 align-items: center; 948 gap: 8px; 949 padding: 15px 28px; 950 border-radius: var(--radius-pill); 951 text-decoration: none; 952 font-weight: var(--weight-semibold); 953 font-size: 15px; 954 transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-standard); 955 } 956 957 .cta-button .material-symbols-outlined { font-size: 19px; } 958 959 .cta-primary { 960 background: #fff; 961 color: var(--notify-purple); 962 } 963 964 .cta-primary:hover { 965 transform: translateY(-2px); 966 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); 967 } 968 969 .cta-primary:active { transform: scale(var(--press-scale)); } 970 971 .cta-secondary { 972 background: rgba(255, 255, 255, 0.12); 973 color: #fff; 974 border: 1px solid rgba(255, 255, 255, 0.45); 975 } 976 977 .cta-secondary:hover { 978 background: rgba(255, 255, 255, 0.2); 979 transform: translateY(-2px); 980 } 981 982 .cta-secondary:active { transform: scale(var(--press-scale)); } 983 984 /* ============================================================ 985 Footer 986 ============================================================ */ 987 .footer { 988 border-top: 1px solid var(--web-border); 989 text-align: center; 990 padding: 40px 0; 991 color: var(--web-text-muted); 992 } 993 994 .footer-links { 995 display: flex; 996 gap: 28px; 997 justify-content: center; 998 flex-wrap: wrap; 999 margin-bottom: 18px; 1000 } 1001 1002 .footer a { 1003 color: var(--web-text-muted); 1004 text-decoration: none; 1005 font-weight: var(--weight-medium); 1006 font-size: 14px; 1007 transition: color var(--dur-base) var(--ease-standard); 1008 } 1009 1010 .footer a:hover { 1011 color: var(--pingie-cyan); 1012 } 1013 1014 .footer-copy { 1015 font-size: 13px; 1016 color: var(--text-quaternary); 1017 } 1018 1019 /* ============================================================ 1020 Entrance animation 1021 ============================================================ */ 1022 @keyframes fadeInUp { 1023 from { opacity: 0; transform: translateY(28px); } 1024 to { opacity: 1; transform: translateY(0); } 1025 } 1026 1027 .animate-in { 1028 animation: fadeInUp 0.7s var(--ease-out) forwards; 1029 opacity: 0; 1030 } 1031 1032 .delay-1 { animation-delay: 0.08s; } 1033 .delay-2 { animation-delay: 0.16s; } 1034 .delay-3 { animation-delay: 0.24s; } 1035 .delay-4 { animation-delay: 0.32s; } 1036 1037 @media (prefers-reduced-motion: reduce) { 1038 *, 1039 *::before, 1040 *::after { 1041 animation-duration: 0.001ms !important; 1042 animation-iteration-count: 1 !important; 1043 transition-duration: 0.001ms !important; 1044 scroll-behavior: auto !important; 1045 } 1046 .animate-in { opacity: 1 !important; transform: none !important; } 1047 } 1048 1049 @media (max-width: 600px) { 1050 .hero-band, 1051 .integrations-showcase, 1052 .api-section { padding: 32px 24px; } 1053 .platform-card { padding: 26px; } 1054 .cta-card { padding: 40px 26px; } 1055 } 1056 </style> 1057</head> 1058<body class="web-light"> 1059 <!-- Navigation --> 1060 <nav class="navbar"> 1061 <div class="nav-container"> 1062 <a href="https://getnotifyapp.com/" class="nav-logo"> 1063 <img src="/ds/assets/logos/notify-icon.png" alt="Notify! app icon" width="256" height="256">
1064 <span>Notify! <span class="by-pingie">by Pingie</span></span> 1065 </a> 1066 1067 <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Toggle navigation menu"> 1068 <span class="material-symbols-outlined" id="mobileMenuIcon">menu</span> 1069 </button> 1070 1071 <div class="nav-links" id="navLinks"> 1072 <a href="/" class="nav-link">Home</a> 1073 <a href="/help/" class="nav-link">Help</a> 1074 <a href="/automation/" class="nav-link active">Automations</a> 1075 <a href="/apidocs/" class="nav-link">API Docs</a> 1076 <a href="/builder/" class="nav-link">Create</a> 1077 1078 <a href="https://web.getnotifyapp.com" class="nav-link">Get Notifications</a> 1079 <a href="/downloads/" class="nav-cta">Get Notify!</a> 1080 </div> 1081 </div> 1082 </nav> 1083 1084 <div class="container"> 1085 <!-- Gradient header band --> 1086 <section class="hero"> 1087 <div class="hero-band animate-in"> 1088 <div class="hero-content"> 1089 <div class="hero-badge"> 1090 <span class="material-symbols-outlined">bolt</span> 1091 7,000+ apps, zero code, instant notifications 1092 </div> 1093 <h1 class="hero-title">Automate everything.<br>Get notified instantly.</h1> 1094 <p class="hero-description"> 1095 Connect Notify! to your entire workflow with Zapier, Make, IFTTT, GitHub Actions, or our API. Send a push, put a live progress bar on your Lock Screen, or have Notify! tell you when an automation quietly stops running. 1096 </p> 1097 <div class="hero-actions"> 1098 <a href="#integrations" class="hero-btn hero-btn-solid"> 1099 <span class="material-symbols-outlined">grid_view</span> 1100 Browse integrations 1101 </a> 1102 <a href="/apidocs/" class="hero-btn hero-btn-ghost"> 1103 <span class="material-symbols-outlined">terminal</span> 1104 Read the API docs 1105 </a> 1106 </div> 1107 </div> 1108 </div> 1109 </section> 1110 1111 <!-- Community Section. The link sits ABOVE the explanation on purpose: 1112 the thing a reader wants here is the way through to the projects, 1113 not the paragraph about why anyone is allowed to build them. --> 1114 <section class="api-section animate-in"> 1115 <div class="section-head" style="margin-bottom: 22px;"> 1116 <span class="eyebrow">Community</span> 1117 <h2 class="section-title">Other people build on Notify! too.</h2> 1118 </div> 1119 <a href="/community/" class="api-cta"> 1120 <span class="material-symbols-outlined">group</span> 1121 See community integrations 1122 </a> 1123 <p class="section-subtitle" style="margin-top: 22px;">No partner program, no application, no API key to request. Anyone can wire Notify! into their own project, and some already have.</p> 1124 </section> 1125 1126 <!-- Platform Cards --> 1127 <section class="platforms-section" id="integrations"> 1128 <div class="section-head"> 1129 <span class="eyebrow">Pick your path</span> 1130 <h2 class="section-title">Many ways to wire up Notify!</h2> 1131 <p class="section-subtitle">No-code automation platforms, hosted webhooks, or ready-made scripts. Start where you are comfortable.</p> 1132 </div> 1133 1134 <div class="platforms-grid"> 1135 <!-- Zapier Card --> 1136 <div class="platform-card animate-in"> 1137 <div class="platform-header"> 1138 <div class="platform-logo zapier-logo"><span class="material-symbols-outlined">bolt</span></div> 1139 <div> 1140 <div class="platform-name">Zapier</div> 1141 <div class="platform-tagline">The automation powerhouse</div> 1142 </div> 1143 </div> 1144 1145 <div class="platform-stats"> 1146 <div class="stat"> 1147 <div class="stat-number">5000+</div> 1148 <div class="stat-label">Apps</div> 1149 </div> 1150 <div class="stat"> 1151 <div class="stat-number">No-Code</div> 1152 <div class="stat-label">Required</div> 1153 </div> 1154 <div class="stat"> 1155 <div class="stat-number">5 min</div> 1156 <div class="stat-label">Setup</div> 1157 </div> 1158 </div> 1159 1160 <ul class="platform-features"> 1161 <li><span class="material-symbols-outlined fill">check_circle</span>Nine Notify! actions and a search, not just "send a message"</li> 1162 <li><span class="material-symbols-outlined fill">check_circle</span>Start, update, and end a Live Activity on your Lock Screen</li> 1163 <li><span class="material-symbols-outlined fill">check_circle</span>Ping a Beacon so you hear about it when the Zap stops running</li> 1164 <li><span class="material-symbols-outlined fill">check_circle</span>Multi-step workflows with filters and formatters</li> 1165 <li><span class="material-symbols-outlined fill">check_circle</span>Free tier with 100 tasks/month</li> 1166 </ul> 1167 1168 <a href="/zapier/" class="platform-cta"> 1169 Explore Zapier integration
1170 <span class="material-symbols-outlined">arrow_forward</span> 1171 </a> 1172 </div> 1173 1174 <!-- Make.com Card --> 1175 <div class="platform-card animate-in delay-1"> 1176 <div class="platform-header"> 1177 <div class="platform-logo make-logo"><span class="material-symbols-outlined">hub</span></div> 1178 <div> 1179 <div class="platform-name">Make</div> 1180 <div class="platform-tagline">Visual automation platform</div> 1181 </div> 1182 </div> 1183 1184 <div class="platform-stats"> 1185 <div class="stat"> 1186 <div class="stat-number">1500+</div> 1187 <div class="stat-label">Apps</div> 1188 </div> 1189 <div class="stat"> 1190 <div class="stat-number">Visual</div> 1191 <div class="stat-label">Builder</div> 1192 </div> 1193 <div class="stat"> 1194 <div class="stat-number">1000</div> 1195 <div class="stat-label">Free Ops</div> 1196 </div> 1197 </div> 1198 1199 <!-- 1200 HOLD until Make approves the pending app review. The Live Activity and 1201 Beacon modules are built and pushed but sit in Make's pending-changes 1202 queue, so scenarios still run the previously approved definitions. 1203 Until then these three lines overstate what a Make user can do today. 1204 The rest of this page is accurate now. 1205 --> 1206 <ul class="platform-features"> 1207 <li><span class="material-symbols-outlined fill">check_circle</span>Seven Notify! modules, not just "send a message"</li> 1208 <li><span class="material-symbols-outlined fill">check_circle</span>Start, update, and end a Live Activity on your Lock Screen</li> 1209 <li><span class="material-symbols-outlined fill">check_circle</span>Ping a Beacon so you hear about it when the scenario stops running</li> 1210 <li><span class="material-symbols-outlined fill">check_circle</span>Complex routing and error handling</li> 1211 <li><span class="material-symbols-outlined fill">check_circle</span>Generous free tier with 1000 operations</li> 1212 </ul> 1213 1214 <a href="https://www.make.com/en/integrations/notify" target="_blank" rel="noopener" class="platform-cta"> 1215 Explore Make integration 1216 <span class="material-symbols-outlined">arrow_forward</span> 1217 </a> 1218 </div> 1219 1220 <!-- IFTTT Card 1221 HOLD: the notifyapp service is resubmitted to IFTTT for review 1222 (September 2026, now with a proper connection instead of 1223 credentials in Applet fields). Until IFTTT approves, the 1224 ifttt.com/notifyapp link below 404s for everyone but the 1225 service owner, so do not copy this page to the server before 1226 approval. Same holding pattern the Make card went through. --> 1227 <div class="platform-card animate-in delay-2"> 1228 <div class="platform-header"> 1229 <div class="platform-logo ifttt-logo"><span class="material-symbols-outlined">alt_route</span></div> 1230 <div> 1231 <div class="platform-name">IFTTT</div> 1232 <div class="platform-tagline">If This Then Notify!</div> 1233 </div> 1234 </div> 1235 1236 <div class="platform-stats"> 1237 <div class="stat"> 1238 <div class="stat-number">900+</div> 1239 <div class="stat-label">Services</div> 1240 </div> 1241 <div class="stat"> 1242 <div class="stat-number">Once</div> 1243 <div class="stat-label">Connect</div> 1244 </div> 1245 <div class="stat"> 1246 <div class="stat-number">Free</div> 1247 <div class="stat-label">Tier</div> 1248 </div> 1249 </div> 1250 1251 <ul class="platform-features"> 1252 <li><span class="material-symbols-outlined fill">check_circle</span>The only one where Notify! is a trigger, not just an action</li> 1253 <li><span class="material-symbols-outlined fill">check_circle</span>Connect once with your Device ID and Token; Applets never carry credentials</li> 1254 <li><span class="material-symbols-outlined fill">check_circle</span>Send a push, ping a Beacon, or drive Live Activities and widgets</li> 1255 <li><span class="material-symbols-outlined fill">check_circle</span>Works entirely from the IFTTT app on your phone</li> 1256 <li><span class="material-symbols-outlined fill">check_circle</span>Free tier for simple Applets</li> 1257 </ul> 1258 1259 <a href="/ifttt/" class="platform-cta"> 1260 Explore IFTTT integration
1261 <span class="material-symbols-outlined">arrow_forward</span> 1262 </a> 1263 </div> 1264 1265 <!-- GitHub Actions Card 1266 `uses:` string and input names are frozen; see the 1267 #github-actions section below for the full example. --> 1268 <div class="platform-card animate-in delay-2"> 1269 <div class="platform-header"> 1270 <div class="platform-logo github-logo"><span class="material-symbols-outlined">account_tree</span></div> 1271 <div> 1272 <div class="platform-name">GitHub Actions</div> 1273 <div class="platform-tagline">Your build, on your Lock Screen</div> 1274 </div> 1275 </div> 1276 1277 <div class="platform-stats"> 1278 <div class="stat"> 1279 <div class="stat-number">2</div> 1280 <div class="stat-label">Secrets</div> 1281 </div> 1282 <div class="stat"> 1283 <div class="stat-number">0</div> 1284 <div class="stat-label">Servers</div> 1285 </div> 1286 <div class="stat"> 1287 <div class="stat-number">Free</div> 1288 <div class="stat-label">Always</div> 1289 </div> 1290 </div> 1291 1292 <ul class="platform-features"> 1293 <li><span class="material-symbols-outlined fill">check_circle</span>Official Action on the GitHub Marketplace</li> 1294 <li><span class="material-symbols-outlined fill">check_circle</span>A Live Activity that tracks the run from start to finish</li> 1295 <li><span class="material-symbols-outlined fill">check_circle</span>Segmented progress across your own build stages</li> 1296 <li><span class="material-symbols-outlined fill">check_circle</span>Or one plain push, with action: notify</li> 1297 <li><span class="material-symbols-outlined fill">check_circle</span>Warns instead of failing your build</li> 1298 </ul> 1299 1300 <a href="#github-actions" class="platform-cta"> 1301 Explore GitHub Actions integration 1302 <span class="material-symbols-outlined">arrow_forward</span> 1303 </a> 1304 </div> 1305 1306 <!-- Custom Scripts Card --> 1307 <div class="platform-card animate-in delay-3"> 1308 <div class="platform-header"> 1309 <div class="platform-logo scripts-logo"><span class="material-symbols-outlined">terminal</span></div> 1310 <div> 1311 <div class="platform-name">Custom Scripts</div> 1312 <div class="platform-tagline">Ready-to-use guides and scripts</div> 1313 </div> 1314 </div> 1315 1316 <div class="platform-stats"> 1317 <div class="stat"> 1318 <div class="stat-number">DIY</div> 1319 <div class="stat-label">Solutions</div> 1320 </div> 1321 <div class="stat"> 1322 <div class="stat-number">Step-by</div> 1323 <div class="stat-label">Step</div> 1324 </div> 1325 <div class="stat"> 1326 <div class="stat-number">Free</div> 1327 <div class="stat-label">Scripts</div> 1328 </div> 1329 </div> 1330 1331 <ul class="platform-features"> 1332 <li><span class="material-symbols-outlined fill">check_circle</span>Home Assistant integration, installed through HACS</li> 1333 <li><span class="material-symbols-outlined fill">check_circle</span>Homebridge plugin: HomeKit switches that send alerts</li> 1334 <li><span class="material-symbols-outlined fill">check_circle</span>Homebridge update notifications</li> 1335 <li><span class="material-symbols-outlined fill">check_circle</span>Synology NAS alerts and monitoring</li> 1336 <li><span class="material-symbols-outlined fill">check_circle</span>Server monitoring scripts</li> 1337 </ul> 1338 1339 <div class="script-links"> 1340 <a href="https://github.com/simplytoast1/Notify-for-HomeAssistant" target="_blank" rel="noopener" class="script-link">
1341 <span class="material-symbols-outlined">home</span> 1342 Home Assistant 1343 </a> 1344 <a href="https://github.com/simplytoast1/homebridge-notify-alerts" target="_blank" rel="noopener" class="script-link"> 1345 <span class="material-symbols-outlined">extension</span> 1346 Homebridge plugin 1347 </a> 1348 <a href="/homebridgescript/" class="script-link"> 1349 <span class="material-symbols-outlined">description</span> 1350 Homebridge script 1351 </a> 1352 <a href="/synologyalerts/" class="script-link"> 1353 <span class="material-symbols-outlined">storage</span> 1354 Synology 1355 </a> 1356 </div> 1357 </div> 1358 </div> 1359 </section> 1360 1361 <!-- Integration Showcase --> 1362 <section class="integrations-showcase animate-in"> 1363 <div class="section-head" style="margin-bottom: 32px;"> 1364 <span class="eyebrow">Plays well with others</span> 1365 <h2 class="section-title">One app. Endless possibilities.</h2> 1366 <p class="section-subtitle">Connect Notify! to thousands of apps and services you already use.</p> 1367 </div> 1368 1369 <div class="integration-grid"> 1370 <div class="integration-chip"> 1371 <span class="material-symbols-outlined">mail</span> 1372 <span class="chip-label">Gmail</span> 1373 </div> 1374 <div class="integration-chip"> 1375 <span class="material-symbols-outlined">table_chart</span> 1376 <span class="chip-label">Google Sheets</span> 1377 </div> 1378 <div class="integration-chip"> 1379 <span class="material-symbols-outlined">tag</span> 1380 <span class="chip-label">Slack</span> 1381 </div> 1382 <div class="integration-chip"> 1383 <span class="material-symbols-outlined">credit_card</span> 1384 <span class="chip-label">Stripe</span> 1385 </div> 1386 <div class="integration-chip"> 1387 <span class="material-symbols-outlined">shopping_bag</span> 1388 <span class="chip-label">Shopify</span> 1389 </div> 1390 <div class="integration-chip"> 1391 <span class="material-symbols-outlined">description</span> 1392 <span class="chip-label">Notion</span> 1393 </div> 1394 <div class="integration-chip"> 1395 <span class="material-symbols-outlined">view_kanban</span> 1396 <span class="chip-label">Trello</span> 1397 </div> 1398 <div class="integration-chip"> 1399 <span class="material-symbols-outlined">calendar_month</span> 1400 <span class="chip-label">Calendar</span> 1401 </div> 1402 <div class="integration-chip"> 1403 <span class="material-symbols-outlined">support_agent</span> 1404 <span class="chip-label">Zendesk</span> 1405 </div> 1406 <div class="integration-chip"> 1407 <span class="material-symbols-outlined">monitoring</span> 1408 <span class="chip-label">Analytics</span> 1409 </div> 1410 <div class="integration-chip"> 1411 <span class="material-symbols-outlined">webhook</span> 1412 <span class="chip-label">Webhooks</span> 1413 </div> 1414 <div class="integration-chip"> 1415 <span class="material-symbols-outlined">smart_toy</span> 1416 <span class="chip-label">ChatGPT</span> 1417 </div> 1418 </div> 1419 </section> 1420 1421 <!-- Workflow Examples --> 1422 <section class="workflows-section"> 1423 <div class="section-head animate-in">
1424 <span class="eyebrow">Inspiration</span> 1425 <h2 class="section-title">Popular automation workflows</h2> 1426 <p class="section-subtitle">Get inspired by what others are building with Notify!</p> 1427 </div> 1428 1429 <div class="workflow-examples"> 1430 <div class="workflow-example animate-in delay-1"> 1431 <div class="workflow-header"> 1432 <div class="workflow-icon"><span class="material-symbols-outlined">payments</span></div> 1433 <h3 class="workflow-title">Sales Celebration</h3> 1434 </div> 1435 <p class="workflow-description"> 1436 Get instant notifications for every new sale, payment, or subscription. Perfect for celebrating wins and tracking revenue in real time. 1437 </p> 1438 <div class="workflow-platforms"> 1439 <span class="platform-badge">Stripe</span> 1440 <span class="platform-badge">Shopify</span> 1441 <span class="platform-badge">PayPal</span> 1442 </div> 1443 </div> 1444 1445 <div class="workflow-example animate-in delay-2"> 1446 <div class="workflow-header"> 1447 <div class="workflow-icon"><span class="material-symbols-outlined">monitoring</span></div> 1448 <h3 class="workflow-title">Data Monitoring</h3> 1449 </div> 1450 <p class="workflow-description"> 1451 Monitor spreadsheets, databases, and analytics for important changes. Get alerted when KPIs hit targets or anomalies are detected. 1452 </p> 1453 <div class="workflow-platforms"> 1454 <span class="platform-badge">Google Sheets</span> 1455 <span class="platform-badge">Airtable</span> 1456 <span class="platform-badge">SQL</span> 1457 </div> 1458 </div> 1459 1460 <div class="workflow-example animate-in delay-3"> 1461 <div class="workflow-header"> 1462 <div class="workflow-icon"><span class="material-symbols-outlined">warning</span></div> 1463 <h3 class="workflow-title">System Alerts</h3> 1464 </div> 1465 <p class="workflow-description"> 1466 Monitor servers, websites, and services for downtime or errors. Get critical alerts instantly to minimize downtime. 1467 </p> 1468 <div class="workflow-platforms"> 1469 <span class="platform-badge">Uptime Robot</span> 1470 <span class="platform-badge">New Relic</span> 1471 <span class="platform-badge">AWS</span> 1472 </div> 1473 </div> 1474 1475 <div class="workflow-example animate-in delay-4"> 1476 <div class="workflow-header"> 1477 <div class="workflow-icon"><span class="material-symbols-outlined">mark_email_unread</span></div> 1478 <h3 class="workflow-title">Email Filtering</h3> 1479 </div> 1480 <p class="workflow-description"> 1481 Turn important emails into push notifications. Filter by sender, subject, or content to only get notified about what matters. 1482 </p> 1483 <div class="workflow-platforms"> 1484 <span class="platform-badge">Gmail</span> 1485 <span class="platform-badge">Outlook</span> 1486 <span class="platform-badge">IMAP</span> 1487 </div> 1488 </div> 1489 1490 <div class="workflow-example animate-in delay-1"> 1491 <div class="workflow-header"> 1492 <div class="workflow-icon"><span class="material-symbols-outlined">task_alt</span></div> 1493 <h3 class="workflow-title">Project Updates</h3> 1494 </div> 1495 <p class="workflow-description"> 1496 Stay on top of project progress with notifications for task completions, deadlines, and team updates. 1497 </p> 1498 <div class="workflow-platforms">
1499 <span class="platform-badge">Asana</span> 1500 <span class="platform-badge">Trello</span> 1501 <span class="platform-badge">Jira</span> 1502 </div> 1503 </div> 1504 1505 <div class="workflow-example animate-in delay-2"> 1506 <div class="workflow-header"> 1507 <div class="workflow-icon"><span class="material-symbols-outlined">smart_toy</span></div> 1508 <h3 class="workflow-title">AI Completions</h3> 1509 </div> 1510 <p class="workflow-description"> 1511 Get notified when AI tasks complete, models finish training, or automated workflows need human review. 1512 </p> 1513 <div class="workflow-platforms"> 1514 <span class="platform-badge">OpenAI</span> 1515 <span class="platform-badge">Replicate</span> 1516 <span class="platform-badge">Hugging Face</span> 1517 </div> 1518 </div> 1519 </div> 1520 </section> 1521 1522 1523 <!-- GitHub Action Section 1524 The published Marketplace listing is simplytoast1/notify-action. 1525 The `uses:` string and every input name below are FROZEN: they are 1526 baked into every workflow file that adopts the Action, exactly like 1527 a Zapier action key or a Make module name. If the Action ever gains 1528 inputs, add them here; never rename one. --> 1529 <section class="api-section animate-in" id="github-actions"> 1530 <div class="section-head" style="margin-bottom: 0;"> 1531 <span class="eyebrow">On the GitHub Marketplace</span> 1532 <h2 class="section-title">Watch your GitHub Actions run from the Lock Screen.</h2> 1533 <p class="section-subtitle">The official Notify! Action turns any GitHub workflow into a Live Activity. It starts when the run starts, fills in as your stages finish, and closes itself with the result. No server to run, nothing to host, and it never fails your build.</p> 1534 </div> 1535 1536 <div class="code-example"> 1537 <span class="code-comment"># .github/workflows/deploy.yml</span><br> 1538 <span class="code-key">- name</span>: Start Live Activity<br> 1539 <span class="code-key">id</span>: notify<br> 1540 <span class="code-key">uses</span>: <span class="code-string">simplytoast1/notify-action@v1</span><br> 1541 <span class="code-key">with</span>:<br> 1542 <span class="code-key">action</span>: start<br> 1543 <span class="code-key">device-id</span>: ${{ secrets.NOTIFY_DEVICE_ID }}<br> 1544 <span class="code-key">device-token</span>: ${{ secrets.NOTIFY_DEVICE_TOKEN }}<br> 1545 <span class="code-key">title</span>: Deploying<br> 1546 <span class="code-key">status</span>: Building<br> 1547 <span class="code-key">steps</span>: <span class="code-string">'4'</span><br> 1548 <span class="code-key">step</span>: <span class="code-string">'1'</span><br> 1549 <br> 1550 <span class="code-comment"># ... your build, tests, deploy ...</span><br> 1551 <br> 1552 <span class="code-key">- name</span>: Finish<br> 1553 <span class="code-key">if</span>: <span class="code-method">always()</span><br> 1554 <span class="code-key">uses</span>: <span class="code-string">simplytoast1/notify-action@v1</span><br> 1555 <span class="code-key">with</span>:<br> 1556 <span class="code-key">action</span>: end<br> 1557 <span class="code-key">device-id</span>: ${{ secrets.NOTIFY_DEVICE_ID }}<br> 1558 <span class="code-key">device-token</span>: ${{ secrets.NOTIFY_DEVICE_TOKEN }}<br> 1559 <span class="code-key">activity-id</span>: ${{ steps.notify.outputs.activity-id }}<br> 1560 <span class="code-key">status</span>: ${{ job.status }} 1561 </div> 1562 1563 <div class="section-head" style="margin: 36px 0 0;"> 1564 <p class="section-subtitle">Two repository secrets and you are done:</p> 1565 </div> 1566 1567 <div class="integration-grid" style="margin-top: 16px;">
1568 <span class="integration-chip"><span class="material-symbols-outlined">play_circle</span> Start, update and end a Live Activity</span> 1569 <span class="integration-chip"><span class="material-symbols-outlined">linear_scale</span> Segmented bar that tracks your own stages</span> 1570 <span class="integration-chip"><span class="material-symbols-outlined">notifications</span> Or one plain push with action: notify</span> 1571 <span class="integration-chip"><span class="material-symbols-outlined">shield</span> Warns instead of failing your build</span> 1572 <span class="integration-chip"><span class="material-symbols-outlined">dns</span> No server, no webhook, no hosting</span> 1573 </div> 1574 1575 <p class="section-subtitle" style="margin-top: 26px; font-size: 0.92em; opacity: 0.75;"> 1576 One thing worth knowing up front: GitHub does not pass repository secrets to workflows triggered by a pull request from a fork, so the Live Activity is skipped on those runs rather than failing. 1577 </p> 1578 1579 <a href="https://github.com/marketplace/actions/notify-push-and-live-activity" target="_blank" rel="noopener" class="api-cta"> 1580 <span class="material-symbols-outlined">rocket_launch</span> 1581 Get it on the GitHub Marketplace 1582 </a> 1583 </section> 1584 1585 1586 <!-- API Section --> 1587 <section class="api-section animate-in"> 1588 <div class="section-head" style="margin-bottom: 0;"> 1589 <span class="eyebrow">For developers</span> 1590 <h2 class="section-title">Skip the middleman. Send from your code.</h2> 1591 <p class="section-subtitle">A single POST request turns any script, server, or cron job into a push notification.</p> 1592 </div> 1593 1594 <div class="code-example"> 1595 <span class="code-comment"># Send a notification with a simple POST request</span><br> 1596 <span class="code-method">curl</span> -X POST <span class="code-url">https://push.getnotifyapp.com/notify-json/{DEVICE}?token={TOKEN}</span> \<br> 1597 -H <span class="code-string">"Content-Type: application/json"</span> \<br> 1598 -d '{<br> 1599 <span class="code-key">"text"</span>: <span class="code-string">"Deployment Complete"</span>,<br> 1600 }' 1601 </div> 1602 1603 <a href="https://getnotifyapp.com/apidocs/" target="_blank" rel="noopener" class="api-cta"> 1604 <span class="material-symbols-outlined">menu_book</span> 1605 View full API documentation 1606 </a> 1607 </section> 1608 1609 1610 <!-- AI agents Section --> 1611 <section class="api-section animate-in" id="ai-agents"> 1612 <div class="section-head" style="margin-bottom: 0;"> 1613 <span class="eyebrow">For AI agents</span> 1614 <h2 class="section-title">Built for your AI workflows.</h2> 1615 <p class="section-subtitle">An AI agent can discover this API on its own, read the contract, and start sending notifications without a human in the loop. No accounts, no OAuth dance, no SDK to install: just a URL and a token your assistant can use today.</p> 1616 </div> 1617 1618 <div class="code-example" style="margin-top: 28px;"> 1619 <span class="code-comment"># Paste this into your AI assistant, agent, or custom GPT.</span><br> 1620 <span class="code-comment"># Swap in your Device ID and token from the app's Settings.</span><br> 1621 <br> 1622 You can send push notifications to my devices. When I ask to be<br> 1623 notified, POST JSON to:<br> 1624 <span class="code-url">https://push.getnotifyapp.com/notify-json/YOUR_DEVICE_ID?token=YOUR_TOKEN</span><br> 1625 with a body like {<span class="code-key">"text"</span>: <span class="code-string">"message"</span>, <span class="code-key">"title"</span>: <span class="code-string">"optional title"</span>}.<br> 1626 The field <span class="code-key">"text"</span> is required; <span class="code-key">"title"</span>, <span class="code-key">"iconUrl"</span>, <span class="code-key">"imageUrl"</span>, and<br>
1627 <span class="code-key">"timeSensitive"</span> are optional. The full machine-readable API is at<br> 1628 <span class="code-url">https://getnotifyapp.com/apidocs/openapi.json</span> 1629 </div> 1630 1631 <div class="section-head" style="margin: 36px 0 0;"> 1632 <p class="section-subtitle">Why agents find their way around here without help:</p> 1633 </div> 1634 1635 <div class="integration-grid" style="margin-top: 16px;"> 1636 <span class="integration-chip"><span class="material-symbols-outlined">description</span> OpenAPI 3.1, published and complete</span> 1637 <span class="integration-chip"><span class="material-symbols-outlined">travel_explore</span> RFC 9727 API catalog at /.well-known/api-catalog</span> 1638 <span class="integration-chip"><span class="material-symbols-outlined">key</span> Auth is one token, no OAuth</span> 1639 <span class="integration-chip"><span class="material-symbols-outlined">code</span> One JSON endpoint, "text" is the only required field</span> 1640 <span class="integration-chip"><span class="material-symbols-outlined">timer</span> Beacons and Live Activities through the same URLs</span> 1641 </div> 1642 1643 <blockquote style="margin: 36px auto 0; max-width: 640px; padding: 20px 26px; border-left: 3px solid var(--notify-blue, #667eea); background: rgba(102, 126, 234, 0.06); border-radius: 0 14px 14px 0; font-style: italic; color: inherit;"> 1644 "An AI agent (or any script) can easily discover the API, understand the contract, and send notifications without human help. That is the practical definition of AI-ready for a notification service... one of the more agent-friendly notification services out there." 1645 <footer style="margin-top: 10px; font-style: normal; font-size: 0.85em; opacity: 0.7;">A Notify! user</footer> 1646 </blockquote> 1647 1648 <a href="/apidocs/openapi.json" class="api-cta"> 1649 <span class="material-symbols-outlined">smart_toy</span> 1650 Hand your agent the OpenAPI spec 1651 </a> 1652 </section> 1653 1654 <!-- CTA Section --> 1655 <section class="cta-section"> 1656 <div class="cta-card animate-in"> 1657 <div class="cta-card-inner"> 1658 <h2 class="cta-title">Ready to automate your notifications?</h2> 1659 <p class="cta-subtitle"> 1660 Download Notify! and connect it to your entire digital workflow in minutes. 1661 </p> 1662 1663 <div class="cta-buttons"> 1664 <a href="https://apps.apple.com/us/app/notify-web-script-notifier/id6748288936" target="_blank" rel="noopener" class="cta-button cta-primary"> 1665 <span class="material-symbols-outlined">ios_share</span> 1666 Download Notify! 1667 </a> 1668 <a href="/zapier/" class="cta-button cta-secondary"> 1669 <span class="material-symbols-outlined">bolt</span> 1670 Zapier setup 1671 </a> 1672 <a href="/ifttt/" class="cta-button cta-secondary"> 1673 <span class="material-symbols-outlined">alt_route</span> 1674 IFTTT setup 1675 </a> 1676 <a href="https://www.make.com/en/integrations/notify" target="_blank" rel="noopener" class="cta-button cta-secondary"> 1677 <span class="material-symbols-outlined">hub</span> 1678 Make setup 1679 </a> 1680 </div> 1681 </div> 1682 </div> 1683 </section> 1684 1685 <!-- Footer --> 1686 <footer class="footer"> 1687 <div class="footer-links"> 1688 <a href="/">Home</a> 1689 <a href="/help/">Help</a> 1690 <a href="/automation/">Automations</a> 1691 <a href="/zapier/">Zapier</a> 1692 <a href="/ifttt/">IFTTT</a> 1693 <a href="/apidocs/">API Docs</a> 1694 <a href="/community/">Community</a> 1695 <a href="https://pingie.com">Pingie.com</a> 1696 </div> 1697 <p class="footer-copy">© 2025 Notify! by Pingie. 100% Free. Private. Yours.</p> 1698 </footer> 1699 </div> 1700 1701
1701<script> 1702 // Mobile menu toggle 1703 const mobileMenuBtn = document.getElementById('mobileMenuBtn'); 1704 const mobileMenuIcon = document.getElementById('mobileMenuIcon'); 1705 const navLinks = document.getElementById('navLinks'); 1706 1707 mobileMenuBtn.addEventListener('click', () => { 1708 navLinks.classList.toggle('active'); 1709 mobileMenuIcon.textContent = navLinks.classList.contains('active') ? 'close' : 'menu'; 1710 }); 1711 1712 // Scroll animations 1713 const observerOptions = { 1714 threshold: 0.1, 1715 rootMargin: '0px 0px -50px 0px' 1716 }; 1717 1718 const observer = new IntersectionObserver((entries) => { 1719 entries.forEach(entry => { 1720 if (entry.isIntersecting) { 1721 entry.target.style.opacity = '0'; 1722 entry.target.style.transform = 'translateY(28px)'; 1723 setTimeout(() => { 1724 entry.target.style.transition = 'all 0.7s cubic-bezier(0.16, 1, 0.3, 1)'; 1725 entry.target.style.opacity = '1'; 1726 entry.target.style.transform = 'translateY(0)'; 1727 }, 50); 1728 observer.unobserve(entry.target); 1729 } 1730 }); 1731 }, observerOptions); 1732 1733 // Observe elements when page loads 1734 document.addEventListener('DOMContentLoaded', () => { 1735 const animateElements = document.querySelectorAll('.animate-in'); 1736 animateElements.forEach(el => { 1737 el.style.opacity = '0'; 1738 observer.observe(el); 1739 }); 1740 }); 1741 1742 // Smooth scrolling for anchor links 1743 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 1744 anchor.addEventListener('click', function (e) { 1745 e.preventDefault(); 1746 const target = document.querySelector(this.getAttribute('href')); 1747 if (target) { 1748 target.scrollIntoView({ behavior: 'smooth', block: 'start' }); 1749 } 1750 }); 1751 }); 1752 </script>
vendor: 1 bytes, line 1752
1752
1753<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"88096877caef4fb39ae245af12f41e76","spa":2}' crossorigin="anonymous"></script>
1753 1754</body> 1755</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.