> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sample Flows

## Article: Sample Flows

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/pages-and-navigation/url/sample-flows.md

## Article Content:

# URL API: Sample Flows

This article presents possible use cases and corresponding sample flows that you can support. It provides a useful starting point as you plan your implementation.

## Build a link to a page owned by an app

To build a link to a page owned by an app, follow these steps:

1. Choose the ID of the app that owns the page, and the page's app page ID, such as `book_checkout` for the Bookings checkout. For an app made by Wix, find its app ID in [Apps Created by Wix](https://dev.wix.com/docs/api-reference/articles/work-with-wix-apis/platform/about-apps-created-by-wix.md). For your own app, find it in your app's dashboard. To find an app page ID, read the page's `appPageId` in the `pages` map of `@wix/site-service-pages` on a site where the app is installed.

2. Call `appSectionRelativeUrl()` with the 2 IDs:

   ```ts
   const relativeUrl = urlService.appSectionRelativeUrl('13d21c63-b5ec-5912-8397-c3a5ddb27a97', 'book_checkout')
   ```

3. When the result is `undefined`, no page on the site belongs to the app, for example because the app isn't installed. Render no link:

   ```tsx
   if (!relativeUrl) {
       return null
   }
   ```

4. Prepend `siteUrl` to the result. On a free Wix domain the site root URL includes a path, which a root-relative link drops:

   ```ts
   const checkoutUrl = urlService.siteUrl + relativeUrl
   ```

5. Render the link:

   ```tsx
   return <a href={checkoutUrl}>Book now</a>
   ```

## Link to an item on a router page owned by an app

This flow links to one category on the Stores category page, a router page whose items have paths such as `/category/jackets`.

To link to an item on a router page owned by an app, follow these steps:

1. Call `appSectionRelativeUrl()` with `true` for `discardRouterPageSuffix`, to retrieve only the router prefix. For the Stores category page, this returns `/category`:

   ```ts
   const prefix = urlService.appSectionRelativeUrl('1380b703-ce81-ff05-f115-39571d94dfcd', 'Category Page', true)
   ```

2. When the result is `undefined`, no page on the site belongs to the app. Render no link:

   ```tsx
   if (!prefix) {
       return null
   }
   ```

3. Take the item's path from your own data for the item, such as the slug of your own `category` object. The URL API doesn't provide it:

   ```ts
   const categorySlug = category.slug // 'jackets'
   ```

4. Join `siteUrl`, the prefix and the item's path, which gives `https://www.example.com/category/jackets`:

   ```ts
   const categoryUrl = `${urlService.siteUrl}${prefix}/${categorySlug}`
   ```

5. Render the link:

   ```tsx
   return <a href={categoryUrl}>Jackets</a>
   ```

## Read a query parameter from the current URL

To read a query parameter from the current URL, follow these steps:

1. Read `currentUrl` where you need the value, such as in an event handler. Nothing notifies you when it changes, so read it each time instead of storing it:

   ```ts
   const currentUrl = urlService.currentUrl
   ```

2. Parse the URL and read the parameter:

   ```ts
   const campaign = new URL(currentUrl).searchParams.get('utm_campaign')
   ```

3. Use the value. `searchParams.get()` returns `null` when a site visitor arrives without the parameter, so compare it with the value you expect rather than assuming it's there:

   ```tsx
   return campaign === 'spring-sale' ? <p>Spring sale: 20% off jackets</p> : null
   ```