# Hooks on the Customer Site

https://dev.wisecp.com/es/hooks-on-the-customer-site

The 156 places on the customer-facing site that take your own HTML. Where they sit, how the names read, and what the return has to be.

## Overview

The customer site holds **156** screen hooks and they all do one job. The HTML you return appears where that point sits in the template.

The hooks are placed inside theme templates with a `{hook}` tag. Measured: all three shipped themes carry **the same 154 calls**, so changing theme does not drop your listeners.

The return contract is one kind throughout. Non-empty string returns are joined in order and shown; empty and `null` returns are skipped.

## Structure

A name is three parts: the family, the screen, the spot. The last part says **where** on the screen the point falls.

```twig
{* templates/website/{Theme}/views/account/domain-detail.tpl *}
{hook name='ui:client.domain_detail.hero.after'}
{hook name='ui:client.domain_detail.tabs.end'}
```

- **after**: Right after a section. **46**
- **bottom**: The foot of a section, still inside it. **34**
- **top**: The head of a section. **31**
- **end**: After the last item of a list or a strip. **17**
- **before**: Right before a section. **10**

## Reference

How the points spread across the screens. The domain and service details are the richest, and an add-on's customer-facing side is usually built there.

- **account/domain-detail (22)**: The domain detail
- **account/service-detail (11)**: The service detail
- **account/ticket-detail (7)**: The ticket detail
- **account/settings (5)**: Account settings
- **account/domains (5)**: The domain list
- **account/invoice-detail (4)**: The invoice detail
- **account/ticket-create (4)**: The new ticket form
- **products/detail (4)**: The product page
- **checkout/* (8)**: Cart, configure, pay, order done
- **content/* (15)**: Knowledge base, blog, contact, add-on pages
- **auth/* (3)**: Password reset and invitation screens
- **partials + layouts (13)**: Header, footer, checkout shell, page body

### The listener

```php
// Most screen hooks take NO parameters: the name tells you which screen you are on.
Hook::add('ui:client.domain_detail.hero.after', 10, function () {
    if (!AcmeBanner::active()) return null;          // touch nothing
    return '<div class="alert alert-info">' . AcmeBanner::text() . '</div>';
});
```

## Pitfalls

> **The HTML you return is not escaped**
> 
> These points take **raw HTML**. Embedding a value straight from the customer, the address bar or the database injects code into the site. **Escape** every outside piece yourself; the hook will not do it for you.

> **Your own theme has to carry the hooks**
> 
> The hooks live inside theme templates. The three shipped themes carry the same calls, and **a theme you write from scratch** carries only the points you put in it. An add-on not showing on the site is often a missing **theme** point rather than a missing hook.

> **The spot you pick can break the layout**
> 
> One point sits inside a box and another outside it. Dropping a full-width block into a grid shifts the page. The last part of the name says where it falls, and the way to be sure is **opening the template at that line**; the hook's entry gives the file and the line.

> **An empty return is the clean way out**
> 
> Return `null` where you have nothing to add: empty returns are skipped and leave no trace. Returning an empty `<div>` instead opens a real gap in the grid.

## Related Articles

- [Customer Site Data and Gates](https://dev.wisecp.com/en/customer-site-data-and-gates)
- [Hooks in the Management Panel](https://dev.wisecp.com/en/hooks-in-the-management-panel)
- [Writing a Hook Listener](https://dev.wisecp.com/en/writing-a-hook-listener)