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:
-
Add a second route to the surface.
src/ui/index.ts const configForm = surface.addRoute("/config-form"); -
Navigate between routes with the
integrationNavigation
property onsurfaceState
.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.
const route = surface.addRoute("/");
route.addButton({ title: "Netlify", id: "navigate-to-netlify", callback: (surfaceState) => { surfaceState.integrationNavigation.navigateExternally("https://netlify.com"); },});