Fastr Workspace - Interactions: Overlays

Overview

In this article, we will walk through how to use the Open and Close overlay actions. 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. 
 

Using the Open Overlay action

When designing your Overlay, you can build it in the same experience as your main board. This can be used to either create a pop-up that covers the full screen, or just a smaller piece of content that will appear on the board. Please review this example page that shows off these two differences: Example Overlays

You can see a screenshot of how that example looks in the Canvas, where all three boards have been designed in a single experience:

1. Create a Separate Overlay Board: As the first step, you will need an additional board in your experience. This will contain the content that you want to appear as a pop-up window. You may want to consider have an "X" icon for when we apply the Close Overlay action later in this article. 
   
   Please note that you should unselect the "Include in Scene Order" option for this board. This will sure that a user can only see the pop-up when intended. You can find this option in the Design tab when you have a board is selected. 
   

2. Add the "Open Overlay" action: This should be applied to open up your Overlay board. When you click on this action, you will have a few different options for customization as shown here: 
   

   • X% - This number is used to determine the horizontal position of your overlay board. If you were to set this number to 0%, it will be at the far left side of your experience. If you set this to 50%, it will be in the dead center. And if you set this at 100%, it will appear at the far right.

   • Y% - This number is used to determine the vertical position of your overlay board. If you were to set this number to 0%, it will be at the very top of your experience. If you set this to 50%, it will be in the dead center. And if you set this at 100%, it will appear at the very bottom.

   • Scale % - This number is used to determine the exact sizing of your overlay. If you set this to 100%, the overlay will appear as the exact size you have designed it. Adjusting this value can be helpful for making your content appear a bit smaller or larger if needed. 

   • Board - This will be used to select which board will appear. When you open the dropdown, you will see the names of your other boards listed to be selected from. When you pick a board, you will see a preview of it on the canvas so you can estimate the size it will be. 

Using the Close Overlay action

After adding an overlay that will appear, you will also need to make sure that it can be closed as well. Therefore, you will want to add the "Close Overlay" action on an X icon or somewhere to allow the user to navigate back to the main content. For the Board option, you will want to select the same board name as the one that has been opened. 

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!