About
The Interactions feature in the Walnut Extension allow users to include interactive elements within a captured screen. If a captured screen has assets that can be turned on and off, capturing interactions will allow them to be live in the demo.
Drop-down menus, Pop up modals and side bars are all great examples of an interaction that fits this capture experience.
How to Capture Interactions
Capturing interactions is available for use through the extension on already captured screens. This means that to enable the capability, you must first perform a screen capture.
As soon as the extension is open, the Walnut debugger will appear. To use capture an interactive element on the screen, first take a single capture. Then click on the interactions button to the right of the camera.
Once you've clicked on the interactions button, you can interact with the page and the elements will be captured.
When the interaction was captured successfully you'll get a confirmation notification on the extension.
This indicates you're screen now includes the interactive elements. You can continue to capture or click the back button to return to the extension's base state. By clicking on the screen icon within the extension, you'll see which screens were successfully captured. Those screens with interactive elements will be noted.
Recorded Interactions Best Practices
- For an interaction to capture successfully, you need to perform the interaction on and off. For example, if you click on a down arrow to open a drop down menu. Be sure to then also click on the arrow to bring the menu back to its original state.
-
If the extension indicates that an interaction was successfully recorded, but you are then unable to view the interaction within the editor, contact support@walnut.io.
How to Edit Recorded Interactions
In the template screens, recorded elements will appear within the editor. You will see the interactions logo in orange applied to the element. Click on the element, then select trigger interaction.
The element will then also have the interaction logo applied in purple via edit mode. You can edit the interaction's content or add a guide step to it.
Important to Note đź“ť
- You cannot trigger more than one interaction at the same time.
-
Nested interactions—such as multi-level menus—are not supported at this time.
-
Interactions are only supported in non-guided demo experiences. They are not compatible with guided demos.
- Interactions only support JavaScript-powered interactions.
- Smart objects are not currently supported with recorded interactions.
- You can use the update screens feature to re-capture an existing page within your template to now include a recorded interaction.
- If you cancel the debugger at the top of the page after enabling the feature, it will be automatically turned off.