# Customer Service Screen Hooks
https://dev.wisecp.com/es/client-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
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.hero.actions.end', 10, function () {
return 'Acme
';
});
```
### The end of the tab bar
uiclient.service_detail.tabs.end
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.tabs.end', 10, function () {
return 'Acme
';
});
```
### The end of the tab panes
uiclient.service_detail.panes.end
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.panes.end', 10, function () {
return 'Acme
';
});
```
### Above the overview
uiclient.service_detail.overview.before
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.overview.before', 10, function () {
return 'Acme
';
});
```
### Below the overview
uiclient.service_detail.overview.after
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.overview.after', 10, function () {
return 'Acme
';
});
```
### After the resource gauges
uiclient.service_detail.overview.gauges.after
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.overview.gauges.after', 10, function () {
return 'Acme
';
});
```
### Above the quick actions
uiclient.service_detail.overview.quick_actions.before
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.overview.quick_actions.before', 10, function () {
return 'Acme
';
});
```
### After the quick actions
uiclient.service_detail.overview.quick_actions.after
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.overview.quick_actions.after', 10, function () {
return 'Acme
';
});
```
### After the panel link on the overview
uiclient.service_detail.overview.sso.after
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.overview.sso.after', 10, function () {
return 'Acme
';
});
```
### The top of the management tab
uiclient.service_detail.management.top
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.management.top', 10, function () {
return 'Acme
';
});
```
### After the panel link on the management tab
uiclient.service_detail.management.sso.after
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.management.sso.after', 10, function () {
return 'Acme
';
});
```
### The end of the modals
uiclient.service_detail.modals.end
`website/services/detail` no parameters
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 PHP
```php
Hook::add('ui:client.service_detail.modals.end', 10, function () {
return 'Acme
';
});
```
### The top of the service list
uiclient.services_list.top
`website/services` no parameters
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 PHP
```php
Hook::add('ui:client.services_list.top', 10, function () {
return 'Acme
';
});
```
### After the summary tiles
uiclient.services_list.tiles.after
`website/services` no parameters
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 PHP
```php
Hook::add('ui:client.services_list.tiles.after', 10, function () {
return 'Acme
';
});
```
### Above the service dashboard
uiclient.service_dashboard.before
`website/services` no parameters
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 PHP
```php
Hook::add('ui:client.service_dashboard.before', 10, function () {
return 'Acme
';
});
```
### Below the service dashboard
uiclient.service_dashboard.after
`website/services` no parameters
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 PHP
```php
Hook::add('ui:client.service_dashboard.after', 10, function () {
return 'Acme
';
});
```
### The bottom of the service configuration
uiclient.service_config.bottom
`website/services` no parameters
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 PHP
```php
Hook::add('ui:client.service_config.bottom', 10, function () {
return 'Acme
';
});
```
### The transfer approval page
uiclient.service_transfer_approve.body
`website/services` no parameters
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 PHP
```php
Hook::add('ui:client.service_transfer_approve.body', 10, function () {
return 'Acme
';
});
```
## 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](https://dev.wisecp.com/en/hooks-on-the-customer-site)
- [Customer Service and Message Hooks](https://dev.wisecp.com/en/client-service-and-message-hooks)
- Domain Hooks