Website Builder > Preview URL Modifier
Preview URL Modifier
Learn how to inject custom query parameters into Website Builder's live preview URLs.
- what the PreviewUrlModifier extension point is and where it applies
- how to implement and register a custom preview URL modifier
- how to use async operations (e.g. fetching a signed token) inside a modifier
Overview
Every live preview URL that Website Builder generates — in the page editor iframe, the address bar’s copy link button, and the pages list — can be customized via the PreviewUrlModifier extension point.
When registered, the modifier receives the fully-constructed URL object just before it is used. You can add, remove, or change any query parameter, including ones fetched asynchronously from a remote API.
Only one PreviewUrlModifier can be registered per project. Avoid setting parameters that start with wb. — those are reserved for internal Website Builder use.
Implement the Modifier
Create a class that implements PreviewUrlModifier.Interface. The single required method is modify(url: URL): Promise<void>. Mutate the url object in place — the return value is ignored.
Async Example — Fetching a Signed Token
Mark the method async to perform any async work before the URL is handed back:
Register the Feature
Wire the implementation into the DI container using createFeature and RegisterFeature:
Then register the extension in webiny.config.tsx:
Where the Modifier Applies
| Surface | Description |
|---|---|
| Editor iframe | The live-editing iframe in the page editor |
| Address bar link | The “copy preview link” button in the editor toolbar |
| Pages list | Preview icon links in the pages list table |