requestOpenExternalUrl

API reference for the requestOpenExternalUrl method.

Opens a dialog that asks the user if they want to navigate to the provided URL. If they do, the URL is opened in a new browser tab on desktop devices or in a browser sheet on mobile devices.

Usage

import { Link } from "@canva/app-ui-kit";
import { requestOpenExternalUrl } from "@canva/platform";

const EXTERNAL_URL = "https://www.example.com";

export function App() {
  async function handleClick() {
    const response = await requestOpenExternalUrl({
      url: EXTERNAL_URL,
    });

    console.log(response); // => { status: "COMPLETED" }
  }

  return (
    <div>
      <Link
        href={EXTERNAL_URL}
        requestOpenExternalUrl={handleClick}
        ariaLabel="Navigate to example.com"
      >
        Click me
      </Link>
    </div>
  );
}

tsx

Parameters

#optionsobject

Required

The options for opening an external URL.

#options.urlstring

Required

The URL of a web page.

Returns

A Promise that resolves with the following object:

#responseobject

Required

The response of the app requesting to open an external URL.

#response.statusstring

Required

A value that identifies if the user navigated away from Canva.

This property may contain one of the following values:

"COMPLETED" - The value when a user navigated away from Canva.
"ABORTED" - The value when a user did not navigate away from Canva.