[V6] Create Automated Interactions Using Flow Action

Access Flow Action

Flow Action is the last section in the Design tab. Like the rest of the Design options, Flow Action is supported for all elements and you can create an even at any time in the Editor.

All configurations

Here are the detailed steps to set up a flow action event:

Step 1: Go to the GemPages Dashboard, select one of your existing pages and enter the Editor, or simply create a new page.

Step 2: Select an element to start configuring its event and access Flow Action under the Design tab.

Step 3: Select an event

Hit “+” to add a new event: There are two types of events: Device input event, and Page event.

Device input event:

• Mouse Click: Trigger on mouse click
• Mouse Enter: Trigger when the cursor enters the element
• Mouse Leave: Trigger when the cursor leaves the element

Page event: 

• Scroll Into View: Trigger when the element scrolls into view or first appear.
• While Scrolling In View: Trigger when the element scrolls through the viewport.
• Scrolling To Percentage: Show when page content is scrolled down to a percentage.
• After Page Finish Loading: Trigger after page successfully loads
• Exit Page: Trigger when users’ intention to exit the page is detected. This is calculated as when the mouse cursor leaves the website area on the browser.

Select a suitable event from the list. If you want to remove an event, hit the Trash icon

Step 4: Set up targets

4.1: Pick a target element

The default target will be the original element from the start. You can change to any other element on the page by clicking on the target button and picking the new element. To cancel, hit the “Cancel” button on the bottom toolbar.

4.2: Add more targets

If you want to add more targets to the same event, click on the smaller “+” button in the Targets section. You can add multiple targets for any given event.

4.3: More options

Click on the 3-dot icon to show more options for target:

• Rename: Rename a target. The default name displays the element and element ID
• Duplicate: Duplicate a target and all of its actions.
• Delete: Remove a target and all of its actions from the event.

Step 5: Add actions

Click on the “+ Add action” button to start. There are two types of actions: Preset animation and Advanced.

Preset animation: 16 animations to choose from to make the target element stand out and grab more attention.

Advanced: 7 advanced animations that can show or hide the target element.

• Show element
• Hide element
• Toggle element
• Slide up
• Slide down
• Slide toggle
• Scroll to target

If the Popup element is selected as a target, there’ll be two more animations: Show Popup and Hide Popup.

Responsive settings

Lastly, you have the choice to activate flow action on specific views, uncheck views you don’t need flow action on.

Flow Action “in action”

We’ve prepared a demo to show you what Flow Action can do. In this demo, we will set the sticky Product module to show up only when the main product is out of sight and disappear as soon as users scroll back to the main product.

To design the responsive sticky Product section, we’ll have to use 3 separate events: The first event is to hide the row after page load, the second one is to show the row when scrolled down past the product section, and the last one is to hide the row one more time whenever the product section is scrolled into view.

Step 1: Design a sticky Product module following this article.

Step 2: Click on the outer Row element to enter its Flow Action configurations

Step 3: Set up event No.1 – Hide element after page load.

Step 4: Set up event No. 2 – Show element when scrolled greater than 35{9ea1a9982572377d1351b1ee381ce3c79f845f8b385acd5af084e202d738581f}.

Step 5: Step up event No. 3 – Hide element when scrolled less than 31{9ea1a9982572377d1351b1ee381ce3c79f845f8b385acd5af084e202d738581f}.

Step 6: Hit “Save” and “Publish”

The result will look like this:

You might have noticed in the GIF above, the “BUY NOW” brings out a cross-sell popup offering another product. This is also done using Flow Action. Check out this article for full step-by-step instructions.