> For the complete documentation index, see [llms.txt](https://alhena.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alhena.gitbook.io/docs/developer-reference/website-sdk/examples/custom-launcher-nudge.md).
# Custom Launcher & Nudge UI
This example shows how to hide Alhena's default launcher button and nudge UI and render **your own** in their place — while still being driven by the same standard [nudge](/docs/features/chat-widget/nudges.md) logic (page matching, timer/scroll triggers, dismissal rules) configured in your dashboard.
This is useful when you want the chat entry point and proactive prompts to match your site's design system exactly, while keeping the targeting and behavior managed in Alhena.
## What You'll Learn
* Hide the built-in launcher and nudge with the [`hideDefaultUI`](/docs/developer-reference/website-sdk/javascript-api.md#configuration-options-reference) config option
* Build a custom launcher button that opens/closes the widget with [`toggle()`](/docs/developer-reference/website-sdk/javascript-api.md#toggle-options)
* Render a custom nudge from the [`nudge:loaded`](/docs/developer-reference/website-sdk/events.md#nudge-loaded), [`nudge:triggered`](/docs/developer-reference/website-sdk/events.md#nudge-triggered), and [`nudge:hidden`](/docs/developer-reference/website-sdk/events.md#nudge-hidden) events
* Run the standard nudge click behavior from your own UI with [`clickNudge()`](/docs/developer-reference/website-sdk/javascript-api.md#clicknudge)
## How It Works
| Piece | Role |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `hideDefaultUI: true` | Hides Alhena's default launcher button **and** nudge UI. The nudge events still fire. |
| `nudge:loaded` | Fires when a nudge is matched for the current page — use it to populate (but keep hidden) your custom nudge. |
| `nudge:triggered` | Fires when the standard show logic activates (timer elapsed / scroll threshold met, widget closed, not dismissed) — reveal your nudge here. |
| `nudge:hidden` | Fires when the nudge should come down (dismissed, chat opened, FAQ widget used, page no longer matches) — hide your nudge here. |
| `clickNudge()` | Runs the same analytics + open-conversation behavior as the built-in nudge, so your custom nudge behaves identically. |
{% hint style="info" %}
Register your event handlers inside a [`widget:loaded`](/docs/developer-reference/website-sdk/events.md#widget-loaded) handler (or after the SDK `