WebChat Common Styling and Behavior (Bot framework v4)

Allows authenticated DRUID Portal users to chat as authenticated users (log in the chat widget)or as anonymous (Log out if previously logged authenticated in the chat widget).

?param1=value&param2=value

The params are sent within the conversation context and are mapped with entity QueryParams.

Create string fields in the QueryParams entity with the param names to address the conversation slots and use them in your flows: QueryParams.params1, QueryParams.params2

This is the path name of the base url used for authorization.

The XMLHttpRequest.withCredentials property is a Boolean value that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. For more information, see Mozilla documentation.

Sends a sound notification when a new message is received in the chat.

Heartbeat endpoint , on every message sent by the user, a keep alive user's session is sent to the heartBeatUrl (ex: Druid myaccount).

Automatically keeps expands the webchat control.

Enable it whenever you need to retrieve from users their consent regarding the cookies.

When enabled, it keeps the chatbot snippet expanded.

The width of the collapsed web chat widget.

The web chat’s position relative to the bottom of the page. Values: left, right.

The distance between the widget and bottom of the screen.

The border-radius property defines the radius of the chatbot snippet top corners.

The border color property is used to set the border color of the chatbot snippet.

The border size property defines the thickness of the chatbot snippet border.

Sets the color of the header text.

The bottom border-radius property defines the radius of the chatbot snippet bottom header corners.

Sets the webchat title.

Sets the background color for the chatbot snippet.

Sets the font size for username, botname and timestamp for each message sent and received by the bot.

Sets the primary font type used in both messages sent by the user and bot.

Set the font size of the transcript.

Sets the font-sizes in the text box for the text written by the user.

Sets the buttons padding in the conversational flow  (e.g. hero card , choices, thumbnail).

Sets the text color from the buttons in the conversational flow  (e.g. hero card , choices, thumbnail).

Sets the background color of the buttons in the conversational flow  (e.g. hero card , choices, thumbnail).

Sets the text color that appears on hover on  buttons in the conversational flow  (e.g. hero card , choices, thumbnail).

Sets the icon for the context menu. Only .svg file format (svg code) is supported.

<svg stroke="currentColor" fill="currentColor" height="24" width="24" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="
http://www.w3.org/2000/svg"><path
d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5Z"></path><path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6Z"></path></svg>

The icon shown when the chatbot snippet is collapsed. Users click on it to expand and open the web chat. Only .svg file format (svg code) is supported.

Description

Sets the text color of the messages sent by the bot.

Sets the border radius of the messages sent by the bot.

Sets the border width of the messages sent by the bot.

Sets the numb direction (top, bottom) of the messages sent by the bot.

Sets the text color of the messages sent by the user.

Sets the border radius of the messages sent by the user.

Sets the border width of the messages sent by the user. 

Sets the numb direction (top, bottom) of the messages sent by the user.

Sets the max width of the text boxes sent by the bot and user.

Sets the min width of the text boxes sent by the bot and user.

Sets the size of the chatbot avatar.

Fill in the url of your bot avatar (png, jpg, etc.).

Sets the height of the entire send box.

Sets the left padding of the entire send box.

Sets the same padding to both left and right side of the entire send box.

Sets the inner padding for the inner box "Type your message".

Sets the top and bottom padding of the inner box "Type your message".

When this property is checked , it will hide the upload file button from the send box unless the flow step if of the File Upload.

When this property  is checked , it allows the user's text to be continued to the next line when the side of the typing box is reached.

Sets the background color of the entire send box.

Sets the text color of the placeholder from the send box. Right now the message displayed is "Type your message"

Sets the color of the buttons from the send box when they are disabled.

Sets the hover color of the buttons from the send box such as contextual menu, attach file and send icon.

Description

Changes the hover background color for the flow steps of type choice.

Sets the background color of the choice buttons when this flow step has the property "Block user Input" active.

Sets the border radius of the choice buttons when they appear in conversation.

Sets the width of the border for each choice button that appears in conversation.

Sets the background color of the choice buttons when on the flow step the property "Block User Input" is enabled.

Sets the width of the border for each choice button that appears in conversation, when on the flow step the property "Block User Input" is enabled.

Sets the layout of the choice buttons. Posible values are flow, carousel, stacked.

Sets the size of the container in which the choice buttons appear, and the suggestedActionLayout is set to carousel.

When this option is disabled the time stamp that appears under each status message sent by the bot or by the user, will be hidden. The default value is set to true.

Set it in milliseconds and it will trigger after how much time you receive the send failed status on the flow steps where is required a file upload. For example, you can receive this message when you loose your internet connection or service is down, etc.

Sets the format of the time stamp. Possible values can be relative  or absolute (the full time of the message is displayed).

Below each message sent and read by the user or by the bot and in line with the time stamp, an activity status message appears like a bubble. Setting the color for this option will change the color of the bubble status message.

If you check this option, under the messages sent by the bot will also appear the bot name. If this option is unchecked, only the timestamp will appear under the messages sent by the bot.

If you check this option, under the messages sent by the user will also appear the username. If this option is unchecked, only the timestamp will appear under the messages sent by the user.

If you check this option, all alert messages sent by default by  the chatbot such as inactivity status or connectivity issues in the chatbot will be hidden.

Sets the max height of the toaster box message.

Sets the icon width for each status that appears on the toaste (alert, exclamation mark, etc).

Sets the padding of the text that appears in the toast.

When the error message is raised by the chatbot, you can customize the background color on which the error message appears.

When the info message is raised by the chatbot, you can customize the background color on which the info message appears.

When the success message is raised by the chatbot, you can customize the background color on which the success message appears.

The text color of the buttons that appear at overlay (e.g. more messages).

The text color of the buttons that appear on focus.

The text color of the buttons that appear on hover.

Sets the behavior of the scroll to end button. For example from here you can disable the scroll to end button.

Used for cards (e.g. hero, thumbnail) where is set long text in Title area and it needs to be wrapped.