buttons in dialog flow cx

[smriti23]

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 · Accepted solution]

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:

1. 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.
2. 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.
3. 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.

[smriti23]

Thanks  @dawnberdan a custom component is what I also opted for as a final solution .  But since I was making a 3rd party integration bot that would be embedded in multiple websites I was not looking for the custom component approach . Now what I am thinking is to have all my custom components packaged in a minified file over CDN and add that script with dialog flow config in all the websites.

also if you can help why source is not getting rendered when using html type that would be helpful this is my complete question

{
  "richContent": [
    [
      {
        "type": "html",
        "html": "<img src='https://example.com/image.jpg' alt='Image Description' style='width: 150px; height: auto;'>"
      }
    ]
  ]
}

https://stackoverflow.com/questions/79274094/dialog-flow-cx-using-image-tag-for-rich-content

[dawnberdan]

Hi @smriti23,

Distributing custom components through a CDN is an effective strategy for a third-party integration bot deployed across multiple websites. It helps centralize your code, making updates and maintenance simpler, while minification reduces file size and improves load times.

Regarding your HTML rendering issue:

The provided JSON snippet should work, assuming that https://example.com/image.jpg is a valid and accessible image URL. The issue likely doesn't lie within the JSON itself, but somewhere else in your setup. Here's a step-by-step guide to help troubleshoot:

1. Verify Image URL: Start by directly opening https://example.com/image.jpg in your browser. If the image doesn't load, the issue is with the image source, not your Dialogflow CX setup. Double-check the URL to ensure it’s correct and that the image is publicly accessible.

2. Network Tab (Browser Developer Tools): In your browser’s developer tools (usually accessed by pressing F12), go to the "Network" tab. When Dialogflow renders the message, check for a request to https://example.com/image.jpg. If the request is missing or returns an error (like a 404 Not Found), there’s an issue fetching the image.

3. HTML Allowed Tags: Dialogflow CX may have restrictions on which HTML tags can be used. While the <img> tag is generally supported, check the Dialogflow CX documentation for any limitations on embedding images via HTML. They may have a specific list of allowed tags.

4. Content Security Policy (CSP): The website embedding your Dialogflow CX bot might have a Content Security Policy (CSP) that restricts loading images from external sources. Review the website’s CSP headers; they might be blocking the image URL. You may need to modify the CSP on the website or use an alternative approach for displaying the image.

5. CORS (Cross-Origin Resource Sharing): If example.com is on a different domain than the website hosting your bot, CORS could be blocking the image request. The server hosting image.jpg must have the appropriate CORS headers to allow requests from your bot's domain.

6. Custom Fulfillment: If none of the above steps resolve the issue, consider using custom fulfillment. Instead of sending the image URL in the HTML, your fulfillment can fetch the image data (base64-encoded) and embed it as a data URL within the HTML. This avoids external resource loading and CORS issues.

Example of data URL approach (Conceptual):

Your fulfillment would:

• Fetch https://example.com/image.jpg
• Encode the image data as a base64 string.

[smriti23]

hi @dawnberdan I tried with base 64 image and its still not showing src attribute in the elements

{
  "richContent": [
    [
      {
        "type": "html",
        "html": "<img src='data&colon;image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjIiIGhlaWdodD0iMzUiIHZpZXdCb3g9IjAgMCA2MiAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjYyIiBoZWlnaHQ9IjM1IiByeD0iNCIgZmlsbD0iI0U0MzgzNiIvPgo8cGF0aCBkPSJNMzIuMDMxMiAxMS41NjI1VjIzSDMwLjY0ODRWMTMuMzY3MkwyOC4yNTc4IDE0LjQyOTdWMTMuMTI1TDMxLjgyMDMgMTEuNTYyNUgzMi4wMzEyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==' alt='Image Description' style='width: 150px; height: auto;'>"
      }
    ]
  ]
}

above is the snapshot of the rendered element

[smriti23]

hi @dawnberdan do you have any info related to this ?