Live Components

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?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Countdown / ... and unlink it (right click and Unlink Instance).
2. 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:

1. Card / Coundown 1
2. Card / Coundown 2
3. Alert / Countdown Banner

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?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Cookie Notification and unlink it (right click and Unlink Instance).
2. Modify the looks (if you want) of the Live Component, add link to your Cookie Policy etc.
3. Optionally, change the attribute data-sysflow-cookie from 0 to the URL capturing the webhook with user data (for example Zapier or Integromat)

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?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Confetti and unlink it (right click and Unlink Instance).
2. In the component settings set up accordingly to what you want to accomplish:
   ‍
   Start Confetti automatically when user enters the page:
   - select LC / Confetti Component that you've unlinked and in it's Settings tab, change the attribute data-sysflow-confetti-autoload from 0 to the desired time of animation in seconds
   - you can remove OR leave readymade buttons to start and stop the animation
   
   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.
   

Text Replace

Requires: SystemFlow 1.2+

This simple Component will let you replace any text on your page with the one provided in the query string. It comes in handy when you want to address specific group of people, who visit your site (for example you run a promotion with your partner, launch on Product Hunt etc.) or run a paid campaign where you can add UTMs and drive better conversions with addressing people by their interest, name etc.

⚠️ Please note, that entire container will be hidden until you pass the parameter (even without value) in the url.

ℹ️ If you want to show default text so that the component will be visible even without passing the param, please use data-sysflow-query-default and set its value to anything else than 0. The value will be displayed by default.

How to use it?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Text Replace and unlink it (right click and Unlink Instance).
2. Optionally, change the attribute data-sysflow-query value rep to the name of the parameter name you want to use
3. Optionally, change the attribute data-sysflow-query-default to whatever text you want to display by default. In this case, the component will be visible even without passing any param.
4. Adjust the component to your needs, remember, any span with an attribute data-sysflow-query-text with value 1 will be replace to whatever you put in the query string
5. After publishing, add the query string to the end of your address, for example ?rep=hello%20systemflow
6. Optionally, you can use multiple instances of this component or create multiple containers with attribute data-sysflow-query set. Remember to use different values such as rep, rep2, rep3 and while using multiple query strings, separate them with &. An example would be ?rep=hello%20systemflow&rep2=heyhey&rep3=greg

Form Memory

Requires: SystemFlow 1.2+

This component lets you save the user form input to Local Storage. Imagine you have a long form that users have to fill in and they reload the page by mistake, or you redirect them to different pages in the meantime on purpose. When user gets back to the form, all the data are automatically filled in and remembered.

⚠️ Store uses data-sysflow-store attribute applied to the form container. It means you can add new fields an manipulate id's and input names and they'll still be recalled when page refreshes

How to use it?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Form Memory and unlink it (Right click and Unlink Instance).
2. That's it! Form fields will be automatically saved to local storage and stay filled even after user closes the browser or refreshes the page

Form Hidden Field

Requires: SystemFlow 1.2+

This component lets you send additional information with the form that is filled in by your users. Imagine, you want to get the information about the partner, that sent the user via referral. When user fills in the registration form, together with the input data you will receive the name of the partner. You accomplish that with the query string, meaning, you can dynamically pass different information to the form depending on the source or campaign.

⚠️ Please note, that you can use only one hidden field per form. If you want to pass more data, you might consider Form prefill live component

How to use it?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Form Hidden Field and unlink it (right click and Unlink Instance).
2. Optionally, change the attribute data-sysflow-query-form value on the form element from ref to the parameter name you want to use
3. After publishing, add the query string to the end of your address, for example ?ref=partner and this value will be sent together with all the form data

Form prefill

Requires: SystemFlow 1.2+

Sometimes you want to pre-fill form data with some information. This might help the users so that they don't have to type in the information that you already know (eg. their name when you redirect from an email) or pass the information that they might not know or are hard to find (eg. partner name or invoice number).

⚠️ Please note, that this information will be visible to users as input fields. If you want to hide information from user, consider Form hidden field component

How to use it?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Form Prefill and unlink it (right click and Unlink Instance).
2. Use the field ID's to create parameter names that you will use in url to prefill the form

Example: use ?name=Adam at the end of the address to pre-fill the Name input in the form (name comes from the field ID)

Countup

Requires: SystemFlow 1.2+

This simple component will automatically animate the numbers counting up to the value entered in the text box. The countup will be activated once scrolled in view.

How to use it?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Countup and unlink it (right click and Unlink Instance).
2. Optionally, change the attribute data-sysflow-countup value on the wrapper element the n
3. Optionally, change the attribute data-sysflow-countup-duration value on the text element  the animation duration in miliseconds

Age Verification

Requires: SystemFlow 1.3+

This component will let you verify the visitor's age before entering the page. Once verified, the data is stored in Local Storage and never shows up again. You can change the age required to enter as well as modify the fields - only the year field is mandatory. If the requirements are not met, there's an error message popping up, if the conditions are met - popup disappears.
‍
⚠️ Important! In order to edit this component, change the opacity on the main container as it is set to 0 for animation purposes!

How to use it?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Age verification and unlink it (right click and Unlink Instance)
2. Optionally, change the attribute data-sysflow-age value on the main container to the desired age (it's 18 by default)
3. Optionally, remove day and month fields and labels. The only necessary input is year. Remember that the main component has opacity set to 0, so change it temporarily in order to make those modifications

Multiple Select

Requires: SystemFlow 1.3+

This component allows you for placing multiple select options as tags in the select field. You can use it for example to filter out card results as shown in the Cards Filter component.

How to use it?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Multiple Select and unlink it (right click and Unlink Instance).
2. Determine the select options inside the Form -> Multiple element in the Settings

Cards Search

Requires: SystemFlow 1.3+

This simple component will automatically search within the Cards and highlight search phrases.

How to use it?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Cards Search and unlink it (right click and Unlink Instance). The only requirement for this component is to be nested within the .container where the cards are.

LC / Cards Search

search

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Vegetable

Potato

The potato is a starchy tuber of the plant Solanum tuberosum and is a root vegetable native to the Americas, with the plant itself being a perennial in the nightshade family Solanaceae.

Fruit

Banana

A banana is an elongated, edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants.

Vegetable

Cucumber

Cucumber (Cucumis sativus) is a widely-cultivated creeping vine plant in the Cucurbitaceae gourd family that bears usually cylindrical fruits, which are used as vegetables.

Cards Filter

Requires: SystemFlow 1.3+

Thanks to this component, you can filter out the cards by their tagline by default, however, you can change it to filter by different class content. You can use this filter component together with card search. This component is similar to Multiple Select but it will populate the options automatically by the class content of your choice.

How to use it?

1. Place the Component from Quick Search (Cmd + E) - search for LC / Cards Filter and unlink it (right click and Unlink Instance).
2. Optionally, change the attribute data-sysflow-cards-filter value on the wrapper element so that it reflects the class inside of .card that you'd like to search in instead of the tagline, eg. .card .heading

LC / Cards Filter

Tag

close

Tag

close

Filter cards by taglines

expand_more

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Vegetable

Potato

The potato is a starchy tuber of the plant Solanum tuberosum and is a root vegetable native to the Americas, with the plant itself being a perennial in the nightshade family Solanaceae.

Fruit

Banana

A banana is an elongated, edible fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants.

Vegetable

Cucumber

Cucumber (Cucumis sativus) is a widely-cultivated creeping vine plant in the Cucurbitaceae gourd family that bears usually cylindrical fruits, which are used as vegetables.