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.

Tip: Just getting started with SAC Pro? Check out the Quick Start Guide »

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.