Skip to content
Netlify SDK Docs Netlify SDK Docs 1.38.2

Navigate integration routes

It’s possible to add more than one route to your integration’s UI. This is useful for things like the following:

  • having separate pages for different functionality
  • making the / index page a landing page for your integration and providing a separate page for users to complete a form

Multiple Integration UI pages

To include multiple pages in your integration’s UI, do the following:

  1. Add a second route to the surface.

    src/ui/index.ts
    const configForm = surface.addRoute("/config-form");

  2. Navigate between routes with the integrationNavigation property on surfaceState.

    src/ui/index.ts
    const route = surface.addRoute("/");
    

    route.addButton({
      title: "Let's get you set up",
      id: "config-button",
      callback: (surfaceState) => {
        surfaceState.integrationNavigation.navigateTo("/config-form");
      },
    });

External URLs

You can also use integrationNavigation to navigate to an external URL.

src/ui/index.ts
const route = surface.addRoute("/");


route.addButton({
  title: "Netlify",
  id: "navigate-to-netlify",
  callback: (surfaceState) => {
    surfaceState.integrationNavigation.navigateExternally("https://netlify.com");
  },
});