By default, Simple Ajax Chat Pro (SAC Pro) chat forms display messages in descending order, so the latest chats appear at the top of the chat box. This quick tutorial shows to change the chat order for all forms or specific forms only. It also shows how to change the field order, which determines the order in which the chat box and form are displayed on the page.

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

Customize chat order

To set the default (global) chat order, visit the SAC Pro settings ▸ Appearance ▸ “Chat Order”.

To set the chat order for a specific form, add the chat_order attribute to the [sacpro] shortcode:

[sacpro form_id="123" chat_order="asc"]

You can set chat_order to either asc (messages displayed from top to bottom), or desc (messages displayed bottom to top).

More attributes to customize your chat forms can be found in the SAC Pro shortcode reference.

Tip: By default, chat forms are designed responsively and display horizontally or vertically depending on available screen size. While that is optimal for most cases, it’s also possible to style chat forms always to display vertically.
Disable scroll

By default, when chat_order is set to asc, the chat box scrolls automatically to the bottom of the window, so the latest message always is in view. To disable the automatic scrolling, you can add the disable_scroll attribute like so:

[sacpro form_id="123" chat_order="asc" disable_scroll="true"]

You can set the default (global) field order in the SAC Pro settings ▸ Appearance ▸ “Autoscroll”.

More attributes to customize your chat forms can be found in the SAC Pro shortcode reference.

Customize the field order

To set the default (global) field order, visit the SAC Pro settings ▸ Appearance ▸ “Field Order”.

To set the field order for a specific form, add the field_order attribute to the [sacpro] shortcode:

[sacpro form_id="123" field_order="true"]

You can set field_order to either true (chat box and form displayed in reverse order), or false (chat box and form displayed normally, with chat box appearing first in the markup).