⭐ Premium
The Our Church app can display your own WordPress content pages, and you can turn any button or image on those pages into a link that navigates inside the app — jumping the user straight to the address list, calendar, giving page, their personal rota, and more. This page explains how internal app links work and lists all the available destinations.
Why app links are different
If you use a standard website link (an ordinary <a href> tag) in an app content page, tapping it will take the user out of the app and open the page in their device’s browser. That’s rarely what you want inside an app.
Instead, internal navigation is triggered by two things you add to an element:
class="action"— this tells the app to handle the tap itself rather than opening a browser.data-tab="…"— this tells the app which page to go to (for exampleaddressfor the address list).
Creating a button link
The simplest app link is a button. Add a Custom HTML block to your app page and paste in markup like this — this example creates a button that opens the address list:
<button class="action" data-tab="address">Address</button>You can add red, blue or green to the class to colour the button, for example:
<button class="action blue" data-tab="calendar">Calendar</button>Turning an image into an app link
You can also make an image clickable so that tapping it takes the user to an app page. As with buttons, a normal website-style link on the image would take the user out to their browser — so instead we add class="action" and data-tab="…" directly to the image tag.
Add your image using the normal Image block, then click the three dots on the block toolbar and choose Edit as HTML.
To start with, the HTML will look something like this:
Add action to the class="…" attribute, and add data-tab="address" after <img, so it looks like this:
Click Update in the top right corner. Your image is now a clickable app link that navigates inside the app instead of opening the browser.
Available app page destinations (data-tabs)
Use any of the following values for data-tab to send the user to that page in the app:
| data-tab value | Where it goes |
|---|---|
account | The account page — prompts for login/register if needed |
address | The address list |
calendar | The calendar page |
my-rota | The logged-in user’s own church schedule |
rota | The full church schedule page |
register | The register page |
classes | The classes page |
my-group | The logged-in user’s group page |
my-prayer | The logged-in user’s prayer page |
3circles | The 3 Circles gospel animation page |
messages | The messages page |
media | The sermon media page |
news | The blog / news app page |
bible | The Bible readings |
home | The app home page |
delete-me | Deletes the logged-in user completely |
A note on delete-me: this permanently deletes the logged-in user’s account and data. It exists to help you meet data-protection requirements by giving members a way to remove themselves. Label any button using it very clearly so no one taps it by accident.