Stop types
All content types you can use in your tours
AudioGuideKit supports several different stop types. While most tours primarily use audio stops, mixing in other types can create a richer, more engaging experience.
At the moment only audio stops are fully supported and tested. Other stop types are available but flagged as experimental and full support will be introduced in the future.
Overview
| Type | Description | Use Case |
|---|---|---|
audio | Audio playback with optional transcription | Main tour content |
text | Rich text content | Detailed information |
image-text | Image with accompanying text | Photo essays |
image-gallery | Swipeable horizontal image gallery | Photo collections |
image-comparison | Before/after drag slider | Historical then-and-now |
image-hotspot | Image with tappable annotation pins | Diagrams, maps, artwork |
video | Video playback | Demonstrations, intros |
3d-object | Interactive 3D model viewer | Artifacts, architecture |
headline | Large text header | Section dividers |
quote | Styled quotation | Historical quotes |
rating | Star rating collection | Feedback |
email | Email collection form | Newsletter signup |
Audio stops
The bread and butter of audio tours. Displays a card with image, title, and audio player.
{
"id": "1",
"type": "audio",
"title": "Welcome to Barcelona",
"duration": "3 min audio",
"image": "https://images.unsplash.com/photo-xxx",
"audioFile": "https://your-storage.com/01-welcome.mp3",
"transcription": "Welcome to Barcelona! Today we'll explore the Gothic Quarter..."
}Audio stop fields
| Field | Required | Description |
|---|---|---|
id | Yes | Unique stop identifier |
type | Yes | Must be "audio" |
title | Yes | Stop title |
duration | Yes | Human-readable duration |
image | Yes | Stop image URL |
audioFile | Yes | Audio file URL (MP3, M4A) |
transcription | No | Text version of the audio |
Include transcriptions! They help with accessibility, allow visitors to read ahead, and improve SEO if search engines crawl your tour.
Text stops
Display rich text content without audio. Good for detailed information that visitors can read at their own pace.
{
"id": "2",
"type": "text",
"title": "Cathedral History",
"duration": "2 min read",
"image": "https://images.unsplash.com/photo-xxx",
"content": "The Barcelona Cathedral was constructed between the 13th and 15th centuries..."
}Text stop fields
| Field | Required | Description |
|---|---|---|
content | Yes | The text to display |
| Other standard fields | Yes | id, type, title, duration, image |
Image-text stops
Combines an image with accompanying text. Like text stops, but with more visual emphasis.
{
"id": "3",
"type": "image-text",
"title": "The Main Altar",
"duration": "1 min read",
"image": "https://images.unsplash.com/photo-xxx",
"content": "Notice the intricate gold leaf work on the altar, dating back to..."
}Use image-text stops when the image is central to understanding the content. Use text stops when the image is decorative.
Video stops
Embed video content. Useful for introductions, demonstrations, or drone footage.
{
"id": "4",
"type": "video",
"title": "Cathedral Overview",
"duration": "2 min video",
"image": "https://images.unsplash.com/photo-xxx",
"videoUrl": "https://your-storage.com/cathedral-overview.mp4"
}Video stop fields
| Field | Required | Description |
|---|---|---|
videoUrl | Yes | Video file URL (MP4 recommended) |
| Other standard fields | Yes | id, type, title, duration, image |
Video files are large and may not work well offline. Consider using video stops only for online-only tours or keep videos short.
3D object stops
Display interactive 3D models that visitors can rotate and zoom. Great for artifacts, sculptures, or architectural details.
{
"id": "5",
"type": "3d-object",
"title": "Roman Amphora",
"duration": "Interactive",
"image": "https://images.unsplash.com/photo-xxx",
"modelUrl": "https://your-storage.com/amphora.glb"
}3D object fields
| Field | Required | Description |
|---|---|---|
modelUrl | Yes | 3D model file URL (GLB/GLTF format) |
| Other standard fields | Yes | id, type, title, duration, image |
3D models use the GLB format (binary glTF). You can export from Blender, SketchUp, or download from Sketchfab.
Headline stops
Large text headers to divide your tour into sections. Don't include duration—these are visual dividers.
{
"id": "6",
"type": "headline",
"title": "Part 2: The Gothic Quarter",
"image": "https://images.unsplash.com/photo-xxx"
}Headline stop fields
| Field | Required | Description |
|---|---|---|
id | Yes | Unique stop identifier |
type | Yes | Must be "headline" |
title | Yes | The headline text |
image | Yes | Background image |
duration | No | Typically omitted for headlines |
Quote stops
Display a styled quotation. Perfect for historical quotes, visitor testimonials, or famous sayings about the location.
{
"id": "7",
"type": "quote",
"title": "Antoni Gaudí",
"duration": "Quote",
"image": "https://images.unsplash.com/photo-xxx",
"quote": "Nothing is art if it does not come from nature.",
"attribution": "Antoni Gaudí, 1910"
}Quote stop fields
| Field | Required | Description |
|---|---|---|
quote | Yes | The quotation text |
attribution | No | Who said it and when |
| Other standard fields | Yes | id, type, title, image |
Rating stops
Collect star ratings from visitors. Appears as an interactive card with 1-5 stars.
{
"id": "8",
"type": "rating",
"title": "How was your tour?",
"duration": "Rate us",
"image": "https://images.unsplash.com/photo-xxx"
}Place rating stops near the end of your tour, when visitors have experienced enough to form an opinion.
Rating collection
When a visitor submits a rating, it's stored locally. If collectFeedback: true is set in your metadata, ratings can be collected and analyzed.
Email stops
Collect email addresses for newsletters or follow-up communication.
{
"id": "9",
"type": "email",
"title": "Stay in Touch",
"duration": "Sign up",
"image": "https://images.unsplash.com/photo-xxx",
"description": "Get notified about new tours and special events.",
"placeholder": "Enter your email"
}Email stop fields
| Field | Required | Description |
|---|---|---|
description | No | Text explaining why to sign up |
placeholder | No | Input placeholder text |
| Other standard fields | Yes | id, type, title, image |
Email collection requires backend integration to actually store emails. The stop type provides the UI, but you'll need to connect it to your email service.
Image gallery stops
A swipeable horizontal gallery. Good for showing multiple photos of the same location — inside and outside a building, a collection of artifacts, or before/after a restoration.
{
"id": "10",
"type": "image-gallery",
"images": [
{ "url": "https://images.unsplash.com/photo-aaa", "caption": "View from the east entrance" },
{ "url": "https://images.unsplash.com/photo-bbb", "caption": "Interior courtyard", "credit": "© City Museum" },
{ "url": "https://images.unsplash.com/photo-ccc" }
],
"caption": "The museum's three main spaces"
}Image gallery fields
| Field | Required | Description |
|---|---|---|
id | Yes | Unique stop identifier |
type | Yes | Must be "image-gallery" |
images | Yes | Array of image objects (see below) |
caption | No | Caption shown below the gallery |
Each image object:
| Field | Required | Description |
|---|---|---|
url | Yes | Image URL |
alt | No | Accessibility alt text |
caption | No | Per-image caption |
credit | No | Per-image photo credit |
Image comparison stops
A before/after drag slider comparing two images. Great for showing historical change — an old photo next to today, or a building before and after renovation.
{
"id": "11",
"type": "image-comparison",
"before": "https://images.unsplash.com/photo-1960",
"after": "https://images.unsplash.com/photo-2024",
"beforeLabel": "1960",
"afterLabel": "Today",
"caption": "The square before and after the 2019 renovation"
}Image comparison fields
| Field | Required | Description |
|---|---|---|
id | Yes | Unique stop identifier |
type | Yes | Must be "image-comparison" |
before | Yes | "Before" image URL |
after | Yes | "After" image URL |
beforeLabel | No | Label on the before side (default: "Before") |
afterLabel | No | Label on the after side (default: "After") |
caption | No | Caption below the slider |
Image hotspot stops
An image with tappable annotation pins. Visitors tap a pin to reveal a title and description. Good for diagrams, floor plans, detailed artwork, or any image where specific points need explanation.
{
"id": "12",
"type": "image-hotspot",
"image": "https://images.unsplash.com/photo-cathedral",
"imageAlt": "Cathedral facade with architectural details",
"hotspots": [
{ "x": 42, "y": 18, "title": "Rose window", "description": "Installed in 1386, the 12-metre rose window depicts the Last Judgement." },
{ "x": 65, "y": 70, "title": "Main entrance" },
{ "x": 20, "y": 55, "title": "Bell tower", "description": "Added in 1492. The bells still ring every hour." }
],
"caption": "Tap the pins to explore the facade"
}Image hotspot fields
| Field | Required | Description |
|---|---|---|
id | Yes | Unique stop identifier |
type | Yes | Must be "image-hotspot" |
image | Yes | Image URL |
hotspots | Yes | Array of pin objects (see below) |
imageAlt | No | Accessibility alt text |
caption | No | Caption below the image |
Each hotspot:
| Field | Required | Description |
|---|---|---|
x | Yes | Horizontal pin position as a percentage (0–100) |
y | Yes | Vertical pin position as a percentage (0–100) |
title | Yes | Pin label shown when tapped |
description | No | Expanded text shown below the title |
To find the right x/y values, open the image in a browser and inspect the pixel position of each point you want to pin. Divide by image width/height and multiply by 100.
Mixing stop types
A typical tour might look like this:
"stops": [
{ "type": "audio", "title": "Welcome" },
{ "type": "audio", "title": "First Stop" },
{ "type": "image-gallery", "title": "Photo Collection" },
{ "type": "audio", "title": "Second Stop" },
{ "type": "headline", "title": "Part 2: The Old Town" },
{ "type": "audio", "title": "Third Stop" },
{ "type": "image-hotspot", "title": "Explore the Facade" },
{ "type": "image-comparison", "title": "Then and Now" },
{ "type": "quote", "title": "Historical Quote" },
{ "type": "audio", "title": "Fourth Stop" },
{ "type": "rating", "title": "Rate Your Experience" },
{ "type": "email", "title": "Stay Connected" }
]Best practices
- Lead with audio - Visitors expect audio tours to have audio
- Use headlines sparingly - Too many breaks the flow
- Place feedback at the end - After visitors have context
- Keep videos short - 2 minutes max for mobile attention spans
- Test 3D on mobile - Performance varies by device
- Test hotspot pins on small screens - Pins positioned near edges can be hard to tap