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 <title>Support â ClearCal</title> 7 <meta 8 name="description" 9 content="How to get help with ClearCal, including setup, billing, refunds, and privacy questions." 10 /> 11 <link rel="canonical" href="https://clearcal.io/support.html" /> 12 <meta property="og:type" content="website" /> 13 <meta property="og:site_name" content="ClearCal" /> 14 <meta property="og:title" content="Support - ClearCal" /> 15 <meta 16 property="og:description" 17 content="How to get help with ClearCal setup, billing, refunds, and privacy questions." 18 /> 19 <meta property="og:url" content="https://clearcal.io/support.html" /> 20 <meta property="og:image" content="https://clearcal.io/og-image.svg" /> 21 <meta name="twitter:card" content="summary_large_image" /> 22 <meta name="twitter:title" content="Support - ClearCal" /> 23 <meta 24 name="twitter:description" 25 content="How to get help with ClearCal setup, billing, refunds, and privacy questions." 26 /> 27 <meta name="twitter:image" content="https://clearcal.io/og-image.svg" /> 28 <link rel="icon" type="image/svg+xml" href="./favicon.svg" /> 29 <link rel="preconnect" href="https://fonts.googleapis.com" /> 30 <link 31 href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&display=swap" 32 rel="stylesheet" 33 /> 34
34<script 35 defer 36 data-website-id="dfid_amWjpzvD2AgykeDxK51dS" 37 data-domain="clearcal.io" 38 src="https://datafa.st/js/script.js" 39 ></script>
39 40 <style> 41 *, 42 *::before, 43 *::after { 44 box-sizing: border-box; 45 margin: 0; 46 padding: 0; 47 } 48 49 :root { 50 --bg: #0f0f11; 51 --surface: #18181c; 52 --border: #2a2a30; 53 --text: #e8e6e0; 54 --muted: #6b6872; 55 --accent: #c8b8ff; 56 --success: #4caf7d; 57 --radius: 10px; 58 } 59 60 html { 61 scroll-behavior: smooth; 62 } 63 64 body { 65 background: var(--bg); 66 color: var(--text); 67 font-family: "DM Mono", monospace; 68 font-size: 14px; 69 line-height: 1.75; 70 } 71 72 nav { 73 position: sticky; 74 top: 0; 75 z-index: 100; 76 display: flex; 77 align-items: center; 78 justify-content: space-between; 79 padding: 18px 48px; 80 background: rgba(15, 15, 17, 0.95); 81 backdrop-filter: blur(12px); 82 border-bottom: 1px solid var(--border); 83 } 84 85 .nav-logo { 86 font-family: "Fraunces", serif; 87 font-size: 18px; 88 font-weight: 600; 89 letter-spacing: -0.5px; 90 text-decoration: none; 91 color: var(--text); 92 display: flex; 93 align-items: center; 94 gap: 8px; 95 } 96 97 .nav-dots { 98 display: flex; 99 gap: 4px; 100 } 101 102 .nav-dot { 103 width: 6px; 104 height: 6px; 105 border-radius: 50%; 106 } 107 108 .nav-back { 109 font-size: 11px; 110 color: var(--muted); 111 text-decoration: none; 112 padding: 6px 14px; 113 border: 1px solid var(--border); 114 border-radius: 99px; 115 transition: 116 color 0.15s, 117 border-color 0.15s; 118 } 119 120 .nav-back:hover { 121 color: var(--text); 122 border-color: var(--muted); 123 } 124 125 .page { 126 max-width: 840px; 127 margin: 0 auto; 128 padding: 80px 48px 120px; 129 } 130 131 @media (max-width: 640px) { 132 nav { 133 padding: 16px 24px; 134 } 135 136 .page { 137 padding: 48px 24px 80px; 138 } 139 } 140 141 .page-eyebrow { 142 font-size: 10px; 143 text-transform: uppercase; 144 letter-spacing: 0.2em; 145 color: var(--accent); 146 margin-bottom: 16px; 147 } 148 149 .page-title { 150 font-family: "Fraunces", serif; 151 font-size: clamp(36px, 6vw, 52px); 152 font-weight: 600; 153 letter-spacing: -1px; 154 line-height: 1.05; 155 margin-bottom: 12px; 156 } 157 158 .page-meta { 159 font-size: 11px; 160 color: var(--muted); 161 margin-bottom: 56px; 162 padding-bottom: 32px; 163 border-bottom: 1px solid var(--border); 164 } 165 166 h2 { 167 font-family: "Fraunces", serif; 168 font-size: 22px; 169 font-weight: 600; 170 letter-spacing: -0.3px; 171 color: var(--text); 172 margin-top: 48px; 173 margin-bottom: 12px; 174 } 175 176 p { 177 color: var(--muted); 178 margin-bottom: 16px; 179 } 180 181 p strong { 182 color: var(--text); 183 font-weight: 500; 184 } 185 186 a { 187 color: var(--accent); 188 text-decoration: none; 189 } 190 191 a:hover { 192 text-decoration: underline; 193 } 194 195 ul { 196 list-style: none; 197 margin-bottom: 16px; 198 } 199 200 ul li { 201 color: var(--muted); 202 padding: 6px 0 6px 18px; 203 position: relative; 204 border-bottom: 1px solid var(--border); 205 } 206 207 ul li:last-child { 208 border-bottom: none; 209 } 210 211 ul li::before { 212 content: "â"; 213 position: absolute; 214 left: 0; 215 color: var(--accent); 216 font-size: 11px; 217 } 218 219 ul li strong { 220 color: var(--text); 221 font-weight: 500; 222 } 223 224 .highlight-box { 225 background: rgba(200, 184, 255, 0.06); 226 border: 1px solid rgba(200, 184, 255, 0.15); 227 border-radius: var(--radius); 228 padding: 20px 24px; 229 margin: 24px 0; 230 } 231 232 .highlight-box p { 233 margin-bottom: 0; 234 } 235 236 .support-grid { 237 display: grid; 238 grid-template-columns: repeat(3, minmax(0, 1fr)); 239 gap: 16px; 240 margin: 24px 0 8px; 241 } 242 243 .support-card { 244 background: var(--surface); 245 border: 1px solid var(--border); 246 border-radius: var(--radius); 247 padding: 20px; 248 } 249 250 .support-kicker { 251 font-size: 9px; 252 text-transform: uppercase; 253 letter-spacing: 0.12em; 254 color: var(--success); 255 margin-bottom: 10px; 256 } 257 258 .support-card h3 { 259 font-family: "Fraunces", serif; 260 font-size: 18px; 261 font-weight: 600; 262 letter-spacing: -0.2px; 263 margin-bottom: 8px; 264 } 265 266 .support-card p { 267 font-size: 11px; 268 margin-bottom: 0; 269 } 270 271 .contact-card { 272 background: var(--surface); 273 border: 1px solid var(--border); 274 border-radius: var(--radius); 275 padding: 24px; 276 margin-top: 16px; 277 } 278 279 .contact-actions { 280 display: flex; 281 flex-wrap: wrap; 282 gap: 10px; 283 margin-bottom: 18px; 284 } 285 286 .contact-button { 287 display: inline-flex; 288 align-items: center; 289 justify-content: center; 290 padding: 10px 16px; 291 border-radius: 99px; 292 border: 1px solid var(--border); 293 background: var(--bg); 294 color: var(--text); 295 font-size: 11px; 296 text-decoration: none; 297 transition: 298 border-color 0.15s, 299 transform 0.15s; 300 } 301 302 .contact-button:hover { 303 text-decoration: none; 304 border-color: var(--muted); 305 transform: translateY(-1px); 306 } 307 308 .contact-button.primary { 309 background: var(--accent); 310 border-color: transparent; 311 color: var(--bg); 312 } 313 314 .contact-button.primary:hover { 315 border-color: transparent; 316 } 317 318 .note { 319 font-size: 11px; 320 color: var(--muted); 321 } 322 323 footer { 324 border-top: 1px solid var(--border); 325 padding: 24px 48px; 326 display: flex; 327 align-items: center; 328 justify-content: space-between; 329 flex-wrap: wrap; 330 gap: 12px; 331 } 332 333 footer p { 334 font-size: 10px; 335 color: var(--muted); 336 } 337 338 footer a { 339 color: var(--muted); 340 text-decoration: none; 341 } 342 343 footer a:hover { 344 color: var(--text); 345 } 346 347 @media (max-width: 760px) { 348 .support-grid { 349 grid-template-columns: 1fr; 350 } 351 } 352 353 @media (max-width: 640px) { 354 footer { 355 padding: 20px 24px; 356 } 357 358 .contact-card { 359 padding: 20px; 360 } 361 362 .contact-actions { 363 flex-direction: column; 364 } 365 366 .contact-button { 367 width: 100%; 368 } 369 } 370 </style> 371 </head> 372 <body> 373 <nav> 374 <a class="nav-logo" href="./index.html"> 375 <div class="nav-dots"> 376 <div class="nav-dot" style="background: #d50000"></div> 377 <div class="nav-dot" style="background: #0b8043"></div> 378 <div class="nav-dot" style="background: #039be5"></div> 379 </div> 380 ClearCal 381 </a> 382 <a class="nav-back" href="./index.html">â Back to home</a> 383 </nav> 384 385 <main class="page"> 386 <p class="page-eyebrow">Support</p> 387 <h1 class="page-title">Need help with ClearCal?</h1> 388 <p class="page-meta"> 389 Last updated: April 2026 · Setup, billing, refunds, and privacy help 390 </p> 391 392 <div class="highlight-box"> 393 <p> 394 <strong>The fastest route:</strong> most issues fall into one of three buckets 395 â setup, billing, or permissions. Start there first, then contact us if 396 you still need help. 397 </p> 398 </div> 399 400 <h2>1. Start with the right path</h2> 401 <div class="support-grid"> 402 <div class="support-card"> 403 <div class="support-kicker">Setup</div> 404 <h3>Getting started</h3> 405 <p> 406 Install ClearCal in Chrome, click Connect, and sign in with Google. 407 ClearCal runs in the Chrome extension and updates your Google Calendar 408 colours directly. 409 </p> 410 </div> 411 <div class="support-card"> 412 <div class="support-kicker">Billing</div> 413 <h3>Subscriptions</h3> 414 <p> 415 To cancel or manage a Pro subscription, open the ClearCal extension 416 popup and click Manage billing. Lifetime is a one-off purchase with 417 no recurring billing. 418 </p> 419 </div> 420 <div class="support-card"> 421 <div class="support-kicker">Privacy</div> 422 <h3>Permissions & access</h3> 423 <p> 424 ClearCal processes calendar data in your browser. If you want to remove 425 access, disconnect it in the extension or remove it from your Google 426 Account permissions. 427 </p> 428 </div> 429 </div> 430 431 <h2>2. Common help topics</h2> 432 <ul> 433 <li> 434 <strong>Colours not showing where you expect</strong> â ClearCal writes 435 colours back to the Google Calendar event itself, so once applied they 436 should appear anywhere that syncs with Google Calendar. 437 </li> 438 <li> 439 <strong>You want to stop using ClearCal</strong> â disconnect the 440 extension, or remove access from your 441 <a href="https://myaccount.google.com/permissions" target="_blank" 442 >Google Account permissions</a 443 >. 444 </li> 445 <li> 446 <strong>You need to cancel Pro</strong> â open the extension and use 447 <strong>Manage billing</strong>. Lifetime does not renew, so there is 448 no subscription to cancel. 449 </li> 450 <li> 451 <strong>You need a refund</strong> â contact support with your order 452 details and a short description of the issue. 453 </li> 454 <li> 455 <strong>You have a privacy question</strong> â use the privacy contact 456 route below for data rights or policy questions. 457 </li> 458 </ul> 459 460 <h2>3. Contact support</h2> 461 <p>
462 If the steps above do not solve it, send a support request with enough 463 detail for us to reproduce the issue quickly. 464 </p> 465 466 <div class="contact-card"> 467 <div class="contact-actions"> 468 <a 469 class="contact-button primary" 470 id="support-email-link" 471 href="#" 472 rel="nofollow" 473 >Email support</a 474 > 475 <a 476 class="contact-button" 477 id="privacy-email-link" 478 href="#" 479 rel="nofollow" 480 >Privacy requests</a 481 > 482 </div> 483 484 <ul> 485 <li><strong>What happened</strong> â one or two sentences is enough.</li> 486 <li> 487 <strong>What plan you are on</strong> â Free, Pro, or Lifetime. 488 </li> 489 <li> 490 <strong>Which Google account is affected</strong> â the email address 491 tied to the issue. 492 </li> 493 <li> 494 <strong>Anything that helps us reproduce it</strong> â screenshots, 495 exact steps, or what you expected to happen instead. 496 </li> 497 </ul> 498 499 <p class="note"> 500 Billing and refund requests are typically answered within 2 business 501 days. 502 </p> 503 </div> 504 505 <h2>4. Legal and privacy contacts</h2> 506 <p> 507 For service terms, billing policies, and refund rules, see the 508 <a href="./terms.html">Terms of Service</a>. For data handling, retention, 509 and your rights, see the <a href="./privacy.html">Privacy Policy</a>. 510 </p> 511 </main> 512 513 <footer> 514 <div 515 style=" 516 display: flex; 517 align-items: center; 518 gap: 8px; 519 font-family: "Fraunces", serif; 520 font-size: 15px; 521 font-weight: 600; 522 color: var(--text); 523 " 524 > 525 <div style="display: flex; gap: 4px"> 526 <div 527 style=" 528 width: 6px; 529 height: 6px; 530 border-radius: 50%; 531 background: #d50000; 532 " 533 ></div> 534 <div 535 style=" 536 width: 6px; 537 height: 6px; 538 border-radius: 50%; 539 background: #0b8043; 540 " 541 ></div> 542 <div 543 style=" 544 width: 6px; 545 height: 6px; 546 border-radius: 50%; 547 background: #039be5; 548 " 549 ></div> 550 </div> 551 ClearCal 552 </div> 553 <p> 554 <a href="./privacy.html">Privacy Policy</a> · 555 <a href="./terms.html">Terms of Service</a> · 556 <a href="./support.html">Support</a> 557 </p> 558 </footer> 559 560
560<script> 561 const supportEmail = ["hello", "clearcal.io"]; 562 const privacyEmail = ["privacy", "clearcal.io"]; 563 564 const supportLink = document.getElementById("support-email-link"); 565 const privacyLink = document.getElementById("privacy-email-link"); 566 567 supportLink.href = `mailto:${supportEmail[0]}@${supportEmail[1]}`; 568 privacyLink.href = `mailto:${privacyEmail[0]}@${privacyEmail[1]}`; 569 </script>
569 570
570<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":"800e9f732e5947598b85c3ff88405695","r":1,"spa":2}' crossorigin="anonymous"></script>
570 571</body> 572</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.