Create automated interactions using Flow Action

 

This article will introduce you to the Flow Action feature and how you can use it to create automated functions that trigger when customers interact with your website.

 

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

 

The Flow Action workflow is as follows: Select an event > Pick a target > Add a target action > Configure the timing

 

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”

The application of Flow Action in designing your page is extensive and once you understand how the feature works, you’ll be able to fine-tune your own automated functionalities to improve the shopping experience and take your website to the next level.

 

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%.

 


Step 5: Step up event No. 3 - Hide element when scrolled less than 31%.



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.

 

And there you have it! Read more of our articles here to master GemPages, and if you need any further assistance, our GemPages Support Team is here to help!

We can be reached at any time via email or live chat.

 


Was this helpful?