Message Button Device Visibility

This guide explains how to control the visibility of the WSMS Message Button on different devices using CSS.

Show Only on Mobile

To display the message button only on mobile devices:

1. Go to Appearance → Customize
2. Select Additional CSS
3. Add this code:

.wpsms-chatbox {
    display: none !important;
}

@media only screen and (max-width: 600px) {
    .wpsms-chatbox {
        display: block !important;
    }
}

4. Click Publish

Show Only on Desktop

To display the message button only on desktop devices:

.wpsms-chatbox {
    display: block !important;
}

@media only screen and (max-width: 600px) {
    .wpsms-chatbox {
        display: none !important;
    }
}

Adjusting the Breakpoint

The 600px width is a common breakpoint for mobile devices. Adjust this value to match your theme’s responsive design requirements.

Related

• Message Button Settings - Configure the message button