Fastr Workspace - Interactions: Basic Actions

Overview

In this article, we will walk through how to set up various basic actions for interactions in detail. You’ll learn how to configure commonly used actions such as opening a URL, changing scenes, opening and closing overlays, triggering a lightbox, and more. For general information about adding an interaction, please review the following article: Fastr Workspace - Interactions Overview

As a first step, you will need to click on a widget and navigate to the Interact tab. From here, you can click on the plus icon to add an Interaction to that widget. 

After clicking on the plus icon, the default interaction will appear for opening a link. In this panel, you can click on the action to change it or make edits. 

Basic Actions:

Each of the basic actions can be found at the top of the actions list, as shown here: 

• Open URL: This option can be used for adding a standard link that will open. You can toggle the checkbox to have the link either open in a new tab or in the current window. 
  

• Open Lightbox: This option will open a lightbox pop-up. There is a field for adding a URL, which will specify which URL opens. You can also customize the lightbox by specifying its height and width. Below is a working example demonstrating the Open Lightbox action: Open Lightbox Example
  

• Change Scene: This action can be used to navigate between multiple boards that are being used. Therefore, this would be used for navigating between different boards in a carousel style experience. Alternatively, this would be used to navigate to a specific Page when working on a Fastr Publication. When navigating to a different board, you can also add a slide animation as shown below. For more information on creating a carousel style experience, please review the following article: Fastr Workspace - Building a carousel

  

  Scene Options: By selecting "Next" or "Previous", this will navigate between your boards in the same order they have been designed. The other option would be to select a specific board to navigate to. This could be useful for building a table of contents, as an example. 

• Open Overlay / Close Overlay: Opens the selected overlay when the configured trigger action is performed on the widget. An overlay can be designed in the same experience, in order to achieve additional information or content that appears when a user interacts with the page. For full information on using these actions, please review the following article: Fastr Workspace - Interactions: Overlays

• Jump To: Jumps to a specific area on your board when this action is triggered. For example, this can allow you to add an anchor link which will scroll the user down to a specific section of the experience. You can view a working example of the Jump To action using the link below: Jump To Action Example

  You can follow these steps to create a "Jump To" action: 

  1. Add the "Jump To" action to a button - You can see an example here where I have set up a Jump To action. Please note that you will need to put a unique ID or parameter in the "CSS Selector" field, as shown below. In this case, I've created a CSS selector that is labeled as ".anchor" 
     
     Please note that you must have your CSS selector start with a "." for this to work as intended 
     

  2. Add the same ID or parameter to a different widget - At this point, you can scroll down to a lower part of your page to add the anchor link's target. This is where the page will scroll to when a user clicks on the button from step 1. You will just need to place a widget on the canvas, and add the same unique ID or parameter under the "Custom CSS Class" field. This can be found towards the bottom of the design tab. 
     
     Please note that the period is not required for the Custom CSS Class 
     
      

  If you have any follow-up questions or need further assistance, please feel free to reach out to us at support@getfastr.com — we're happy to help!