Styling Chat | Chat API & SDK

Introduction

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.

Server SDK Layout

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.

Chat Layout

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

sidebar_chat-1

message_chat

Areas/Apps/Views/Messenger/_MessageModal.cshtml

add_chat

Purple - Areas/Apps/Views/Messenger/_User.cshtml

Pink - Areas/Apps/Views/Messenger/_Profile.cshtml
profile_modal

Weavy UI Components

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.