Apps overview
How tours work in native iOS, Android and React Native apps.
Tours in apps work just like tours on the web: you build them in the same dashboard, with the same welcome card, carousel, launch settings and styles. The differences are in how steps find things on screen.
What’s different from the web
| Web | Apps | |
|---|---|---|
| Install | One script tag | An SDK package + a few lines of setup |
| Where a tour runs | A URL path, e.g. /dashboard/* | A screen identifier, e.g. home, that you register in code |
| Step targets | CSS selectors | Identifiers you attach to views in code |
| Picking targets visually | Visual Editor | Visual Inspector |
| The launcher | Placed by the script | You add TTLauncherView once at your app’s root |
The pattern, on every platform
- Add an app site
On the Sites page, + Add site → choose iOS App, Android App or React Native, then enter the app name and its package / bundle ID. Copy the site key from the tile.
- Install and configure the SDK
Add the package and call
configurewith your site key once at startup. - Register screens
Tag each screen with an identifier (
.ttPage("home")/useTTPage('home')) so the SDK knows which tours to load. - Register targets
Tag each view a step should point at (
.ttTarget("getStarted")/useTTTarget('getStarted')). - Add the launcher once, at the root
TTLauncherViewfollows the current screen and shows the right tour — or hides when there isn’t one. - Build the tour in the dashboard
Set the walkthrough’s Screen to your identifier and add steps — type identifiers, or capture them from your device with the Visual Inspector.