Share on facebook
Share on twitter
Share on linkedin

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.