How to Customize the Joinchat Button Image and Animation

Many WordPress users who install the Joinchat plugin want to customize the appearance of the WhatsApp chat button to better match their site's branding. A common request is to control the button's image, specifically the looping animation that alternates between a custom image and the default WhatsApp icon.

This behavior is part of the plugin's default design to create a visual cue for visitors. However, the frequency of this animation or the desire to use a single, static image instead are frequent points of customization.

How to Stop the Image Animation (Use a Static Image)

If you prefer your uploaded image to remain static and never alternate with the default icon, you can achieve this with a small bit of Custom CSS. This is the most common solution for this request.

1. Navigate to your WordPress admin dashboard.
2. Go to Joinchat settings.
3. Click on the Advanced tab.
4. Locate the Custom CSS text field.
5. Paste the following CSS code into the field:
   .joinchat__button__image {
animation: none !important;
opacity: 1;
}
6. Save your changes. Your custom image will now remain permanently visible.

How to Change the Animation Speed

If you like the animation effect but find it too slow or too fast, you can adjust its timing. The default duration for a full animation cycle is 20 seconds.

1. Follow steps 1-4 above to access the Custom CSS field in Joinchat's Advanced settings.
2. Paste the following code, changing the 6s value to your desired duration (e.g., 10s for a slower animation).
   .joinchat--show .joinchat__button__image {
animation-duration: 6s;
}
3. Save your changes to see the new animation speed take effect.

These CSS modifications are provided by the Joinchat team and user community as a way to customize the plugin's appearance. For more advanced visual changes, such as completely replacing the button's default logo with any image, the functionality may be part of the plugin's premium offering. The techniques outlined here are effective for the majority of basic image-related customizations.