Website Builder: Preview URL Modifier

Website Builder: Preview URL Modifier

TL;DR

PreviewUrlModifier is a DI extension point that lets project developers inject custom query parameters into all Website Builder live preview URLs. Register one implementation; it receives the full URL object and can mutate it however it needs — including async operations like fetching a signed token from a remote API.

Implement the Modifier

Import from webiny/admin/website-builder. The single required method is modify(url: URL): Promise<void> — mutate url.searchParams in place, mark the method async when you need to fetch remote values.

import { PreviewUrlModifier } from "webiny/admin/website-builder";

class MyPreviewUrlModifier implements PreviewUrlModifier.Interface {
  async modify(url: URL) {
    url.searchParams.set("my-param", "my-value");
  }
}

export default PreviewUrlModifier.createImplementation({
  implementation: MyPreviewUrlModifier,
  dependencies: []
});

Async example — fetching a signed token:

class SignedTokenModifier implements PreviewUrlModifier.Interface {
  async modify(url: URL) {
    const token = await fetch("/api/preview-token").then(r => r.text());
    url.searchParams.set("token", token);
  }
}