How to Style the Chat Widget

The Yappy chat widget has two states, a minimized and maximized state. Both statesare drag-able.

Alternatively, if you have purchased an SMS number through Yappy, you can enable the text-us widget, which is also customizeable.

Minimized State

Small Widget smallwidget-preview

The minimized state is the default mode displayed when a user first visits your website. By clicking on the widget, the user can expand the widget into the maximized state.

If the user receives a new message from while the widget is minimized, a message preview pane will expand to show the new message, and an unread bubble counter will show the # of unread messages.

Styles for the widget can be found by interrogating the widget with the dev tools available in your browser of choice. All markup styles are pulled from https://www.yappy.im/deploy/chatwidget.css

How to style

To override any styles for the minimized state, simply choose the element you want to re-style and prepend the CSS property with .yappy-chatwidget-container

Let’s say you want to change the green circle around the chat widget logo to red, you can do:

.yappy-chatwidget-container .yappy-chatwidget-avatar{
background-color: red;
}

unnamed

Maximized State

largewidget

The maximized state can be docked to either the left or the right side of the user’s screen.

How to style

To override any styles for the maximized state, simply choose the element you want to re-style and prepend the CSS property with .yappy-chatwidget-full-container

Let’s say you want to change the green circle around the chat widget logo to red, you can do:

.yappy-chatwidget-full-container .yappy-chatwidget-full-body{
background-color: yellow;
}
unnamed-1

Text-us State

capture

The text-us widget is visible if your business has an SMS # from Yappy and has the widget enabled in the widget settings page. The text-is widget is only displayed on phones and is shown instead of the chat widget.

To test the text-us widget, either navigate to a URL where you have the Yappy chat widget enabled with a mobile phone, or by using dev tools / phone emulator in Chrome or another browser.

Leave A Comment?