Skip to main content
When a user opens your 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. 
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 <ProductGrid products={products} />;
}

​
Returns

useSetOpenInAppUrl returns a single function.

​
setOpenInAppUrl

setOpenInAppUrl(href: string): Promise<void>;
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.

Design for the Host

Adapt the view to display mode, theme, and device

useDisplayMode

Read and switch the view’s layout, including fullscreen

useOpenExternal

Open a URL outside the view’s iframe through the host