Customer Support Screen Hooks
The fourteen placement points of the ticket list, form and conversation.
Overview
The placement points on the customer support screens live here: the list, the new ticket form, the conversation and the reply box.
Two points run for every row: each message in the conversation and each ticket in the list. Heavy work in those slows the page noticeably.
Reference
Above the ticket list
uiclient.ticket_list.before
Appears above the customer ticket list.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_list.before', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The ticket list actions
uiclient.ticket_list.actions
Appears in the action area of the list header.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_list.actions', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The top of the ticket form
uiclient.ticket_create.form.top
Appears above the new ticket form. It suits a notice that should be read before opening one.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_create.form.top', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the form fields
uiclient.ticket_create.fields.after
Appears after the fields on the ticket form. If you add a field of your own here, you must handle the submitted value yourself.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_create.fields.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the ticket form
uiclient.ticket_create.form.bottom
Appears below the ticket form.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_create.form.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the ticket form sidebar
uiclient.ticket_create.sidebar.bottom
Appears at the bottom of the column beside the ticket form.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_create.sidebar.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The top of the ticket sidebar
uiclient.ticket_detail.sidebar.top
Appears at the top of the side column on the ticket detail.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_detail.sidebar.top', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the ticket sidebar
uiclient.ticket_detail.sidebar.bottom
Appears at the bottom of the side column.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_detail.sidebar.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The ticket action area
uiclient.ticket_detail.actions
Appears in the action area of the ticket detail.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_detail.actions', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The top of the conversation
uiclient.ticket_detail.thread.top
Appears above the reply thread.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_detail.thread.top', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the conversation
uiclient.ticket_detail.thread.bottom
Appears below the reply thread.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_detail.thread.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The top of the reply form
uiclient.ticket_detail.reply_form.top
Appears above the customer reply box.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_detail.reply_form.top', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the reply form
uiclient.ticket_detail.reply_form.bottom
Appears below the reply box.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_detail.reply_form.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After a single message
uiclient.ticket_message.body.after
Appears after every message in the conversation, separately. The message itself is not passed, so you cannot tell which one it is.
Parameters 0
—It takes no parameters.
Return 1
string|nullThe HTML you return appears. With several listeners the outputs are appended one after another in priority order. Empty text,
null and false are skipped, so return null when you have nothing to add. The output enters the page unescaped — clean anything coming from outside yourself.
Listener
Hook::add('ui:client.ticket_message.body.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Pitfalls
The message point runs on every message
The message point in the conversation is called separately for every message in the thread. On a long ticket that means dozens of calls, and a listener querying inside it slows the page markedly.
A form field you add is not saved by itself
A field you put on the ticket form is only visible. To handle the submitted value you must also listen on the matching hook; otherwise the customer fills it in and the value disappears.
Related Articles
- Customer Site Hooks
- Order Hooks
- Support Ticket Hooks
Was this helpful?
Thanks for your feedback!
Still Need Help?
Our support team is here around the clock for anything you can't find above.