Countdown Component

Features multiple steps with validation.
Copy this <script> to your <head>or <body> of your page to make this work
<!-- [Attributes by Flowscriipt] Custom Toast Notificaiton -->
<script src="https://cdn.jsdelivr.net/gh/manuelogomigo/flowscriipt@main/custom-toast-notification/script.js"></script>

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"da4cf79e-c394-c0bc-422c-0d4fb5b7336f","type":"Block","tag":"div","classes":["4668c7f6-e1b0-8040-d589-b6b9af2ad564"],"children":["c9765881-272a-f9ce-762c-d97597e64cf6","e98c3021-1067-bf18-45bd-3c00944fd970","079311b5-b568-8e61-e7a2-9e62037ba1ee"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-countdown-wrapper","value":""},{"name":"ct-countdown-date","value":"31-12-2023"},{"name":"ct-countdown-time","value":"12:00am"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"c9765881-272a-f9ce-762c-d97597e64cf6","type":"Block","tag":"div","classes":["1a288e7d-1efb-ba93-923d-104ce2d955c6"],"children":["bbe43296-2d74-5452-2903-94086b37fc50","540bb900-a539-03fb-041d-1e03d70fe42f","1fca2729-2a53-208c-eaa2-1d022faf0955","224a8d4f-d3df-8756-61b2-a28ecc7d0370"],"data":{"tag":"div","text":false}},{"_id":"bbe43296-2d74-5452-2903-94086b37fc50","type":"Block","tag":"div","classes":["94ff9e4d-2fdb-fe87-2bd4-209117899b12"],"children":["84bab9e0-3373-9015-b01e-ee08c90ea249","d5c632fd-f337-e4dd-78e5-292dab6fb686"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"84bab9e0-3373-9015-b01e-ee08c90ea249","type":"Heading","tag":"h1","classes":[],"children":["84bab9e0-3373-9015-b01e-ee08c90ea24a"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-countdown-day","value":""}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"84bab9e0-3373-9015-b01e-ee08c90ea24a","text":true,"v":"00"},{"_id":"d5c632fd-f337-e4dd-78e5-292dab6fb686","type":"Block","tag":"div","classes":[],"children":["d5c632fd-f337-e4dd-78e5-292dab6fb687"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"d5c632fd-f337-e4dd-78e5-292dab6fb687","text":true,"v":"Days"},{"_id":"540bb900-a539-03fb-041d-1e03d70fe42f","type":"Block","tag":"div","classes":["94ff9e4d-2fdb-fe87-2bd4-209117899b12"],"children":["e8aca7e7-9986-4741-f31d-abadd9f6ec07","5a288808-25f4-d545-85b5-2effe71ea654"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e8aca7e7-9986-4741-f31d-abadd9f6ec07","type":"Heading","tag":"h1","classes":[],"children":["e8aca7e7-9986-4741-f31d-abadd9f6ec08"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-countdown-hour","value":""}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"e8aca7e7-9986-4741-f31d-abadd9f6ec08","text":true,"v":"00"},{"_id":"5a288808-25f4-d545-85b5-2effe71ea654","type":"Block","tag":"div","classes":[],"children":["5a288808-25f4-d545-85b5-2effe71ea655"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5a288808-25f4-d545-85b5-2effe71ea655","text":true,"v":"Hours"},{"_id":"1fca2729-2a53-208c-eaa2-1d022faf0955","type":"Block","tag":"div","classes":["94ff9e4d-2fdb-fe87-2bd4-209117899b12"],"children":["0fcdbd88-76bb-b5d0-e84e-a1579d79fde3","b2094ab5-1a17-3d3d-6731-82da2d5eb51f"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0fcdbd88-76bb-b5d0-e84e-a1579d79fde3","type":"Heading","tag":"h1","classes":[],"children":["0fcdbd88-76bb-b5d0-e84e-a1579d79fde4"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-countdown-minutes","value":""}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"0fcdbd88-76bb-b5d0-e84e-a1579d79fde4","text":true,"v":"00"},{"_id":"b2094ab5-1a17-3d3d-6731-82da2d5eb51f","type":"Block","tag":"div","classes":[],"children":["b2094ab5-1a17-3d3d-6731-82da2d5eb520"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b2094ab5-1a17-3d3d-6731-82da2d5eb520","text":true,"v":"Minutes"},{"_id":"224a8d4f-d3df-8756-61b2-a28ecc7d0370","type":"Block","tag":"div","classes":["94ff9e4d-2fdb-fe87-2bd4-209117899b12"],"children":["5c1ca0cd-9e6a-7289-28c3-6091aef1326e","8f22b988-1b3e-e139-1821-b7215dd4e170"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5c1ca0cd-9e6a-7289-28c3-6091aef1326e","type":"Heading","tag":"h1","classes":[],"children":["5c1ca0cd-9e6a-7289-28c3-6091aef1326f"],"data":{"search":{"exclude":false},"xattr":[{"name":"ct-countdown-seconds","value":""}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"5c1ca0cd-9e6a-7289-28c3-6091aef1326f","text":true,"v":"00"},{"_id":"8f22b988-1b3e-e139-1821-b7215dd4e170","type":"Block","tag":"div","classes":[],"children":["8f22b988-1b3e-e139-1821-b7215dd4e171"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"8f22b988-1b3e-e139-1821-b7215dd4e171","text":true,"v":"Seconds"},{"_id":"e98c3021-1067-bf18-45bd-3c00944fd970","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<!-- [Attributes by Flowscriipt] Countdown Timer -->\n<script src=\"https://cdn.jsdelivr.net/gh/manuelogomigo/flowscriipt/countdown-timer/script.js\"></script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<!-- [Attributes by Flowscriipt] Countdown Timer -->\n<script src=\"https://cdn.jsdelivr.net/gh/manuelogomigo/flowscriipt/countdown-timer/script.js\"></script>","div":false,"iframe":false,"script":true}},"insideRTE":false}},{"_id":"079311b5-b568-8e61-e7a2-9e62037ba1ee","type":"Block","tag":"div","classes":["cb66b330-f923-23d0-7bd2-59d33b83ca95"],"children":["079311b5-b568-8e61-e7a2-9e62037ba1ef","079311b5-b568-8e61-e7a2-9e62037ba1f0","079311b5-b568-8e61-e7a2-9e62037ba1f2","079311b5-b568-8e61-e7a2-9e62037ba1f3","079311b5-b568-8e61-e7a2-9e62037ba1f5"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"079311b5-b568-8e61-e7a2-9e62037ba1ef","text":true,"v":"This component will only work"},{"_id":"079311b5-b568-8e61-e7a2-9e62037ba1f0","type":"Strong","tag":"strong","classes":[],"children":["079311b5-b568-8e61-e7a2-9e62037ba1f1"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"079311b5-b568-8e61-e7a2-9e62037ba1f1","text":true,"v":" "},{"_id":"079311b5-b568-8e61-e7a2-9e62037ba1f2","text":true,"v":"on the published/exported site. Full documentation in Flowscriipt "},{"_id":"079311b5-b568-8e61-e7a2-9e62037ba1f3","type":"Link","tag":"a","classes":[],"children":["079311b5-b568-8e61-e7a2-9e62037ba1f4"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"target":"_blank","href":"http://finsweet.com/","id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"https://www.flowscriipt.com/library/countdown-timer","target":"_blank"}}},{"_id":"079311b5-b568-8e61-e7a2-9e62037ba1f4","text":true,"v":"Library docs"},{"_id":"079311b5-b568-8e61-e7a2-9e62037ba1f5","text":true,"v":"."}],"styles":[{"_id":"4668c7f6-e1b0-8040-d589-b6b9af2ad564","fake":false,"type":"class","name":"countdown-element","namespace":"","comb":"","styleLess":"display: flex; margin-right: auto; margin-left: auto; flex-direction: column; align-items: center; grid-column-gap: 1rem; grid-row-gap: 2rem;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"1a288e7d-1efb-ba93-923d-104ce2d955c6","fake":false,"type":"class","name":"countdown-item-wrapper","namespace":"","comb":"","styleLess":"display: flex; margin-right: auto; margin-left: auto; align-items: center; grid-column-gap: 2rem;","variants":{"tiny":{"styleLess":"width: 100%; flex-direction: column; grid-row-gap: 1rem;"}},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"94ff9e4d-2fdb-fe87-2bd4-209117899b12","fake":false,"type":"class","name":"countdown-item","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; justify-content: center; align-items: center; grid-column-gap: 0.5rem; grid-row-gap: 0.5rem;","variants":{},"children":[],"createdBy":"61f476eebc83e27188ab6890","selector":null},{"_id":"cb66b330-f923-23d0-7bd2-59d33b83ca95","fake":false,"type":"class","name":"component_message","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 60.78%, 1.00);","variants":{},"children":[],"pluginType":"63697dee8fb80f61a6cf68e2","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}

Similar Components

Onboarding 2 - Multiforms
Multi-forms
Feedback Widget 2
Multi-forms
Input Stepper (Increase & Decrease)
Multi-forms
View all Components
Beta Testing

Get Flowscriipt Pro

Free
$0
What you'll get:
Access to Only Free Libraries
Community Support
Access to ChatGPT Prompts for webflow
Webflow Components
Lifetime Access & Updates
Access to all Pro Libraries
Sign up
No Credit Card Required
Monthly Plan
$17
$37
What you'll get:
Access to all Pro Libraries
Lifetime Access & Updates
Private Support
Access to ChatGPT Prompts for webflow
Webflow Components
Cancel Anytime
Lifetime deal
$97
$127
What you'll get:
Access to all Pro Libraries
Lifetime Access & Updates
Private Support
Access to ChatGPT Prompts for webflow
Webflow and HTML Components
Discounts on Flowscriip Products
Popular
$70 off till Nov 31st
Affiliate - 35% Commission
Join Flowscriipt Affiliate Campaign and get 35% commission sharing flowscriipt to your clients - Paid Orders
Become an Affiliate

Frequently asked Questions

Hosting outside webflow, can I still use it?

Yes, as long as you add the attributes in the docs to your html attributes it will work just as webflow.

Can I get a refund?

Yes! You can request a refund within 7 days of your purchase. Reach out on Twitter or by email at manuel@flowscriipt.com

If I purchase just one Pro Library, do I have access to the rest?

If you purchase just one pro library eg, Flowscriipt Forms you'd only have access to the multiform library.

Do you provide support?

Absolutely, I'd love to hear any feedback or question you might have. Just reach out to me on my twitter or email — don't hesitate!

Do I get updates if I purchase lifetime?

Yeah sure, you have access to new updates and new library if you purchase the lifetime deal.

Is Flowscriipt Free?

Yeah there are free libraries to add functionalities to your Webflow site, and take it to the next level with the pro library.

Is any coding knowledge required?

Absolutely none! But two things are needed though COPY & PASTE :)