--- updatedAt: 2026-05-28T21:20:25.000Z agentTools: projectIndex: https://docs.pelcro.com/llms.txt --- # URL Triggers Open modals and trigger actions using URL query parameters # URL Triggers ## Overview URL triggers allow you to open specific modals and initiate user flows by adding query parameters **or hash fragments** to any page URL. This feature enables deep linking to authentication flows, subscription purchases, and account management screens. **Basic examples:** * Query parameter: `https://yoursite.com/?view=login` * Hash fragment: `https://yoursite.com/#view=login` `NEW` Both formats are supported. **Query parameters take precedence** if both are present in the same URL. ## Hash Fragment Support URL triggers now support **hash fragments** (`#view=...`) as an alternative to query parameters (`?view=...`). This provides additional flexibility for single-page applications and specific use cases. ### Key Features > 🆕 **Multiple Format Support:** > > * Query parameters: `?view=login&plan_id=456` > * Hash fragments: `#view=login&plan_id=456` `NEW` > * Query parameters take precedence over hash fragments > 🆕 **Dynamic Re-triggering:** > > Hash-based triggers support dynamic re-triggering without page reload through the `hashchange` event. This is particularly useful for single-page applications (SPAs) where you want to trigger modals multiple times without full page refreshes. > 🆕 **Automatic Hash Cleanup:** > > After processing hash-based triggers, the hash parameters are automatically cleared from the URL. This enables re-triggering the same view by changing the hash again. > 🆕 **Mixed Format Support:** > > Parameters can be combined within the hash fragment using the same query string syntax: > > ``` > https://yoursite.com/#view=plan-select&product_id=123&plan_id=456 > ``` ### When to Use Hash Fragments vs Query Parameters **Use hash fragments when:** * Building single-page applications (SPAs) that need dynamic modal triggering * You want to trigger the same modal multiple times without page reload * You need to avoid server-side processing of the trigger parameters * Working with client-side routing frameworks **Use query parameters when:** * Building traditional multi-page applications * You need server-side access to trigger parameters * SEO considerations are important for the triggered content * You want the most straightforward implementation ## Available Triggers | Trigger | Hash Alternative | Description | Parameters | | ----------------------------- | ----------------------------- | --------------------------------------------------------- | ---------------------------------- | | `?view=login` | `#view=login` | Opens the login modal | — | | `?view=register` | `#view=register` | Opens the registration modal | `plan_id` | | `?view=plan-select` | `#view=plan-select` | Opens subscription plan selection | `product_id`, `plan_id`, `is_gift` | | `?view=password-forgot` | `#view=password-forgot` | Opens the forgot password modal | — | | `?view=password-reset` | `#view=password-reset` | Opens the password reset modal | — | | `?view=password-change` | `#view=password-change` | Opens the password change modal (requires authentication) | — | | `?view=passwordless-request` | `#view=passwordless-request` | Opens passwordless login request | — | | `?view=passwordless-login` | `#view=passwordless-login` | Completes passwordless authentication | `token` (required) | | `?view=email-verify` | `#view=email-verify` | Verifies email address | `token` (required) | | `?view=user-edit` | `#view=user-edit` | Opens user profile editor | — | | `?view=address-create` | `#view=address-create` | Opens address creation modal | — | | `?view=payment-method-update` | `#view=payment-method-update` | Opens payment method editor | `source_id` (int), `list` | | `?view=newsletter` | `#view=newsletter` | Opens newsletter subscription modal | — | | `?view=newsletter-update` | `#view=newsletter-update` | Opens newsletter preferences editor | `email` | | `?view=gift-redeem` | `#view=gift-redeem` | Opens gift redemption modal | `gift_code` | | `?view=invoice-details` | `#view=invoice-details` | Opens invoice details | `id` (required) | | `?view=manage-members` | `#view=manage-members` | Opens subscription member management | `subscription_id` (required) | | `?view=cart` | `#view=cart` | Opens shopping cart | `sku_id` | | `?view=order-create` | `#view=order-create` | Starts e-commerce checkout | `sku_id` | ## Dashboard Views In addition to the modal triggers above, you can deep-link directly into any section of the authenticated **My Account / Dashboard** by using these `?view=` params. If the user is **not logged in**, the login modal opens first and the user is automatically redirected to the requested dashboard view after successful authentication — no manual navigation required. | Trigger | Hash Alternative | Dashboard Section | | ----------------------- | ----------------------- | ---------------------- | | `?view=subscriptions` | `#view=subscriptions` | My Subscriptions | | `?view=orders` | `#view=orders` | Orders | | `?view=invoices` | `#view=invoices` | Invoices | | `?view=memberships` | `#view=memberships` | Memberships | | `?view=profile` | `#view=profile` | Profile | | `?view=profile-picture` | `#view=profile-picture` | Profile Picture | | `?view=password-change` | `#view=password-change` | Password Change | | `?view=payment-cards` | `#view=payment-cards` | Payment Cards | | `?view=addresses` | `#view=addresses` | Addresses | | `?view=newsletters` | `#view=newsletters` | Newsletter Preferences | | `?view=donations` | `#view=donations` | Donations | | `?view=gifts` | `#view=gifts` | Gifts | | `?view=saved-items` | `#view=saved-items` | Saved Items | | `?view=qr-code` | `#view=qr-code` | QR Code | **Common use case — renewal email:** ``` https://yoursite.com/?view=subscriptions ``` A subscriber clicking this link from a renewal email lands on the login modal (if signed out), authenticates, and is taken straight to their subscriptions view — eliminating the friction of manual navigation. **Note:** `?view=password-change` also appears in the modal list above. When called from an unauthenticated context it opens the password-change modal; when used as a dashboard trigger it opens the dashboard's password-change view after login. ## Use Cases with Examples **Direct Subscription from Marketing Campaigns** ``` Query parameter: https://yoursite.com/?view=plan-select&product_id=123&plan_id=456 Hash fragment: https://yoursite.com/#view=plan-select&product_id=123&plan_id=456 ← NEW ``` **Gift Subscription Promotion** ``` Query parameter: https://yoursite.com/?view=plan-select&product_id=123&plan_id=456&is_gift=true Hash fragment: https://yoursite.com/#view=plan-select&product_id=123&plan_id=456&is_gift=true ← NEW ``` **Gift Code Redemption Links** ``` Query parameter: https://yoursite.com/?view=gift-redeem&gift_code=HOLIDAY2024 Hash fragment: https://yoursite.com/#view=gift-redeem&gift_code=HOLIDAY2024 ← NEW ``` **Email Verification from Transactional Emails** ``` Query parameter: https://yoursite.com/?view=email-verify&token=abc123xyz Hash fragment: https://yoursite.com/#view=email-verify&token=abc123xyz ← NEW ``` **Passwordless Login from Magic Link Emails** ``` Query parameter: https://yoursite.com/?view=passwordless-login&token=xyz789abc Hash fragment: https://yoursite.com/#view=passwordless-login&token=xyz789abc ← NEW ``` **Pre-filled Shopping Cart from Promotions** ``` Query parameter: https://yoursite.com/?view=cart&sku_id=32,33,34 Hash fragment: https://yoursite.com/#view=cart&sku_id=32,33,34 ← NEW ``` **One-click Checkout for Single Products** ``` Query parameter: https://yoursite.com/?view=order-create&sku_id=33 Hash fragment: https://yoursite.com/#view=order-create&sku_id=33 ← NEW ``` **Invoice Links in Billing Emails** ``` Query parameter: https://yoursite.com/?view=invoice-details&id=999 Hash fragment: https://yoursite.com/#view=invoice-details&id=999 ← NEW ``` **Team Management from Admin Notifications** ``` Query parameter: https://yoursite.com/?view=manage-members&subscription_id=555 Hash fragment: https://yoursite.com/#view=manage-members&subscription_id=555 ← NEW ``` **Update Payment Method from Failed Payment Emails** ``` Query parameter: https://yoursite.com/?view=payment-method-update&source_id=123 Hash fragment: https://yoursite.com/#view=payment-method-update&source_id=123 ← NEW ``` **Newsletter Preference Center Links** ``` Query parameter: https://yoursite.com/?view=newsletter-update&email=user@example.com Hash fragment: https://yoursite.com/#view=newsletter-update&email=user@example.com ← NEW ``` **Login Prompts on Gated Content** ``` Query parameter: https://yoursite.com/?view=login Hash fragment: https://yoursite.com/#view=login ← NEW ``` **Registration Links in Marketing Materials** ``` Query parameter: https://yoursite.com/?view=register Hash fragment: https://yoursite.com/#view=register ← NEW ``` **Password Reset from Support Interactions** ``` Query parameter: https://yoursite.com/?view=password-forgot Hash fragment: https://yoursite.com/#view=password-forgot ← NEW ``` **Campaign Attribution Tracking** ``` Query parameter: https://yoursite.com/?view=plan-select&product_id=123&plan_id=456&campaign_key=SUMMERPROMO Hash fragment: https://yoursite.com/#view=plan-select&product_id=123&plan_id=456&campaign_key=SUMMERPROMO ← NEW ``` ## Legacy Aliases For backward compatibility, these aliases are automatically converted: | Legacy | Hash Alternative | Converted To | | --------------- | ---------------- | ---------------- | | `?view=select` | `#view=select` | `plan-select` | | `?view=redeem` | `#view=redeem` | `gift-redeem` | | `?view=address` | `#view=address` | `address-create` |
# Sibling pages * [User Interface Showcase](https://docs.pelcro.com/docs/showcase.md) * [Style Overrides](https://docs.pelcro.com/docs/style-overrides.md) * [eCommerce](https://docs.pelcro.com/docs/ecommerce-ui.md) * [React Elements](https://docs.pelcro.com/docs/react-elements.md) * [User Interface Release Notes](https://docs.pelcro.com/docs/ui-changelog.md)