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 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.
{* templates/website/{Theme}/views/account/domain-detail.tpl *}
{hook name='ui:client.domain_detail.hero.after'}
{hook name='ui:client.domain_detail.tabs.end'}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.
The listener
// 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
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.
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.
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.
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
Thanks for your feedback!
Our support team is here around the clock for anything you can't find above.