ambitious-aqua•16mo ago
Display buttons dynamically
Hey everyone, right now I have the following setup for a career page chatbot.
main menu with 4 buttons
- Button 1 -> Flow 1
- Button 2 -> Flow 2
- Button 3 -> Flow 3
- Button 4 -> Flow 4
When a user clicks on button 1 and runs through flow 1, a variable will be set to false (which indicates that user has been through flow one) and the menu will reappear. In this case, I want to hide button 1 because the user already has seen it. The same goes for all the other buttons except button 4
can someone please guide me and help me through this? I've tried my best using GPT4o to solve this but it hasnt really been helpful..
thanks!
3 Replies
To dynamically display buttons based on user interactions, you can use variables to track which flows the user has already completed. Here’s a step-by-step guide to achieve this in Voiceflow:
Step 1: Set Up Variables
1. Create Variables: Define variables for each button to track if the user has completed the corresponding flow. For example,
flow1_completed, flow2_completed, etc. Set their initial values to false.
Step 2: Configure Buttons
1. Add Buttons: In your main menu, add the four buttons as you described.
2. Set Button Actions: Configure each button to navigate to the respective flow (Flow 1, Flow 2, etc.).
Step 3: Update Variables After Flow Completion
1. Set Variable to True: At the end of each flow, use a Set Step to change the corresponding variable to true. For example, at the end of Flow 1, set flow1_completed to true.
Step 4: Conditionally Display Buttons
1. Conditional Logic: Use conditional steps to check the value of the variables before displaying the buttons. If a variable is true, hide the corresponding button.
Here’s a detailed example for Flow 1:
#### Main Menu Setup
1. Button 1:
- Label: "Flow 1"
- Action: Navigate to Flow 1
2. Button 2:
- Label: "Flow 2"
- Action: Navigate to Flow 2
3. Button 3:
- Label: "Flow 3"
- Action: Navigate to Flow 3
4. Button 4:
- Label: "Flow 4"
- Action: Navigate to Flow 4
#### Flow 1 Completion
1. Set Step: At the end of Flow 1, add a Set Step to update flow1_completed to true.
#### Conditional Display in Main Menu
1. Conditional Step: Before displaying the main menu buttons, add a conditional step to check flow1_completed.
- If flow1_completed is false, display Button 1.
- If flow1_completed is true, hide Button 1.
Repeat the above steps for the other flows (Flow 2, Flowambitious-aquaOP•16mo ago
push
You can create a dynamic button using a Javascript step.