This guide will show you how link to pages in your app from web content so that your users have a seamless navigation experience.
Link creation
To link to a page in your app, simply use the page’s URL from your web app.
For example, if your web app is hosted at https://mytreefortapp.com and you want to link to the “Contact” page, use the URL https://mytreefortapp.com/menu/contact. If you’re not sure of the URL for a specific page then open your web app, navigate to the page, and copy the URL out of your browser’s address bar.
Links to these URLs will automatically open the correct page in your app on iOS and Android. Support on the web requires a bit more setup.
Web compatibility
To ensure that these links work when opened from your web app you will need to add the following code snippet to your HTML. This is necessary because of the limitations of iframes, the technology that we use to embed your web content.
👉 Note that you need to change the value of the APP_DOMAIN_NAME constant at the top of the snippet to match the domain name of your app.
<script type="text/javascript">
const APP_DOMAIN_NAME = "myapp.com"
// Ensure that links to the app are opened at the top
// level and not in the web content iframe
document.addEventListener("click", function (event) {
const href = event.target.closest("a").href
if (href) {
try {
if (new URL(href).hostname === APP_DOMAIN_NAME) {
window.open(href, "_top")
event.preventDefault()
}
} catch (_) {}
}
}, false)
</script>
That's it! By adding the snippet and linking to web app URLs your users will experience seamless navigation between your web content and the rest of the app.