skills.rest
webiny
webinyOFFICIAL
Explore all skills by this author →
Website𝕏@WebinyCMSGitHub

wb-preview-url-modifier

Injects custom query parameters into Website Builder live preview URLs.

8.0k|673|Updated Jan 9, 2018
Search Tags:#extension#website builder#typeScript#Dependency Injection#preview url#webiny#query parameters
One-click install
npx skills add https://github.com/webiny/webiny-js --skill wb-preview-url-modifier
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wb-preview-url-modifier
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/admin/website-builder/wb-preview-url-modifier
Command: npx skills add https://github.com/webiny/webiny-js --skill wb-preview-url-modifier

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When building sites with Webiny Website Builder, live preview URLs often need extra query parameters — signed tokens, tenant identifiers, or feature flags — that the platform does not add by default. This Skill shows how to implement and register a PreviewUrlModifier so every preview URL carries the parameters your project requires.

Core Features & Use Cases

  • Custom Parameter Injection: Implement the PreviewUrlModifier interface to mutate the preview URL's searchParams with any key-value pairs.
  • Async Modifier Support: Fetch remote values, such as a signed token from an API, inside an async modify method before the URL is used.
  • Full Registration Pattern: Wire the implementation through createFeature, RegisterFeature, and webiny.config.tsx so it applies to the editor iframe, the copy-preview-link button, and pages list preview icons.
  • Use Case: A multi-tenant project needs each preview link to carry a tenant identifier and a short-lived signed token so the frontend can authorize the preview request.

Quick Start

Ask the AI to implement a PreviewUrlModifier that adds a custom query parameter to all Website Builder preview URLs and register it in webiny.config.tsx.

Frequently Asked Questions about wb-preview-url-modifier

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add custom query parameters to Webiny Website Builder preview URLs?▼

Implement the PreviewUrlModifier interface from webiny/admin/website-builder and mutate the url.searchParams inside the modify method. Then register the implementation with createFeature and RegisterFeature, and reference it in webiny.config.tsx via Admin.Extension.

Can the preview URL modifier fetch a token asynchronously?▼

Yes, the modify method can be declared async, so you can await a remote call such as fetching a signed token from an API before setting it as a query parameter. The URL is only used after the method completes.

Where do modified preview URLs apply in Website Builder?▼

The modifier applies to the live-editing iframe in the page editor, the copy preview link button in the editor toolbar, and the preview icon links in the pages list table.

Can I register multiple PreviewUrlModifier implementations?▼

No, only one modifier is supported per project. Only the first registered implementation is used, so consolidate all parameter logic into a single class.

Why is my custom preview parameter being ignored?▼

Parameters prefixed with wb. are reserved for internal use and should not be set by custom modifiers. Also verify the feature is registered in webiny.config.tsx and that you mutate the URL object in place, since the return value is ignored.

Related Skills

Explore More Software Engineering Skills→
fycd2006fycd2006

admin-developer

Build and wire admin features with React views, DI, and MobX.

Community
Advanced
jrc1883jrc1883

cloudflare-pages-deploy

Deploy frontend projects to Cloudflare Pages with framework auto-detection.

Community
Advanced
warpdotdevwarpdotdev
64.7k

gui-settings-ui

Guides building Warp GUI settings pages with correct widget filtering and search behavior.

Official
Intermediate
AgentientAgentient
2

firebase-authentication-patterns

Implement Firebase Authentication flows with Google OAuth and cookie-based session management.

Official
Advanced