1<!doctype html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8" /> 6 7 8 <meta property="og:title" content="CrazyRocket - Boost opt-in rates and ignite sales with gamified pop-ups."> 9 <meta property="og:description" content="CrazyRocket is the gamified pop-up platform that allows you to collect up to 3x compared to classic pop-ups."> 10 <meta property="og:image" content="https://www.crazyrocket.io/assets/fb-thumbnail.jpg"> 11 <meta property="og:url" content="https://www.crazyrocket.io/"> 12 <meta name="twitter:card" content="summary_large_image"> 13 14 <meta property="og:site_name" content="CrazyRocket"> 15 <meta name="twitter:image:alt" content="Collect more e-mails and boost sales with Gamified Pop-ups. #shopify @CrazyRocketApp"> 16 17 18 19 <meta name="twitter:site" content="CrazyRocketApp"> 20 21 <link rel="icon" type="image/png" href="https://www.crazyrocket.io/assets/img/favicon-16x16.png"> 22 <link rel="apple-touch-icon" sizes="76x76" href="https://www.crazyrocket.io/assets/img/apple-icon.png"> 23 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 24 25 <title></title> 26 27 <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 28 <meta name="viewport" content="width=device-width" /> 29 30 <link href="https://www.crazyrocket.io/assets/css/bootstrap.min.css" rel="stylesheet" /> 31 <link href="https://www.crazyrocket.io/assets/css/paper-kit.css" rel="stylesheet" /> 32 <link href="https://www.crazyrocket.io/assets/crazyrocket.css" rel="stylesheet" /> 33 34 <link rel="preconnect" href="https://fonts.googleapis.com"> 35 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 36 <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 37 38 39 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> 40 41 42 <!-- cookie consent --> 43 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.css" /> 44 45 <style> 46 body { 47 font-family: "Poppins", sans-serif; 48 -webkit-font-smoothing: antialiased; 49 -moz-osx-font-smoothing: grayscale; 50 } 51 52 .navbar .navbar-brand { 53 padding-left: 0; 54 margin-left: 0; 55 } 56 57 .navbar .navbar-translate { 58 margin-left: -20px; 59 } 60 61 /* Nav links â always dark (default for all pages) */ 62 .navbar .navbar-nav .nav-item .nav-link { 63 color: #333 !important; 64 text-shadow: none; 65 } 66 67 .shopify, .shopify-home { 68 background-color: #8bc249; 69 border-color: #8bc249; 70 font-size: 15px !important; 71 padding-left: 10px !important; 72 color: #ffffff !important; 73 --rem: 16; 74 transition: all 0.5s ease; 75 border: none; 76 border-radius: 30px; 77 box-shadow: none; 78 cursor: pointer; 79 display: inline-block; 80 font-weight: 600; 81 font-size: 18px; 82 padding: 0 18px; 83 line-height: 50px; 84 text-align: center; 85 text-decoration: none; 86 -webkit-user-select: none; 87 touch-action: manipulation; 88 } 89 90 .shopify:hover { 91 92 } 93 </style> 94</head> 95 96<body class="profile"> 97 <!-- Floating cookie settings button --> 98 <a href="#" onclick="CookieConsent.showPreferences(); return false;" id="cc-settings-btn" title="Cookie Settings" style="position:fixed;bottom:14px;left:14px;z-index:9999;font-size:28px;text-decoration:none;background:rgba(255,255,255,0.9);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:transform 0.2s;cursor:pointer" onmouseover="this.style.transform='scale(1.15)'" onmouseout="this.style.transform='scale(1)'">ðª</a> 99 100 <nav class="navbar navbar-expand-lg fixed-top navbar-transparent nav-down" color-on-scroll="150"> 101 <div class="container"> 102 <div class="navbar-translate"> 103 <div class="navbar-header"> 104 <a class="navbar-brand" href="/"><img id="logo-white" src='https://www.crazyrocket.io/content/logo-small.png'></a> 105 </div> 106 <button class="navbar-toggler navbar-burger" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
107 <span class="navbar-toggler-bar"></span> 108 <span class="navbar-toggler-bar"></span> 109 <span class="navbar-toggler-bar"></span> 110 </button> 111 </div> 112 <div class="collapse navbar-collapse"> 113 <ul class="navbar-nav ml-auto"> 114 115 <li class="nav-item"> 116 <a class="nav-link" href="/#features"><span style="float:left;margin-left:10px">Features</span></a> 117 </li> 118 <li class="nav-item"> 119 <a class="nav-link" href="/pricing"><span style="float:left;margin-left:10px">Pricing</span></a> 120 </li> 121 <li class="nav-item"> 122 <a class="nav-link" href="/support"><span style="float:left;margin-left:10px">Support</span></a> 123 </li> 124 <li class="nav-item" style="margin-left:10px; margin-top:-5px"> 125 <a style="padding-left:20px !important; margin-top:-5px" class="install-app btn btn-round shopify"> 126 INSTALL 127 </a> 128 </li> 129 </ul> 130 </div> 131 </div> 132 </nav> 133 134 135 136<style> 137 :root { 138 --cr-crimson: #C0223A; 139 --cr-crimson-dark: #9B1B30; 140 --cr-crimson-light: #E8345A; 141 --cr-bg: #ffffff; 142 --cr-card: #ffffff; 143 --cr-surface: #d5d5d5; 144 --cr-text: #1a1a2e; 145 --cr-text-muted: #6b6b80; 146 --cr-accent-green: #22a870; 147 --cr-accent-gold: #c9a020; 148 --cr-border: rgba(0,0,0,0.08); 149 } 150 151 body { 152 color: #333 !important; 153 background-color: #f5f5f5; 154 } 155 156 .underline { 157 background-image: linear-gradient(90deg, #e67399, #f2a640); 158 background-position: bottom; 159 background-size: 100% 10%; 160 background-repeat: no-repeat; 161 font-weight: bold; 162 } 163 164 /* Slider section */ 165 .slider-section { 166 max-width: 720px; 167 margin: 2rem auto 0; 168 padding: 0 1.5rem; 169 } 170 171 .price-display { 172 text-align: center; 173 margin-bottom: 2.5rem; 174 } 175 176 .price-amount { 177 font-size: clamp(3.5rem, 8vw, 5.5rem); 178 font-weight: 900; 179 letter-spacing: -0.04em; 180 line-height: 1; 181 transition: all 0.3s ease; 182 color: var(--cr-text); 183 } 184 .price-amount .currency { 185 font-size: 0.45em; 186 vertical-align: super; 187 margin-right: 0.05em; 188 font-weight: 700; 189 color: var(--cr-text-muted); 190 } 191 .price-amount .period { 192 font-size: 0.28em; 193 font-weight: 500; 194 color: var(--cr-text-muted); 195 vertical-align: baseline; 196 letter-spacing: 0.02em; 197 } 198 .price-amount.free-plan { 199 color: var(--cr-accent-green); 200 } 201 202 .plan-name-display { 203 font-size: 1.1rem; 204 font-weight: 700; 205 text-transform: uppercase; 206 letter-spacing: 0.15em; 207 color: var(--cr-crimson); 208 margin-bottom: 1rem; 209 min-height: 40px; 210 display: inline-flex; 211 align-items: center; 212 gap: 0.5rem; 213 } 214 .popular-badge { 215 white-space: nowrap; 216 background: var(--cr-crimson); 217 color: white; 218 font-size: 0.6rem; 219 font-weight: 700; 220 letter-spacing: 0.08em; 221 padding: 0.2rem 0.6rem; 222 border-radius: 20px; 223 text-transform: uppercase; 224 } 225 226 .views-display { 227 font-size: 1.15rem; 228 color: var(--cr-text-muted); 229 margin-top: 0.5rem; 230 position: relative; 231 display: inline-block; 232 } 233 .views-display strong { 234 color: var(--cr-text); 235 font-weight: 700; 236 } 237 .views-label { 238 text-decoration: underline dotted; 239 text-decoration-color: rgba(107, 107, 128, 0.3); 240 text-underline-offset: 3px; 241 cursor: pointer; 242 } 243 .views-label:hover { 244 text-decoration-color: rgba(107, 107, 128, 0.6); 245 } 246 .views-callout { 247 position: absolute; 248 bottom: calc(100% + 10px); 249 left: 50%; 250 transform: translateX(-50%) translateY(6px); 251 background: var(--cr-text); 252 color: white; 253 padding: 0.75rem 1rem; 254 border-radius: 10px; 255 font-size: 0.82rem; 256 line-height: 1.5; 257 width: 280px; 258 text-align: center; 259 box-shadow: 0 8px 24px rgba(0,0,0,0.15); 260 opacity: 0; 261 pointer-events: none; 262 transition: opacity 0.25s ease, transform 0.25s ease; 263 z-index: 10; 264 } 265 .views-callout.visible { 266 opacity: 1;
267 transform: translateX(-50%) translateY(0); 268 pointer-events: auto; 269 } 270 .views-callout::after { 271 content: ''; 272 position: absolute; 273 top: 100%; 274 left: 50%; 275 transform: translateX(-50%); 276 border: 6px solid transparent; 277 border-top-color: var(--cr-text); 278 } 279 280 /* Custom range slider */ 281 .slider-container { 282 position: relative; 283 padding: 1rem 0 1.5rem; 284 } 285 286 /* Drag hint pointing at the slider thumb */ 287 .slider-hint { 288 position: absolute; 289 bottom: 32px; 290 transform: translateX(-50%); 291 background: var(--cr-crimson); 292 color: #fff; 293 font-size: 0.72rem; 294 font-weight: 700; 295 letter-spacing: 0.02em; 296 padding: 0.3rem 0.7rem; 297 border-radius: 999px; 298 white-space: nowrap; 299 box-shadow: 0 6px 18px rgba(192, 34, 58, 0.35); 300 pointer-events: none; 301 z-index: 5; 302 animation: hintBob 1.4s ease-in-out infinite; 303 transition: opacity 0.4s ease, visibility 0.4s ease; 304 } 305 .slider-hint::after { 306 content: ''; 307 position: absolute; 308 bottom: -6px; 309 left: 50%; 310 transform: translateX(-50%); 311 width: 0; 312 height: 0; 313 border-left: 6px solid transparent; 314 border-right: 6px solid transparent; 315 border-top: 7px solid var(--cr-crimson); 316 } 317 .slider-hint.hidden { 318 opacity: 0; 319 visibility: hidden; 320 } 321 @keyframes hintBob { 322 0%, 100% { transform: translateX(-50%) translateY(0); } 323 50% { transform: translateX(-50%) translateY(-6px); } 324 } 325 326 .slider-track-bg { 327 position: relative; 328 height: 8px; 329 background: var(--cr-surface); 330 border-radius: 8px; 331 overflow: visible; 332 } 333 334 .slider-track-fill { 335 position: absolute; 336 left: 0; 337 top: 0; 338 height: 100%; 339 background: linear-gradient(90deg, var(--cr-accent-green), var(--cr-crimson-light), var(--cr-crimson)); 340 border-radius: 8px; 341 transition: width 0.15s ease; 342 } 343 344 input[type="range"] { 345 -webkit-appearance: none; 346 appearance: none; 347 width: 100%; 348 height: 8px; 349 background: transparent; 350 position: absolute; 351 top: 50%; 352 left: 0; 353 transform: translateY(-50%); 354 margin: 0; 355 cursor: pointer; 356 z-index: 2; 357 } 358 359 input[type="range"]::-webkit-slider-thumb { 360 -webkit-appearance: none; 361 width: 32px; 362 height: 32px; 363 border-radius: 50%; 364 background: var(--cr-crimson); 365 border: 4px solid var(--cr-crimson); 366 box-shadow: 0 4px 16px rgba(192, 34, 58, 0.25), 0 0 0 4px rgba(192, 34, 58, 0.08); 367 cursor: grab; 368 transition: box-shadow 0.2s, transform 0.15s; 369 position: relative; 370 z-index: 3; 371 margin-top: -4px; 372 } 373 input[type="range"]::-webkit-slider-thumb:hover { 374 box-shadow: 0 4px 24px rgba(192, 34, 58, 0.4), 0 0 0 8px rgba(192, 34, 58, 0.1); 375 transform: scale(1.1); 376 } 377 input[type="range"]::-webkit-slider-thumb:active { 378 cursor: grabbing; 379 transform: scale(0.95); 380 } 381 input[type="range"]::-moz-range-thumb { 382 width: 32px; 383 height: 32px; 384 border-radius: 50%; 385 background: var(--cr-crimson); 386 border: 4px solid var(--cr-crimson); 387 box-shadow: 0 4px 16px rgba(192, 34, 58, 0.25), 0 0 0 4px rgba(192, 34, 58, 0.08); 388 cursor: grab; 389 margin-top: -4px; 390 } 391 392 .slider-labels { 393 display: flex; 394 justify-content: space-between; 395 margin-top: 1.5rem; 396 padding: 0 16px; 397 } 398 .slider-labels span { 399 font-size: 0.72rem; 400 color: var(--cr-text-muted); 401 font-weight: 500; 402 letter-spacing: 0.02em; 403 position: relative; 404 text-align: center; 405 cursor: pointer; 406 } 407 .slider-labels span::before { 408 content: ''; 409 display: block; 410 width: 1px; 411 height: 8px; 412 background: rgba(0,0,0,0.12); 413 margin: 0 auto 6px; 414 } 415 .slider-labels span.active-label { 416 color: var(--cr-text); 417 font-weight: 700; 418 } 419 420 /* Unlock pills */ 421 .unlock-pills { 422 text-align: center; 423 margin: 0.5rem 0 0; 424 height: 75px; 425 display: flex; 426 flex-wrap: wrap; 427 justify-content: center; 428 align-content: center; 429 gap: 0.4rem; 430 overflow: hidden; 431 } 432 .unlock-pill { 433 display: inline-flex; 434 align-items: center; 435 gap: 0.3rem; 436 background: rgba(34, 168, 112, 0.1); 437 color: var(--cr-accent-green); 438 font-size: 0.75rem; 439 font-weight: 600; 440 padding: 0.35rem 0.75rem; 441 border-radius: 20px; 442 animation: pillPop 0.3s ease forwards; 443 opacity: 0; 444 transform: scale(0.9); 445 } 446 .unlock-pill.new-tier { 447 background: rgba(192, 34, 58, 0.1); 448 color: var(--cr-crimson); 449 } 450 @keyframes pillPop { 451 from { opacity: 0; transform: scale(0.9); } 452 to { opacity: 1; transform: scale(1); } 453 } 454 455 /* CTA button */ 456 .cta-section { 457 text-align: center; 458 margin: 1.5rem 0 1rem; 459 } 460 461 .btn-cta { 462 display: inline-block; 463 background: var(--cr-crimson); 464 color: white !important; 465 border: none; 466 padding: 1rem 3rem; 467 font-size: 1.05rem; 468 font-weight: 700; 469 border-radius: 60px; 470 cursor: pointer; 471 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 472 box-shadow: 0 4px 20px rgba(192, 34, 58, 0.25); 473 letter-spacing: 0.02em; 474 text-decoration: none !important; 475 } 476 .btn-cta:hover { 477 background: var(--cr-crimson-light); 478 transform: translateY(-2px); 479 box-shadow: 0 8px 32px rgba(192, 34, 58, 0.35); 480 color: white !important; 481 } 482 .btn-cta.free-cta { 483 background: var(--cr-accent-green); 484 box-shadow: 0 4px 20px rgba(34, 168, 112, 0.25); 485 } 486 .btn-cta.free-cta:hover { 487 background: #1d9462; 488 box-shadow: 0 8px 32px rgba(34, 168, 112, 0.35); 489 } 490 491 .trial-note { 492 font-size: 0.85rem; 493 color: var(--cr-text-muted); 494 margin-top: 0.75rem; 495 } 496 497 /* Override global section padding */ 498 [class*="features-"], 499 [class*="pricing-"] { 500 padding: 0 !important; 501 } 502 503 /* Features section */ 504 .features-section { 505 max-width: 960px; 506 margin: 6rem auto 0; 507 padding: 0 1.5rem 3rem; 508 } 509 510 .features-section h2 { 511 font-size: 2.2rem; 512 font-weight: 700; 513 text-align: center; 514 margin-bottom: 0.5rem; 515 letter-spacing: -0.02em; 516 color: var(--cr-text); 517 } 518 519 .features-subtitle { 520 text-align: center; 521 color: var(--cr-text-muted); 522 font-size: 0.95rem; 523 margin-bottom: 2.5rem; 524 } 525 526 .features-grid { 527 display: grid; 528 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 529 gap: 1px; 530 background: var(--cr-border); 531 border-radius: 16px; 532 overflow: hidden; 533 border: 1px solid var(--cr-border); 534 } 535 536 .feature-item { 537 background: var(--cr-card); 538 padding: 1.25rem 1.5rem; 539 display: flex; 540 align-items: center; 541 gap: 0.85rem; 542 transition: background 0.2s; 543 } 544 .feature-item:hover { 545 background: #f5f5f5; 546 } 547 548 .feature-icon { 549 width: 32px; 550 height: 32px; 551 border-radius: 8px; 552 display: flex; 553 align-items: center; 554 justify-content: center; 555 flex-shrink: 0; 556 font-size: 0.85rem; 557 } 558 .feature-icon.included { 559 background: rgba(34, 168, 112, 0.1); 560 color: var(--cr-accent-green); 561 } 562 .feature-icon.locked { 563 background: rgba(107, 107, 128, 0.08); 564 color: var(--cr-text-muted); 565 } 566 567 .feature-name { 568 font-size: 0.9rem; 569 font-weight: 500; 570 color: var(--cr-text); 571 } 572 .feature-name.locked { 573 color: var(--cr-text-muted); 574 } 575 576 .feature-badge { 577 font-size: 0.65rem; 578 font-weight: 700; 579 text-transform: uppercase; 580 letter-spacing: 0.08em; 581 padding: 0.15rem 0.5rem; 582 border-radius: 4px; 583 margin-left: auto; 584 flex-shrink: 0; 585 } 586 .feature-badge.premium { 587 background: rgba(192, 34, 58, 0.1); 588 color: var(--cr-crimson); 589 } 590 591 /* Toast */ 592 .unlock-toast { 593 position: fixed; 594 bottom: 2rem; 595 left: 50%; 596 transform: translateX(-50%) translateY(20px); 597 background: var(--cr-text); 598 color: white; 599 padding: 0.85rem 1.75rem; 600 border-radius: 60px; 601 font-size: 0.95rem; 602 font-weight: 600; 603 box-shadow: 0 8px 32px rgba(0,0,0,0.2); 604 opacity: 0; 605 pointer-events: none; 606 transition: opacity 0.35s ease, transform 0.35s ease; 607 z-index: 100; 608 white-space: nowrap; 609 } 610 .unlock-toast.visible { 611 opacity: 1;
612 transform: translateX(-50%) translateY(0); 613 } 614 615 /* Animations */ 616 @keyframes fadeUp { 617 from { opacity: 0; transform: translateY(20px); } 618 to { opacity: 1; transform: translateY(0); } 619 } 620 .animate-in { 621 animation: fadeUp 0.6s ease forwards; 622 } 623 .animate-in:nth-child(2) { animation-delay: 0.1s; } 624 .animate-in:nth-child(3) { animation-delay: 0.2s; } 625 626 /* Responsive */ 627 /* White Glove collapsible */ 628 .wg-section { 629 max-width: 760px; 630 margin: 4rem auto 0; 631 padding: 0 1.5rem 4rem; 632 } 633 .wg-details { 634 background: var(--cr-card); 635 border: 1px solid var(--cr-border); 636 border-radius: 16px; 637 overflow: hidden; 638 transition: box-shadow 0.25s ease; 639 } 640 .wg-details[open] { 641 box-shadow: 0 8px 32px rgba(0,0,0,0.06); 642 } 643 .wg-summary { 644 list-style: none; 645 cursor: pointer; 646 padding: 1.25rem 1.5rem; 647 display: flex; 648 align-items: center; 649 justify-content: space-between; 650 gap: 1rem; 651 font-weight: 700; 652 font-size: 1.05rem; 653 color: var(--cr-text); 654 user-select: none; 655 } 656 .wg-summary::-webkit-details-marker { display: none; } 657 .wg-summary-title { 658 display: flex; 659 align-items: center; 660 gap: 0.6rem; 661 } 662 .wg-summary-icon { font-size: 1.25rem; } 663 .wg-chevron { 664 transition: transform 0.25s ease; 665 color: var(--cr-text-muted); 666 font-size: 1.4rem; 667 line-height: 1; 668 } 669 .wg-details[open] .wg-chevron { transform: rotate(180deg); } 670 .wg-content { 671 padding: 0 1.75rem 1.75rem; 672 color: var(--cr-text-muted); 673 font-size: 0.95rem; 674 line-height: 1.65; 675 animation: fadeUp 0.4s ease; 676 } 677 .wg-tagline { 678 color: var(--cr-crimson); 679 font-weight: 600; 680 margin-bottom: 0.75rem; 681 } 682 .wg-content h5 { 683 color: var(--cr-text); 684 font-size: 0.85rem; 685 font-weight: 700; 686 text-transform: uppercase; 687 letter-spacing: 0.05em; 688 margin: 1.6rem 0 0.7rem; 689 } 690 .wg-list { 691 list-style: none; 692 padding: 0; 693 margin: 0; 694 } 695 .wg-list li { 696 position: relative; 697 padding-left: 1.6rem; 698 margin-bottom: 0.5rem; 699 } 700 .wg-list li::before { 701 content: '\2713'; 702 position: absolute; 703 left: 0; 704 top: 0; 705 color: var(--cr-accent-green); 706 font-weight: 700; 707 } 708 .wg-list.dot li::before { 709 content: '\2022'; 710 color: var(--cr-crimson); 711 font-size: 1.1rem; 712 line-height: 1.4; 713 } 714 .wg-list.note li::before { 715 content: '\2013'; 716 color: var(--cr-text-muted); 717 } 718 .wg-list.note { 719 font-size: 0.88rem; 720 } 721 .wg-availability { 722 margin: 1.6rem 0 1rem; 723 padding: 0.85rem 1rem; 724 background: rgba(192, 34, 58, 0.06); 725 border-radius: 10px; 726 color: var(--cr-text); 727 font-weight: 600; 728 text-align: center; 729 } 730 .wg-book { 731 text-align: center; 732 margin: 1.25rem 0 0.5rem; 733 } 734 735 @media (max-width: 576px) { 736 .slider-labels span { font-size: 0.62rem; } 737 .features-grid { grid-template-columns: 1fr; } 738 } 739</style> 740 741 742 743<div class="wrapper" style="background-color: unset !important;"> 744 745 <div class="container" style="padding-top:150px; margin-bottom:60px;"> 746 <div class="row"> 747 <div class="col-md-10 ml-auto mr-auto text-center"> 748 <h1 style="color:black !important; font-size:clamp(1.6rem, 3.5vw, 2.4rem)">Get more leads and sales<br />with a powerful tool that <span class="underline">pays for itself.</span></h1><br /> 749 <h3 style="white-space:nowrap">Start free. Scale as you grow. Upgrade, downgrade or cancel at any time.</h3> 750 </div> 751 </div> 752 753 <!-- Slider Pricing --> 754 <section class="slider-section animate-in"> 755 <div class="price-display"> 756 <div class="plan-name-display" id="planName">PREMIUM</div> 757 <div class="price-amount" id="priceAmount">
758 <span class="currency">$</span>39<span class="period">/month</span> 759 </div> 760 <div class="views-display" id="viewsDisplay"> 761 <strong>60,000</strong> <span class="views-label" id="viewsLabel">monthly pop-up views</span> 762 <div class="views-callout" id="viewsCallout">Every time a visitor sees your pop-up, it counts as one view. Your monthly allowance resets each billing cycle.</div> 763 </div> 764 </div> 765 766 <div class="slider-container"> 767 <div class="slider-track-bg"> 768 <div class="slider-track-fill" id="sliderFill" style="width: 60%"></div> 769 <input type="range" min="0" max="5" step="1" value="3" id="pricingSlider"> 770 <div class="slider-hint" id="sliderHint">Drag to unlock features 👉</div> 771 </div> 772 <div class="slider-labels" id="sliderLabels"> 773 <span>1K</span> 774 <span>5K</span> 775 <span>20K</span> 776 <span class="active-label">60K</span> 777 <span>150K</span> 778 <span>∞</span> 779 </div> 780 </div> 781 782 <div class="unlock-pills" id="unlockPills"></div> 783 784 <div class="cta-section"> 785 <a class="btn-cta" id="ctaButton" href="https://apps.shopify.com/crazyrocket" target="_blank">Get Started</a> 786 <div class="trial-note" id="trialNote">Most popular for growing stores</div> 787 </div> 788 </section> 789 790 <!-- Features --> 791 <section class="features-section animate-in"> 792 <h2>Everything you need to grow your email list <br />and turn visitors into customers</h2> 793 <br /> 794 <div class="features-grid" id="featuresGrid"> 795 <!-- Populated by JS --> 796 </div> 797 </section> 798 799 <!-- White Glove Onboarding --> 800 <section class="wg-section animate-in"> 801 <details class="wg-details"> 802 <summary class="wg-summary"> 803 <span class="wg-summary-title"> 804 <span class="wg-summary-icon">💎</span> 805 Learn more about White Glove Onboarding 806 </span> 807 <span class="wg-chevron">▾</span> 808 </summary> 809 <div class="wg-content"> 810 <p class="wg-tagline">Personal 1-on-1 help — book a session with our team.</p> 811 <p>Get expert, one-on-one guidance to set up CrazyRocket and get the most out of your campaigns. In a live one-on-one session we'll work through your setup together, fine-tune the details, and make sure you launch with confidence.</p> 812 813 <h5>What we'll help you with</h5> 814 <ul class="wg-list"> 815 <li>reCAPTCHA setup</li> 816 <li>Design review, hands-on design setup, and CSS improvements</li> 817 <li>Strategy brainstorming for your campaigns</li> 818 <li>Guidance on configuring your integrations</li> 819 <li>Cloning campaigns across your different stores</li> 820 </ul> 821 822 <h5>How it works</h5> 823 <ul class="wg-list dot"> 824 <li>Booked 1-on-1 chat sessions, by appointment</li> 825 <li>Up to 2 hours per month</li> 826 <li>5 business-day turnaround to schedule your session after you request it</li> 827 </ul> 828 829 <h5>Good to know</h5> 830 <ul class="wg-list note"> 831 <li>Monthly hours don't roll over.</li> 832 <li>Sessions are guidance and light hands-on help — not full custom development or done-for-you builds. CSS support covers cosmetic refinements, not custom theme development.</li> 833 <li>Scope is limited to CrazyRocket setup and configuration.</li> 834 <li>A separate CrazyRocket subscription is required for each additional store. Cloning a campaign to another store doesn't include that store's plan.</li> 835 <li>Please reschedule with at least 24 hours' notice; missed sessions count toward your monthly allowance.</li> 836 </ul> 837 </div> 838 </details> 839 </section> 840 </div> 841</div> 842 843<div class="unlock-toast" id="unlockToast"></div> 844 845 846 <style> 847 .footer.footer-black.footer-big { 848 background-color: #111 !important;
849 color: #e0e0e0 !important; 850 font-size: 16px !important; 851 } 852 853 .footer.footer-black.footer-big a { 854 color: #e0e0e0 !important; 855 font-size: 16px !important; 856 } 857 858 .footer.footer-black.footer-big a:hover { 859 color: #fff !important; 860 } 861 862 .footer.footer-black.footer-big .copyright { 863 background-color: transparent !important; 864 color: #aaa !important; 865 font-size: 15px !important; 866 } 867 868 .footer.footer-black.footer-big li { 869 margin-bottom: 0 !important; 870 } 871 872 .footer.footer-black.footer-big ul { 873 text-align: center !important; 874 } 875 876 .footer.footer-black.footer-big hr { 877 border-color: #333 !important; 878 } 879</style> 880<footer class="footer footer-black footer-big"> 881 882 <div class="container"> 883 <div class="row"> 884 885 <div class="col-md-12 text-center"> 886 <div class="links"> 887 <ul> 888 <li> 889 <a href="/support/all-articles">All Support Articles</a> 890 </li> 891 <li> 892 <a href="/home/privacypolicy">Privacy & Cookie Policy</a> 893 </li> 894 <li> 895 <a href="#" onclick="CookieConsent.showPreferences(); return false;">Cookie Settings</a> 896 </li> 897 <li> 898 <a href="/home/tos">Terms of Service</a> 899 </li> 900 </ul> 901 <hr> 902 <div class="copyright"> 903 <div class="pull-left"> 904 ©
904<script>document.write(new Date().getFullYear())</script>
904, made with <i class="fa fa-heart heart"></i> by CrazyRocket - P.I. 13748061002 905 </div> 906 </div> 907 </div> 908 </div> 909 </div> 910 </div> 911</footer> 912 913 914 915 916
916<script src="https://www.crazyrocket.io/assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
916 917
917<script src="https://www.crazyrocket.io/assets/js/jquery-ui-1.12.1.custom.min.js" type="text/javascript"></script>
917 918
918<script src="https://www.crazyrocket.io/assets/js/popper.js" type="text/javascript"></script>
918 919
919<script src="https://www.crazyrocket.io/assets/js/bootstrap.min.js" type="text/javascript"></script>
919 920 921
921<script src="https://www.crazyrocket.io/scripts/jquery.validate.min.js"></script>
921 922
922<script src="https://www.crazyrocket.io/scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
922 923
923<script src="https://www.crazyrocket.io/scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
923 924 925
925<script src="https://www.crazyrocket.io/assets/js/sweetalert2.js"></script>
925 926
926<script src="https://www.crazyrocket.io/assets/js/paper-kit.js"></script>
926 927 928 <!-- chat --> 929
929<script type="text/javascript">window.$crisp = []; window.CRISP_WEBSITE_ID = "c96ae38e-61cf-4d31-bb02-887c7a4f0dfb"; (function () { d = document; s = d.createElement("script"); s.src = "https://client.crisp.chat/l.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })();</script>
929 930 931 932 <!-- Google Analytics - blocked until analytics consent -->
vendor: 107 bytes, lines 932-933
932 933 <script type="text/plain" data-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=
933UA-127894510-1
vendor: 19 bytes, lines 933-935
933"></script> 934 935
935<script> 936 /* --- Tracking functions (called by cookie-consent-config.js on consent) --- */ 937 938 function startAnalytics() { 939 window.dataLayer = window.dataLayer || []; 940 function gtag() { dataLayer.push(arguments); } 941 window.gtag = gtag; 942 gtag('js', new Date()); 943 gtag('config', 'UA-127894510-1', { 'anonymize_ip': true }); 944 } 945 946 function FbOptIn() {
vendor: 647 bytes, lines 946-958
946 947 !function (f, b, e, v, n, t, s) { 948 if (f.fbq) return; n = f.fbq = function () { 949 n.callMethod ? 950 n.callMethod.apply(n, arguments) : n.queue.push(arguments) 951 }; 952 if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; 953 n.queue = []; t = b.createElement(e); t.async = !0; 954 t.src = v; s = b.getElementsByTagName(e)[0]; 955 s.parentNode.insertBefore(t, s) 956 }(window, document, 'script', 957 'https://connect.facebook.net/en_US/fbevents.js'); 958 fbq('init', '
958296554337619368
vendor: 52 bytes, lines 958-960
958'); 959 fbq('track', 'PageView'); 960
960} 961 962 var optinHotJar = function () {
vendor: 175 bytes, lines 962-965
962 963 (function (h, o, t, j, a, r) { 964 h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) }; 965 h._hjSettings = { hjid:
9651059700
vendor: 333 bytes, lines 965-971
965, hjsv: 6 }; 966 a = o.getElementsByTagName('head')[0]; 967 r = o.createElement('script'); r.async = 1; 968 r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv; 969 a.appendChild(r); 970 })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv='); 971
971} 972 973 /* --- Apollo.io tracking (marketing category) --- */ 974 function initApollo() { 975 // TODO: Add your Apollo.io tracking snippet here when ready. 976 // It will only fire after marketing consent is granted. 977 } 978 </script>
978 979 980 <!-- CookieConsent v3 --> 981
981<script defer src="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.umd.js"></script>
981 982
982<script defer src="https://www.crazyrocket.io/scripts/cookie-consent-config.js"></script>
982 983 984
984<script> 985 var CrazyRocket = {}; 986 987 CrazyRocket.ShopifyApiKey = "ea7da5935c92276944090810897e4901"; 988 989 window.addEventListener('DOMContentLoaded', function() { 990 (function($) { 991 992 var htmlDecode = function(encodedStr) { 993 var x = jQuery("<div/>").html(encodedStr).text(); 994 return x; 995 } 996 997 window.isAuthenticated = false; 998 window.cdn = 'https://www.crazyrocket.io/'; 999 window.twitterSharingText = htmlDecode('Collect more e-mails and boost sales with Gamified Pop-ups. #shopify @CrazyRocketApp'); 1000 1001$(".install-app").click(function () { 1002 location.href="/home/install"; 1003 }); 1004 1005 $(".shopify-home").click(function () { 1006 location.href = "/home/install"; 1007 }); 1008 1009 1010 $("#btnShareFacebook").click(function () { 1011 var url="https://crazyrocket.io"; 1012 window.open('http://facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url), '', 'left=0,top=0,width=650,height=420,personalbar=0,toolbar=0,scrollbars=0,resizable=0'); 1013 }); 1014 1015 $("#btnShareTwitter").click(function () { 1016 var url="https://crazyrocket.io"; 1017 window.open('http://twitter.com/share?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(window.twitterSharingText), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0'); 1018 }); 1019 1020 $("#btnShareEmail").click(function() { 1021 var url="https://crazyrocket.io"; 1022 1023 var br = "\r\n"; 1024 var txt ="Hi,\r\n\r\nI am just reaching out to let you know about CrazyRocket, a Shopify App to collect more leads and boost sales thanks to pop-up gamification.\r\n\r\nPlease check this link: "+url; 1025 1026 1027 var link = "mailto:" 1028 + "?subject=" + escape("Check this amazing Shopify App") 1029 + "&body=" + escape(txt); 1030 1031 1032 window.location.href = link; 1033 1034 }); 1035 })(jQuery); 1036 1037 }); 1038 1039 </script>
1039 1040 1041 1042
1042<script> 1043 var plans = [ 1044 { name: 'FREE', views: '1,000', monthlyPrice: 0, cta: 'Start for FREE', note: 'Free forever up to 1,000 views', tier: 0 }, 1045 { name: 'START', views: '5,000', monthlyPrice: 9, cta: 'Get Started', note: 'Free for 7 days, cancel anytime', tier: 1 }, 1046 { name: 'GROW', views: '20,000', monthlyPrice: 19, cta: 'Get Started', note: 'Free for 7 days, cancel anytime', tier: 2 }, 1047 { name: 'PREMIUM', views: '60,000', monthlyPrice: 39, cta: 'Get Started', note: 'Most popular for growing stores', tier: 3 }, 1048 { name: 'ENTERPRISE', views: '150,000', monthlyPrice: 79, cta: 'Get Started', note: 'For high-traffic stores', tier: 4 }, 1049 { name: 'UNLIMITED', views: 'Unlimited', monthlyPrice: 149, cta: 'Get Started', note: 'Maximum power, zero limits', tier: 5 } 1050 ]; 1051 1052 var features = [ 1053 { name: 'All Games (Spin Wheel, Scratch Card & more)', minTier: 0 }, 1054 { name: 'Unlimited Campaigns', minTier: 0 }, 1055 { name: 'Exit Intent Trigger', minTier: 0 }, 1056 { name: 'Design Customization', minTier: 0 }, 1057 { name: 'Analytics Dashboard', minTier: 0 }, 1058 { name: 'A/B Testing', minTier: 0 }, 1059 { name: 'Advanced Targeting', minTier: 0 }, 1060 { name: 'reCaptcha Protection', minTier: 0 }, 1061 { name: 'Anti-Cheat Shield', minTier: 0 }, 1062 { name: 'No Branding', minTier: 1, badgeLabel: 'Start+' }, 1063 { name: 'Automatic Unique Coupons', minTier: 2, badgeLabel: 'Grow+' }, 1064 { name: 'Tracking Pixels', minTier: 3, badgeLabel: 'Premium+' }, 1065 { name: 'Embed on Landing Pages', minTier: 3, badgeLabel: 'Premium+' }, 1066 { name: 'Do-for-you Design Customization', minTier: 5, badgeLabel: 'Unlimited' }, 1067 { name: 'White Glove Onboarding', minTier: 5, badgeLabel: 'Unlimited' } 1068 ]; 1069 1070 var currentStep = 3; // default to premium 1071 1072 var tierPerks = { 1073 0: ['Unlimited Campaigns', 'Exit Intent', 'A/B Testing', 'Anti-Cheat'], 1074 1: ['Unlimited Campaigns', 'Exit Intent', 'A/B Testing', 'Anti-Cheat', 'No Branding'], 1075 2: ['No Branding', 'Automatic Unique Coupons'], 1076 3: ['No Branding', 'Automatic Unique Coupons', 'Tracking Pixels', 'Embed on Landing Pages'], 1077 4: ['All Premium Features', '150K Views'], 1078 5: ['All Premium Features', 'Unlimited Views', 'Do-for-you Design Customization', 'White Glove Onboarding'] 1079 }; 1080 var tierNewAt = { 1081 0: [], 1082 1: ['No Branding'], 1083 2: ['Automatic Unique Coupons'], 1084 3: ['Tracking Pixels', 'Embed on Landing Pages'], 1085 4: ['150K Views'], 1086 5: ['Unlimited Views', 'Do-for-you Design Customization', 'White Glove Onboarding'] 1087 }; 1088 1089 var unlockMessages = { 1090 1: '\u2B50 No Branding unlocked!', 1091 2: '\u2B50 Automatic Unique Coupons unlocked!', 1092 3: '\u2B50 Embed on Landing Pages unlocked!', 1093 4: '\uD83D\uDD25 Enterprise \u2022 Perfect for PLUS Brands', 1094 5: '\uD83D\uDE80 Unlimited \u2022 Perfect for PLUS Brands with high traffic' 1095 }; 1096 1097 var slider = document.getElementById('pricingSlider'); 1098 var sliderFill = document.getElementById('sliderFill'); 1099 var planNameEl = document.getElementById('planName'); 1100 var priceAmountEl = document.getElementById('priceAmount'); 1101 var viewsDisplayEl = document.getElementById('viewsDisplay'); 1102 var ctaButton = document.getElementById('ctaButton'); 1103 var trialNote = document.getElementById('trialNote'); 1104 var featuresGrid = document.getElementById('featuresGrid'); 1105 var sliderLabels = document.getElementById('sliderLabels'); 1106 var unlockPillsEl = document.getElementById('unlockPills'); 1107 var unlockToast = document.getElementById('unlockToast'); 1108 var sliderHint = document.getElementById('sliderHint'); 1109 var toastTimer = null; 1110 1111 function hideSliderHint() { 1112 if (sliderHint) sliderHint.classList.add('hidden'); 1113 } 1114 1115 function renderPills(tier) { 1116 unlockPillsEl.innerHTML = ''; 1117 var perks = tierPerks[tier] || []; 1118 var newPerks = tierNewAt[tier] || []; 1119 for (var j = 0; j < perks.length; j++) { 1120 var pill = document.createElement('span'); 1121 var isNew = newPerks.indexOf(perks[j]) !== -1; 1122 pill.className = 'unlock-pill' + (isNew ? ' new-tier' : ''); 1123 pill.textContent = perks[j]; 1124 pill.style.animationDelay = (j * 0.05) + 's'; 1125 unlockPillsEl.appendChild(pill); 1126 } 1127 } 1128 1129 function renderFeatures(tier) { 1130 featuresGrid.innerHTML = ''; 1131 for (var i = 0; i < features.length; i++) { 1132 var f = features[i]; 1133 var included = tier >= f.minTier; 1134 var div = document.createElement('div'); 1135 div.className = 'feature-item'; 1136 1137 var badgeHTML = ''; 1138 if (f.badgeLabel && !included) { 1139 badgeHTML = '<span class="feature-badge premium">' + f.badgeLabel + '</span>'; 1140 } 1141 1142 div.innerHTML = 1143 '<div class="feature-icon ' + (included ? 'included' : 'locked') + '">' + 1144 (included ? '✓' : '🔒') + 1145 '</div>' + 1146 '<span class="feature-name ' + (included ? '' : 'locked') + '">' + f.name + '</span>' + 1147 badgeHTML; 1148 featuresGrid.appendChild(div); 1149 } 1150 } 1151 1152 function showToast(tier) { 1153 var msg = unlockMessages[tier]; 1154 if (!msg) return; 1155 unlockToast.textContent = msg; 1156 unlockToast.classList.add('visible'); 1157 if (toastTimer) clearTimeout(toastTimer); 1158 toastTimer = setTimeout(function () { 1159 unlockToast.classList.remove('visible'); 1160 }, 2500); 1161 } 1162 1163 function updateUI() { 1164 var plan = plans[currentStep]; 1165 var price = plan.monthlyPrice; 1166 var isFree = price === 0; 1167 1168 // Plan name 1169 if (plan.tier === 3) { 1170 planNameEl.innerHTML = plan.name + '<span class="popular-badge">Most Popular</span>'; 1171 } else { 1172 planNameEl.textContent = plan.name; 1173 } 1174 1175 // Price 1176 priceAmountEl.className = 'price-amount' + (isFree ? ' free-plan' : ''); 1177 priceAmountEl.innerHTML = '<span class="currency">$</span>' + price + '<span class="period">/month</span>'; 1178 1179 // Views 1180 viewsDisplayEl.innerHTML = '<strong>' + plan.views + '</strong> <span class="views-label" id="viewsLabel">monthly pop-up views</span>' + 1181 '<div class="views-callout" id="viewsCallout">Every time a visitor sees your pop-up, it counts as one view. Your monthly allowance resets each billing cycle.</div>'; 1182 1183 // CTA 1184 ctaButton.textContent = plan.cta; 1185 ctaButton.className = 'btn-cta' + (isFree ? ' free-cta' : ''); 1186 trialNote.textContent = plan.note; 1187 1188 // Slider fill 1189 var pct = (currentStep / 5) * 100; 1190 sliderFill.style.width = pct + '%'; 1191 1192 // Keep the drag hint centered over the thumb (thumb is 32px wide) 1193 if (sliderHint) { 1194 sliderHint.style.left = 'calc(16px + ' + (currentStep / 5) + ' * (100% - 32px))'; 1195 } 1196 1197 // Labels 1198 var labels = sliderLabels.querySelectorAll('span'); 1199 for (var i = 0; i < labels.length; i++) { 1200 labels[i].className = i === currentStep ? 'active-label' : ''; 1201 } 1202 1203 // Pills & Features 1204 renderPills(plan.tier); 1205 renderFeatures(plan.tier); 1206 } 1207 1208 // Slider event 1209 var prevStep = currentStep; 1210 slider.value = currentStep; 1211 slider.addEventListener('input', function (e) { 1212 hideSliderHint(); 1213 var newStep = parseInt(e.target.value); 1214 if (newStep > prevStep) { 1215 showToast(plans[newStep].tier); 1216 } 1217 prevStep = newStep; 1218 currentStep = newStep; 1219 updateUI(); 1220 }); 1221 1222 // Slider labels click 1223 var labelSpans = sliderLabels.querySelectorAll('span'); 1224 for (var i = 0; i < labelSpans.length; i++) { 1225 (function (index) { 1226 labelSpans[index].addEventListener('click', function () { 1227 hideSliderHint(); 1228 currentStep = index; 1229 slider.value = index; 1230 if (index > prevStep) showToast(plans[index].tier); 1231 prevStep = index; 1232 updateUI(); 1233 }); 1234 })(i); 1235 } 1236 1237 // Views callout toggle 1238 document.addEventListener('click', function (e) { 1239 var label = e.target.closest('.views-label'); 1240 var callout = document.getElementById('viewsCallout'); 1241 if (label && callout) { 1242 callout.classList.toggle('visible'); 1243 } else if (callout && !e.target.closest('.views-callout')) { 1244 callout.classList.remove('visible'); 1245 } 1246 }); 1247 1248 // Init 1249 updateUI(); 1250 </script>
1250 1251 1252 1253</body> 1254</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.