Solved: buttons in dialog flow cx - Page 2

smriti23 · 12-12-2024 01:55 AM

How can we align 2 buttons side by side dialog flow cx horizontally?

{
  "richContent": [
    [
      {
        "type": "button",
        "text": "button1"
      },
      {
        "type": "button",
        "text": "button2"
      }
    ]
  ]
}

this configuration shows 2 buttons one below the another . Is their any way to give custom styling in dialog flow cx or any other way of achieving this behavior.

I don't see a way to add custom css in dialog flow only the predefined variables can be changed . Other than that everything is so tightly wrapped inside the shadow root that it is so difficult do any custom css or attach events using javascript.

Please share more details if I am missing anything on this

dawnberdan

Hi @smriti23,

Welcome to Google Cloud Community!

The standard Dialogflow CX rich content response doesn't offer a way to directly control the horizontal alignment of buttons within a single response. The system renders them vertically by default. There is no mechanism for injecting custom CSS or JavaScript to manipulate the layout within the response itself. The presentation layer is tightly controlled.

Therefore, to arrange buttons horizontally, you must use a custom fulfillment. This involves:

Creating a webhook: You'll create a webhook (using a language like Node.js, Python, or Go) that acts as a bridge between your Dialogflow CX agent and your custom presentation logic.
Generating HTML: Your webhook will receive the intent's information from Dialogflow CX. Based on this, it will dynamically generate an HTML snippet containing the buttons. Crucially, you'll use HTML and CSS within this snippet to arrange the buttons horizontally. The simplest method is using display: inline-block; or display: flex; on a container element holding the buttons.
Returning the HTML: The webhook sends this generated HTML back to Dialogflow CX as a response. Dialogflow CX will then render this custom HTML, displaying your horizontally-aligned buttons.

In addition, I came across an article/blog that covers the same question about your problem. It could be helpful for you.

Was this helpful? If so, please accept this answer as “Solution”. If you need additional assistance, reply here within 2 business days and I’ll be happy to help.

View solution in original post