Utilizing Fastr's Experience Canvas, you can create dynamic experiences with toggle functionality and scene transitions seamlessly. In this guide, we'll walk you through the process, which involves incorporating custom code into your Fastr account and setting up your experiences accordingly.
Example Experience:
View an example by selecting the "Click to read more" text here: Test Show Hide Experience
Requirements:
- At least two experiences created in the user account - the user will need to build 1 main experience (with 2 scenes) and 1 toggle/drawer experience.
Custom Code Integration:
Contact our support team at support@getfastr.com to add the necessary Custom Action code to your account. Please send our team links to the two experiences that you have built, so we can verify this is ready to be built. Once our team has added the custom code to your account, you can follow these steps to get the experience working:
- Design a multi-board experience with a "Click to show more" toggle button:
- The first experience will be displayed on page load. This should be the experience that has a button saying "Click to show more", or something along those lines. The second board should be fairly identical. You can see how my two boards look in this screenshot:
- The first experience will be displayed on page load. This should be the experience that has a button saying "Click to show more", or something along those lines. The second board should be fairly identical. You can see how my two boards look in this screenshot:
- Add link widgets to each scene:
- Create a link widget on each scene. These need to have the action "Navigate to", and you'll select the opposite board. For this example, I've made the link widgets fairly large, but they can essentially just be a pixel in size:
- These link widgets also must have unique alt text, so that we can target them. In this case I set the alt text to and "scene2".
- Create a link widget on each scene. These need to have the action "Navigate to", and you'll select the opposite board. For this example, I've made the link widgets fairly large, but they can essentially just be a pixel in size:
- Add the custom action to the "Click to show more" toggle button on the first board:
- There needs to be a button on the first board that can trigger the change. You'll see that I've done this with a link widget over the "Click to show more" text. You'll need to input a unique parameter on this toggle, which I've chosen as "toggle1" for this example. We will use this parameter later. You'll see that I've also put the alt text from step one as the "scene" input. So in this case, I've used "scene2".
- There needs to be a button on the first board that can trigger the change. You'll see that I've done this with a link widget over the "Click to show more" text. You'll need to input a unique parameter on this toggle, which I've chosen as "toggle1" for this example. We will use this parameter later. You'll see that I've also put the alt text from step one as the "scene" input. So in this case, I've used "scene2".
- Configure a single board experience with a "Show less" toggle:
- This second experience will not be visible when the page loads. This experience also has a button, but this will be the button to "Show Less". In this case, I'm using "Collapse". You'll just need to add the custom action on the "Collapse" button. You can see in this screenshot that I am using the same toggle parameter, so "toggle1". You'll notice I am also targeting the same alt text from my link widget, so this would be "scene2" again:
- This second experience will not be visible when the page loads. This experience also has a button, but this will be the button to "Show Less". In this case, I'm using "Collapse". You'll just need to add the custom action on the "Collapse" button. You can see in this screenshot that I am using the same toggle parameter, so "toggle1". You'll notice I am also targeting the same alt text from my link widget, so this would be "scene2" again:
- Publishing the experiences:
- At this point, you'll need to publish both experiences, and copy the code for each content slot. The first experience should just have the code published in the normal fashion, with no changes needed. However, the second experience needs to be placed inside of a div tag, with a few adjustments.
- Initially hide this div by setting its style attribute to "display: none."
- Additionally, it needs to reference the same "toggle1" parameter as the ID.
- At this point, you'll need to publish both experiences, and copy the code for each content slot. The first experience should just have the code published in the normal fashion, with no changes needed. However, the second experience needs to be placed inside of a div tag, with a few adjustments.
Please review an example of the code here:
<script src="https://cas.zma.gs/6061d3dfa3dd510a84f98f31/ssr/containers/15d20ec4-fe1c-4e4f-951d-be4baa3bec7a/init.js"></script>
<div id="toggle1" style="display: none;">
<script src="https://cas.zma.gs/6061d3dfa3dd510a84f98f31/ssr/containers/456a7d10-2ea0-4089-8783-a0c7b922ef83/init.js"></script></div>
Once completed, your setup should be ready to use. For any assistance or troubleshooting, please feel free to contact our support team at support@getfastr.com
Comments
0 comments
Please sign in to leave a comment.