Countdown
Requires: SystemFlow 1.1+
This is simple countdown that will count towards a future date. You can use it for expiring promotion, live event countdown, starting new websites and more. We've also embedded counter into some components that you can use straight away. After the counter reaches 00:00 it will be automatically hidden. If you want to hide more elements altogether, you can combine the countdown with our Show & Hide on date live component.
How to use it?
- Place the Component from Quick Search (Cmd + E) - search for LC / Countdown / ... and unlink it (right click and Unlink Instance).
- Select the LC / Countdown Component that you've unlinked and in it's Settings tab, change the date in data-sysflow-counter parameter. The date format is as follows: YYYY-MM-DDTHH:MM:SS+00:00 . Where +00:00 is the reference to GMT timezone. We use 24 hour format. For example: 2021-01-01T18:15:00+01:00 equals 6:15PM in GMT+1 on Jan 1st 2021.
Countdown is also used in readymade components:
- Card / Coundown 1
- Card / Coundown 2
- Alert / Countdown Banner
Show & Hide on date
Requires: SystemFlow 1.1+
With this Live Component, you can show or hide whatever element you want, depending on future date. Everything within this components main container will be shown or hidden automatically when the server clock hits the defined date. Please note, that this will take effect after the page reloads - user will have to refresh it in order for script to work. This way you can for example hide the promotion notification on your landing page, once it expires. Combine it with Countdown Live Component for even better effect.
How to use it?
- Place the Component from Quick Search (Cmd + E) - search for LC / Show Hide Wrapper and unlink it (right click and Unlink Instance).
- Drop the elements you want to hide inside the Show Hide Div.
- Edit the attributes: data-sysflow-temporal , data-sysflow-temporal-start , data-sysflow-temporal-end .
Where +00:00 is the reference to GMT timezone. We use 24 hour format. For example: 2021-01-01T18:15:00+01:00 equals 6:15PM in GMT+1 on Jan 1st 2021. Start and end attributes are optional. You can skip them if you don't need start or end date. - Optional: If you want to hide any object without using the LC / Show Hide Wrapper just add the following attributes in it's settings:
data-sysflow-temporal = 0
data-sysflow-temporal-start = 2020-12-17T19:30:00+01:00
data-sysflow-temporal-end = 2020-12-27T09:00:00+01:00
Start and end attributes are optional. You can skip them if you don't need start or end date.
Cookie Notification
Requires: SystemFlow 1.1+
This Live Component lets you add obligatory Cookie Notification to your page. Once the user clicks on a button, entire Live Component is being hidden. Also, it adds the appropriate information to users browser (local storage, to be precise) not to show this component ever again. In addition, you can send some data of the user, including IP, to the specified webhook (optional) and use automation to save this information in e.g. Airtable.
How to use it?
- Place the Component from Quick Search (Cmd + E) - search for LC / Cookie Notification and unlink it (right click and Unlink Instance).
- Modify the looks (if you want) of the Live Component, add link to your Cookie Policy etc.
- Optionally, change the attribute data-sysflow-cookie from 0 to the URL capturing the webhook with user data (for example Zapier or Integromat)
LC / Cookie Notification
We use cookies to improve your experience and deliver personalized content. By using our website, you agree to our
Cookie Policy.
Got it
Confetti Popper
Requires: SystemFlow 1.1+
Celebrate it! Use our Confetti live component when user reaches the end of your conversion funnel or at any other occasion. Confetti Popper has two modes - you can either 1) start in when user enters the page, for a set number of seconds or 2) Use start and stop buttons to launch the confetti on user action - for example, when he clicks "Subscribe" on your email list page, then he sees a pop-up with a form, and when he closes the pop-up with X button, confetti stops.
How to use it?
- Place the Component from Quick Search (Cmd + E) - search for LC / Confetti and unlink it (right click and Unlink Instance).
- In the component settings set up accordingly to what you want to accomplish:
Start Confetti automatically when user enters the page:
- modify the Embed Code in 'Confetti Script' by changing the value of AUTOLOAD const to true
- set up how long it should last by changing the value of DURATION const to the desired time - in seconds.
Confetti started and stopped with user action:
- use readymade buttons to start and stop the animation. Style them as you like!
Confetti started with user action and stopped after a time period:
- use readymade start button and add one additional attribute to the settings: data-sysflow-confetti-start. As the value for this attribute, provide time in seconds. After this time, confetti will end.