WYSIWYG editor (What You See Is What You Get)
Unblu can be configured in such a way that users can format their messages with Markdown, a lightweight markup language.
While many people find Markdown easy to learn, some may struggle. To help these users, Unblu provides a WYSIWYG editor (What You See Is What You Get) so users can format their messages without any knowledge of Markdown.
Configuration
You enable the WYSIWYG editor in the chat message input by enabling Markdown in the conversation template scope. To enable Markdown for a user, add their participant role to com.unblu.conversation.message.chatMessageAsMarkdownEnabled.
-
To display the message input toolbar to agents by default, set com.unblu.conversation.messaging.ui.messageinput.toolbar.showToolbarForAgentsByDefault to
true. -
To display the message input toolbar to visitors by default, set com.unblu.conversation.messaging.ui.messageinput.toolbar.showToolbarForVisitorsByDefault to
true.
You can configure which buttons are available in the toolbar. By default the following buttons are enabled. You can disable them by setting the configuration properties listed to false.
-
Bold (com.unblu.conversation.messaging.ui.messageinput.toolbar.enableBoldButton)
-
Italic (com.unblu.conversation.messaging.ui.messageinput.toolbar.enableItalicButton)
-
Underline (com.unblu.conversation.messaging.ui.messageinput.toolbar.enableUnderlineButton)
-
Strikethrough (com.unblu.conversation.messaging.ui.messageinput.toolbar.enableStrikethroughButton)
-
Link (com.unblu.conversation.messaging.ui.messageinput.toolbar.enableLinkButton)
-
Bullet list (com.unblu.conversation.messaging.ui.messageinput.toolbar.enableBulletListButton)
-
Numbered list (com.unblu.conversation.messaging.ui.messageinput.toolbar.enableNumberedListButton)
-
Blockquote (com.unblu.conversation.messaging.ui.messageinput.toolbar.enableBlockquoteButton)
-
Inline code formatting(com.unblu.conversation.messaging.ui.messageinput.toolbar.enableInlineCodeButton)
The following buttons are disabled by default. To enable them, set their configuration properties to true:
-
Heading 1 (HTML H1, com.unblu.conversation.messaging.ui.messageinput.toolbar.enableHeading1Button)
-
Heading 2 (HTML H2, com.unblu.conversation.messaging.ui.messageinput.toolbar.enableHeading2Button)
-
Heading 3 (HTML H3, com.unblu.conversation.messaging.ui.messageinput.toolbar.enableHeading3Button)
-
Code block (com.unblu.conversation.messaging.ui.messageinput.toolbar.enableCodeBlockButton)
Finally, you can configure the height of the input field:
These two properties only have an effect if the message input field is being displayed in stacked mode, with the Send, canned response, and upload buttons appearing beneath the input field. This is always the case when the WYSIWYG editor is enabled, but you can also enable stacked mode without the WYSIWYG editor.
See also
-
For general information on Markdown in Unblu, refer to Markdown in Unblu.