Simple Ajax Chat Pro (SAC Pro) provides several settings that make it possible to add custom content to display before and/or after the chat form. Also provides settings to add your own JavaScript and CSS styles. This tutorial shows how to do it easily.
Add custom content
To add custom content (like HTML and text) to your chat forms, visit the SAC Pro settings ▸ Appearance ▸ “Custom Content”.
There you will find four fields for adding your own content:
- Before Chat Box — add content before the chat box (where the chat messages are displayed)
- After Chat Box — add content after the chat box (where the chat messages are displayed)
- Before Chat Form — add content before the chat form (where users enter their name and message)
- After Chat Form — add content after the chat form (where users enter their name and message)
More attributes to customize your chat forms can be found in the SAC Pro shortcode reference.
Add custom JavaScript
To add your own custom JavaScript, visit the SAC Pro settings ▸ Appearance ▸ “Custom Script”.
Important: do not include any <script> tags in your code; the plugin adds them automatically when the code is output on the front end.
Add custom CSS
To add your own custom CSS, visit the SAC Pro settings ▸ Appearance ▸ “Custom Style”.
Important: do not include any <style> tags in your code; the plugin adds them automatically when the code is output on the front end.
Apply styles only to specific forms
To target specific forms, prepend your CSS selector with the following:
#sacpro_123..where 123 is the form ID to which styles should be applied.
For example, to style the input fields for all forms:
.sacpro-form-input { whatever: styles; }Then if you want to apply the styles only to a specific form, say form ID 123:
#sacpro_123 .sacpro-form-input { whatever: styles; }Simply change the 123 to your actual form ID and you’re good to go. Note that form IDs can be any alphanumeric value.
/css/sacpro-custom.css