requestOpenExternalUrl

API reference for the requestOpenExternalUrl method.

This version of the API is deprecated. This version will soon be unsupported. You should use a stable version of the API in your app.

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

The user may need to enable pop-up permissions before URLs can be opened.

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.