You may envision your chat looking differently than Weavy's Chat, and that's perfectly fine! The power of Weavy resides in its high level of customizability. This article will guide you through how to style Weavy Chat using the Server SDK.
You may envision your chat looking differently than Weavy's Chat, and that's perfectly fine! The power of Weavy resides in its high level of customizability. This article will guide you through how to style Weavy Chat using the Server SDK.
In Weavy.sln
, the views for Chat are located in Areas/Apps/Views/Messenger
and the styles are located at Areas/Apps/Styles/messenger.scss
, Areas/Apps/Styles/_messenger_modal.scss
, and Areas/Apps/Styles/_emojionearea.scss
.
Depending on what you are trying to style, you will be editing different views.
The diagrams below indicate which view corresponds to which area of the Chat.
Red - Areas/Apps/Views/Messenger/Messenger.cshtml
Orange - Areas/Apps/Views/Messenger/_Conversation.cshtml
Yellow - Areas/Apps/Views/Messenger/_Messages.cshtml
Green - Areas/Apps/Views/Messenger/_Message.cshtml
Blue - Areas/Apps/Views/Messenger/_MessageForm.cshtml
Areas/Apps/Views/Messenger/_MessageModal.cshtml
Purple - Areas/Apps/Views/Messenger/_User.cshtml
Pink - Areas/Apps/Views/Messenger/_Profile.cshtml
Lots of Weavy UI components are accessible at https://{your-server-domain}/test
. You are welcome to use anything and everything as you see fit to create the perfect chat for your application.