Dialogflow border radius updating both outer and inner chat box

[gabs]

Hi, can I know how to update the border-radius of the outer box of the dialogflow chatbot only? The --df-messenger-chat-border-radius variable seems to be updating both the .chat-wrapper and .message-list-wrapper.

I want to update for the .chat-wrapper border-radius only.

Sample code:

<df-messenger
  project-id="..."
  agent-id="..."
  language-code="..."
  max-query-length="...">
  <df-messenger-chat-bubble
    chat-title="Chat with me">
  </df-messenger-chat-bubble>
</df-messenger>
<style>
  df-messenger {
    z-index: 999;
    position: fixed;
    --df-messenger-font-color: #000;
    --df-messenger-font-family: Google Sans;
    --df-messenger-chat-background: rgba(139,99,167,.9);
    --df-messenger-message-user-background: #C8E6C9;
    --df-messenger-message-bot-background: #fff;
	--df-messenger-chat-border-radius: 8px;
    bottom: 16px;
    right: 16px;
  }
</style>

 Thanks.

[Mizar]

@gabs I got this issue long ago, I tried with different ways of only giving radios to outer card and nothing worked.

[gabs]

Long ago? Really? I see haha.. Is there a way to create a custom chatbox with Dialogflow instead? It seems the Dialogflow chatbox is limited to a predefined style only.

[Mizar · Accepted solution]

@gabs long ago since Dialogflow Cx exists, yes you can create your own custom ui.

Create the chatbot frontend with the functionalities of a chatbot window, then you have to stablish a connection with the dialogflow api and the chat via OAUTH2.0 and Authtoken generated every 30 minutes.

I have seen how that integration is done, but never done it on myself, it just scares me the frontend thing, even working as frontend years ago hahaha.