Customer Service Screen Hooks
The eighteen placement points of the service detail, list and dashboard.
Overview
The placement points on the customer service screens live here: the detail tabs, the resource gauges, the quick actions and the dashboards.
Adding a tab takes two points together: the label goes on the tab bar and the content at the end of the panes. Using only one leaves half a tab.
Reference
The end of the hero actions
uiclient.service_detail.hero.actions.end
Appears at the end of the action buttons in the hero block of the service 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.service_detail.hero.actions.end', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The end of the tab bar
uiclient.service_detail.tabs.end
Appears at the end of the tab bar on the service 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.service_detail.tabs.end', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The end of the tab panes
uiclient.service_detail.panes.end
Appears at the end of the tab panes. The content of a tab you added to the bar goes here: the two are used together.
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.service_detail.panes.end', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Above the overview
uiclient.service_detail.overview.before
Appears at the very top of the overview tab.
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.service_detail.overview.before', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Below the overview
uiclient.service_detail.overview.after
Appears at the very bottom of the overview tab.
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.service_detail.overview.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the resource gauges
uiclient.service_detail.overview.gauges.after
Appears after the disk and traffic gauges. The place to add a resource measure of your own.
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.service_detail.overview.gauges.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Above the quick actions
uiclient.service_detail.overview.quick_actions.before
Appears above the quick action buttons.
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.service_detail.overview.quick_actions.before', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the quick actions
uiclient.service_detail.overview.quick_actions.after
Appears after the quick action buttons. It puts an action of your own beside the core ones.
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.service_detail.overview.quick_actions.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the panel link on the overview
uiclient.service_detail.overview.sso.after
Appears after the remote panel link on the overview.
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.service_detail.overview.sso.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The top of the management tab
uiclient.service_detail.management.top
Appears above the remote panel tools.
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.service_detail.management.top', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the panel link on the management tab
uiclient.service_detail.management.sso.after
Appears after the remote panel link on the management tab.
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.service_detail.management.sso.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The end of the modals
uiclient.service_detail.modals.end
Appears at the end of the modals on the page.
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.service_detail.modals.end', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The top of the service list
uiclient.services_list.top
Appears at the very top of the customer service 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.services_list.top', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});After the summary tiles
uiclient.services_list.tiles.after
Appears after the summary tiles above the 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.services_list.tiles.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Above the service dashboard
uiclient.service_dashboard.before
Appears above the service-specific dashboard.
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.service_dashboard.before', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Below the service dashboard
uiclient.service_dashboard.after
Appears below the service-specific dashboard.
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.service_dashboard.after', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The bottom of the service configuration
uiclient.service_config.bottom
Appears at the bottom of the service configuration screen.
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.service_config.bottom', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});The transfer approval page
uiclient.service_transfer_approve.body
Appears in the body of the service transfer approval page. That page can open for somebody not signed in: whoever approves the transfer may have no account.
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.service_transfer_approve.body', 10, function () {
return '<div class="alert alert-info">Acme</div>';
});Pitfalls
Adding a tab takes two points
Put a label on the tab bar and skip the pane point and the customer sees a tab that is empty when clicked. Use both, and give them the same identifier.
The transfer approval page can open without a sign-in
Whoever approves a service transfer may hold no account at all. Anything tied to a session comes out empty on that page, and showing customer details there opens them to somebody you cannot identify.
Related Articles
- Customer Site Hooks
- Customer Service and Message Hooks
- Domain Hooks
War das hilfreich?
Vielen Dank für Ihre Rückmeldung!
Brauchen Sie weitere Hilfe?
Unser Support-Team ist rund um die Uhr für Sie da, wenn Sie oben nicht fündig werden.