fbpx

CSS Tricks for Join.chat

How to customize Join.chat using CSS styles

Change the look of Join.chat by adding some styles in your theme’s stylesheet or from Appearance> Customize> Additional CSS

You can combine several styles:

.joinchat {
 --bottom: 80px;
 --btn: 52px;
}

To apply the changes only on mobile devices use “media queries”:

@media (max-width: 480px), (orientation: landscape) and (max-width: 767px) {
 .joinchat {
 --bottom: 80px;
 --btn: 52px;
 }
}

👆 Raising the Floating Button

/* defaults: desk 20px, mobile 6px */
.joinchat {
 --bottom: 80px;
}

🤏 Resize the float button

/* default: 60px */
.joinchat {
 --btn: 50px;
}

☝️ Putting Join.chat above other objects

/* default: 1000 */
.joinchat {
 z-index: 99999; 
}

📏 Changing the height of the chat header

/* defaults: desk 70px, mobile 55px */
.joinchat {
 --header: 60px;
}

🎨 Change the color of the floating button

/* default: #25d366; */
.joinchat__button {
 background-color: #999;
}

🍪 We use cookies to personalize and enhance your experience on our site. Visit our Privacy Policy to learn more.

BY USING OUR SITE, YOU AGREE TO OUR USE OF COOKIES.