Creating a Countdown

Here we will learn how to create a countdown for our event, and send users to a login page when the countdown ends.

Adding Countdown module to Layout editor

Starting with our Home page in the layout editor.

Lets add a "Stacked Layout" module to the page, and set it's orientation to vertical. We want it to fill the available space so we'll give it a height of 100%.

Now lets drag a Countdown module into the stacked layout module.

In the Properties Panel, lets set our event "Target Time" to start at 4pm today.

Clicking the "Preview Page" button will allow us to see our countdown.

Creating a Login Page to send your Users

In the side bar on the top left of the layout editor, click the pages button

Click the Add page button and in the Modal that appears, we want to copy the countdown page we already built so we will enter "/" in the "copy an existing page" field. This will copy the contents of the home page because we set it's path to "/" when we created it.

In the Side Panel, click the login page to open it. At the top of the layout editor you will see the name of your site and the page you are editing.

Next lets delete the countdown module from this page. Select the module and click on the delete key, which prompts the presentation of a modal for confirmation.

After deleting the countdown, drag in an Access Code module into its Stacked Layout. In the Properties panel lets

1. Name the title "Welcome to Backstage"

2. Change the button label to "Go"

3. Make the button color Orange

4. Make the button text white

Setting up Logic in Flow Editor

Lets set up some logic for when the countdown ends and get redirected to the login page.

In the side bar, click the flow editor button. This will open the flow editor in a new tab were we can add logic and behavior to our custom experience.

Here we can wire up nodes shown on the left to create flows. Lets create a flow to send our users to our login page when the countdown ends.

Go to Countdown clock and drag out the broadcaster node "Countdown:On-Complete". Broadcaster nodes will trigger when an event occurs. In this case when the countdown completes.

Next we'll scroll down to "Global" and grab a listener node "Router:goto". A listener node when triggered will preform an action. In this case sending the user to a new page.

To connect the two nodes, drag from the instruction dot of the broadcaster node to the path dot of the listener node.

Next we need to define a path we want to send the user too. Enter "/login" in the path field and leave a " * " in the about field because it is a global action.

If we were to leave the "about" field in the broadcaster empty, it would trigger when any countdown on our site ends.

How to make the broadcaster trigger only when a specific countdown completes

Lets go back to our "Home page" where we created the countdown. Select the countdown module in layout editor. Just above the properties panel, click the "Copy Module ID" button.

Now you just have to paste that value into the broadcaster "about" field and click the save button.

If we preview the site and watch the countdown end, we will see that we are redirected to the login page.