Block key
Unique identifier for a block.
Overview
A block key is a unique identifier for a block, allowing you to identify blocks in SDK method responses.
Usage in a workflow
You can set the block key in the settings of any component block within a workflow. This field is optional and is left empty by default.
Usage in a block template
The block key is automatically included in every block template, so no manual configuration is needed. You can access it in your application through the following methods:
- React SDK
- useCurrentFloatingBlocks()
- useCurrentSlotBlocks()
- Accessible in any block component via the
__flows.key
prop.
- JavaScript SDK
- getCurrentFloatingBlocks()
- getCurrentSlotBlocks()
- addFloatingBlocksChangeListener()
- addSlotBlocksChangeListener()
- Accessible in any block component via the
__flows.key
prop.
Example implementation
In this example we will use the block key to open and close a panel when specific block is active.
Create a workflow and publish it
Set up a workflow with a tour block that includes the following steps:
- Step 1: Tooltip with a block key
close-menu
targeting a button with theid=menu-button
. - Step 2: Tooltip with a block key
inside-menu
pointing to a panel with theid=menu-content
.
Configure other tooltip properties as needed.
Implement useCurrentFloatingBlocks() to control the menu
To open and close the menu, we will use the useCurrentFloatingBlocks()
hook to track the active floating blocks for the user. We will look for the steps with the block keys close-menu
and inside-menu
to open and close the menu. When the steps are active we will set the state to open or close the menu.
Result
When users navigate through the tour:
- The menu opens when reaching the second step (
inside-menu
key). - The menu closes upon returning to the first step (
close-menu
key). - The menu remains open through additional steps unless explicitly closed.
To close the menu from another point, add a step with the block key close-menu
.
This approach can be used outside of a tour block as well. For example, you can use the block key to open a popup when a specific block is active.
Last updated on