---
title: "Stop types"
url: "https://audioguidekit.org/docs/content/stop-types"
description: "All content types you can use in your tours"
lang: "en"
updated: "2026-09-19T16:42:38.209Z"
---

# Stop types

[Docs](https://audioguidekit.org/docs) / Content / Stop types

# 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](https://sketchfab.com/).

## 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

1.  **Lead with audio** - Visitors expect audio tours to have audio
2.  **Use headlines sparingly** - Too many breaks the flow
3.  **Place feedback at the end** - After visitors have context
4.  **Keep videos short** - 2 minutes max for mobile attention spans
5.  **Test 3D on mobile** - Performance varies by device
6.  **Test hotspot pins on small screens** - Pins positioned near edges can be hard to tap