Simple Ajax Chat Pro (SAC Pro) is lightweight and flexible, yet loaded with features and functionality. So there are tons of ways to customize and tweak things. This post is a working collection of tips and tricks, to help you get more from SAC Pro and dial in the perfect chat forms for your WordPress-powered site.

Tip: Just getting started with SAC Pro? Check out the Quick Start Guide »
Remember: SAC Pro is brand new at the time of this writing, so currently there are only a few tips. More will be added going forward, so grab the feed or check back for all the latest tips and tricks.

Disable the “Latest chat” message

To disable the “Latest chat” message (displayed at the top of each chat box), add this CSS to the SAC Pro setting, Appearance ▸ “Custom Style”:

.sacpro .sacpro-latest-message { display: none; }

Save changes and done.

Disable WordPress Emojis

By default, WordPress loads its own emoji scripts on your WordPress site. In some cases, the WordPress emojis can interfere with emojis included with plugins like SAC Pro. There shouldn’t be any issue or conflict with WP emojis and SAC emojis, but in some cases there may be issues. Fortunately, there is a sure-fire solution: simply install a “disable emojis” plugin such as Ryan Hellyer’s excellent Disable Emojis.

Also it may help to clear the browser cache and reload the page. Sometimes the issue is just that a previous script is still loading. So try force-refresh or clear cache should do the trick in such cases.

Change font size

Quick tip to change the default font-size for chat messages. Add the following CSS to the plugin setting, Appearance ▸ “Custom Style”.

#sacpro .sacpro-chat { line-height: 1.5; font-size: 20px; }

You can change the font-size and line-height to whatever makes sense for your chat form.

Change default “Message” label

By default, the message field in chat forms is labeled as “Message”. If you want to change that, add the following custom code.

function sacpro_text_label($label) {

	return 'Message'; // label for message field
}
add_filter('sacpro_text_label', 'sacpro_text_label');

The above code can be added via theme functions or simple plugin. Change Message to whatever is required. Note that this technique changes the message field name for both the label tag and placeholder attribute, just FYI.

Change date & time of chat messages

Although it shouldn’t be necessary, it is possible to customize the date and/or time of chat messages. Here is a quick example showing how to do it via filter hook:

function sacpro_current_time($time) { 
	
	$local_time = current_datetime();
	$current_time = $local_time->getTimestamp();
	
	return $current_time;
	
}
add_filter('sacpro_current_time', 'sacpro_current_time');

By default, the date/time for chat messages is determined via current_time('timestamp'), which is documented here at WordPress.org.

Increase height of chat window

To increase the height of the chat window, visit SAC Pro settings ▸ Appearance tab ▸ Custom Style, and add the following line:

#sacpro .sacpro-box-inner { height: 600px; }

Save changes and done. Of course, you will want to change the 600px to whatever height value works best for you.

Extra styles to help with narrow width screens

Out of the box, SAC Pro is designed to handle narrow/small screens and containers. Even so, depending on theme design and other factors, it may be necessary to add some further styles to keep chat messages readable and displaying properly. In such case, try adding the following CSS via the plugin’s Appearance ▸ “Custom Style” setting:

#sacpro .sacpro-box { min-width: 0; }

Save changes and done. Note this trick is not guaranteed to help in all cases, hopefully it gives you some ideas.

More tips & tricks on the way..

Stay tuned! :)