Live Components

Live components are Webflow symbols - pieces of essential code that will manage things like counters and other common web design elements. We've made components interactive and as easy to use as any other components.

Countdown

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
LC / Countdown / Inline
0
days
0
h
0
m
0
s
LC / Countdown / Big
0
Days
0
Hours
0
Minutes
0
Seconds

Show & Hide on date

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?

  1. Place the Component from Quick Search (Cmd + E) - search for LC / Show Hide Wrapper and unlink it (right click and Unlink Instance).
  2. Drop the elements you want to hide inside the Show Hide Div.
  3. 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.
  4. 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.
LC / Show Hide Wrapper

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
LC / form memory
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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
LC / form hidden field
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

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)

LC / form prefill
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
arrow_upward