This guide covers the different methods that you can use to link to other pages from your web content. Using these methods properly can give your users a seamless navigation experience between your web content and your app.
Opening links in the web content view
By default links in your web content will open in the same view as the content. This method works well for links to other pages on your site.
Providing navigation
It’s important to remember that users do not have access to normal browser controls such as the address bar and history buttons when viewing web content. This means that if you link to a page that does not include a link back to your web content then the user will be stuck. Make sure that every page you link to includes the navigation elements needed to traverse your web content.
Opening links in a browser
You may want a link to open in a full web browser instead of opening in the same view as your web content. This can be helpful when linking to a web page that does not work well embedded or when linking to a web page that does not provide navigation back to your content (see “Providing navigation” above).
To open a link in a browser, use the normal methods of configuring a web link to open in a new window. For example, add a target="_blank" attribute to an <a> tag or pass "_blank" as the second argument when calling window.open.
Linking to an app page
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 closestLink = event.target.closest("a")
const href = closestLink && closestLink.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.