I am working on a product browsing bot for Facebook messenger. When user enters a product name, the bot will show a carousel with different variants of that product. Each carousel cards have a postback button named "Order" that will send the specific product info of the card via postback event. I also display quick reply buttons that will allow user to go back and search another product (please see the first picture). When user click on the carousel button, I want to replace the quick reply buttons with another quick replie buttons for order fulfilment flow. However I don't know how to trigger that using the postback event.

Maybe @famous-jewelry-85388 can help here?

Hi @bitter-cpu-84314 , I think there is a way using coding, if you are comfortable with writing simple JSON strings, I will look for it

Thank you. I am generally comfortable with coding although relatively new to JavaScript. I think it would be something like an async event. We present user with 2 options where they could either click the carousel or click the quick reply (the multiple choice buttons). The problem is, when I click on carousel button, the quick reply buttons gets hidden from UI (I could still type it in and they still work). So the bot just keep waiting for the quick reply button click events and doesn't act on the carousel click.

You can do something like this:

[{label:'hi',value:'google.com',action:'postback'}]

Thank you for your answer. actually, my issue is with catching that incoming postback event. The code below is how I'm creating my carousel and quick-reply buttons. Following that, I'm using a "Raw Input" card to ensure the bot doesn't proceed to the next card. The quick-replies work just fine, but when carousel is clicked, nothing happens. It seems that the bot is only reacting to 'quick-reply' events and not the postback. `// Function to create a card for a product function createCardForProduct(product, index) { return { type: 'card', title: { dynamicValue:

${product.options}

, valueType: 'dynamic' }, subtitle: { dynamicValue:

${product.product_name}

, valueType: 'dynamic' }, imageUrl: { dynamicValue:

${product.product_img}

, valueType: 'dynamic' }, actions: [ { action: 'postback', label: { dynamicValue: 'Order', valueType: 'dynamic' }, value: { dynamicValue:

${product.product_id},${product.options}

, valueType: 'dynamic' } } ] } } // Create the carousel items const carouselItems = workflow.product_info.map((product, index) => createCardForProduct(product, index)) // Send the carousel bp.dm.replyToEvent(event, { type: 'carousel', items: carouselItems }) // Send the quick replies bp.dm.replyToEvent(event, { type: 'choice', text: 'please choose one', options: [ { label: 'find another product', value: 'find_prod' }, { label: 'quit', value: 'quit' } ] })`

Just jumping back in here for a second I don't think you should use {{}} in the expression card.

@bitter-cpu-84314 how is it going?

You can, but it's not necessary!

Ah okay I see, thank you!