https://discord.gg/botpress logo
Conditional carousel button visibility based on wo...
# 🤝help
a
Hi everyone, I’m building a chatbot in Botpress Studio and using a carousel card with buttons. I want button 3 to only appear when the variable
workflow.CarouselButton3Label is equal to "Vraag prijs aan". Current situation: - Before the carousel, I run an Execute Code card that sets
workflow.CarouselButton3Label - The variable displays correctly if I use the standard way (adding the variable inside the button fields) - However, when I test it in Webchat, it shows 3 buttons with 1 empty button, even though button3 shouldn’t display. - I need to set workflow.CarouselButton3Label = " " when button 3 should not appear, because otherwise the bot doesn’t display the carousel at all. - This results in an empty button linking to Botpress. What I tried: - I used Botpress AI (on the Botpress docs) to generate code to conditionally add Button 3:
Copy code
actions: [ 
    { action: "postback", label: "Button 1", value: "value1" }, 
    { action: "postback", label: "Button 2", value: "value2" } 
] 

// Conditionally add Button 3 
if (workflow.CarouselButton3Label === "Vraag prijs aan") { 
  items[0].actions.push({ 
    action: "postback", 
    label: workflow.CarouselButton3Label, 
    value: "button3_value" 
  }) 
}
- I put this code inside the {x} field of the carousel card buttons - When I run the workflow, the bot responds with:
"Cannot display this message" - Bot logs show:
Copy code
20:05:18 debug dm dm
Sending Message. Type: carousel. Text: N/A
Sending Message. Type: carousel. Text: N/A
{"scope":"dm"}
My last option is the following: (if possible) - Use a Transition card with "expression" as the condition type to split the flow into: - One branch with button 3 - One branch without button 3 Optional to share if helpful: - Execute Code snippet where workflow.CarouselButton3Label is set (normally not needed because this is configured correctly for my needs) Thanks in advance! https://cdn.discordapp.com/attachments/1457821124741169203/1457821125126918253/Schermafbeelding_2026-01-05_om_20.14.30.png?ex=697b0ef9&is=6979bd79&hm=67c0b087dc9dca3655d1494925fc169e605458c3356c4dcec21932ef0569f7f1&
w
hey , take a look at this tutorial https://discord.com/channels/1108396290624213082/1135960836209393676 you'll be able to handle everything in a code card
g
yeah, you dont need to use the carousel card
do it all in code, and to send a carousel in code, you do that like this: `// -------------------- // Build carousel // -------------------- const items = capped.map((url, i) => ({ type: 'card', title:
Image ${i + 1}
, subtitle: imageDescriptions[i] ||
Image ${i + 1}
, // use description if exists imageUrl: url, actions: workflow.buttons.map(b => ({ action: 'postback', label: b.label, value: b.value })) })); await bp.dm.replyToEvent(event, { type: 'carousel', items });`
a
Thanks for your help, now my workflow is working as I wanted. Thank you for your quick response!
2 Views