> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging.skybridge.tech/llms.txt
> Use this file to discover all available pages before exploring further.
# useSetOpenInAppUrl
> Set where the host's Open in app button navigates
export const Compat = ({alpic = false, chatgpt = false, claude = false, cursor = false, goose = false, compact = false}) =>
;
When a user opens your [view](/build/view) fullscreen, the host's "Open in app" button navigates to the view's current iframe path. `useSetOpenInAppUrl` redirects it to a canonical URL you set instead.
## Example
Opening the carousel fullscreen and using "Open in app" deep-links to the featured product's page in the web app, instead of reopening the view.
```tsx highlight={2,5,14} theme={null}
import { useEffect } from "react";
import { useSetOpenInAppUrl } from "skybridge/web";
function Carousel({ products }: { products: Product[] }) {
const setOpenInAppUrl = useSetOpenInAppUrl();
const featured = products[0];
useEffect(() => {
if (!featured) {
return;
}
setOpenInAppUrl(`https://shop.example.com/products/${featured.id}`).catch(
(error) => {
console.error("Could not set the open-in-app URL", error);
},
);
}, [featured, setOpenInAppUrl]);
return ;
}
```
## Returns
`useSetOpenInAppUrl` returns a single function.
### `setOpenInAppUrl`
```tsx theme={null}
setOpenInAppUrl(href: string): Promise;
```
Sets `href` as the target the host's fullscreen "Open in app" button navigates to. `href` is required: an empty or whitespace-only string throws synchronously, before the host is called. The function reference is stable across renders, so it is safe to list in an effect's dependency array. The promise resolves once the host accepts the URL.
**ChatGPT** is the only host with this button; calling the hook on another host throws.
Adapt the view to display mode, theme, and device
Read and switch the view's layout, including fullscreen
Open a URL outside the view's iframe through the host