Feedback collection

AudioGuideKit includes built-in features to collect visitor feedback: star ratings, written feedback, and email signup.

Enabling feedback

Enable the feedback button in metadata.json:

{
  "id": "barcelona",
  "collectFeedback": true
}

When true, a feedback button appears on the tour start screen. Set to false to hide it.

Star ratings

How it works

1. Visitor taps the feedback button on the start screen
2. Bottom sheet slides up with 1-5 star selection
3. After selecting stars, a text field appears for written feedback
4. Visitor writes feedback and taps Next
5. Optional email collection step (can be skipped)
6. Thank you message

The full flow collects: star rating + written feedback + optional email.

Adding a rating stop

For a more prominent feedback request, add a rating stop in your tour feed:

{
  "id": "8",
  "type": "rating",
  "question": "How was your tour?",
  "description": "Your feedback helps us improve"
}

This creates a card with star selection that opens the full feedback sheet when tapped.

Email collection

Collect email addresses for newsletters or follow-up communication.

Adding an email stop

{
  "id": "9",
  "type": "email",
  "title": "Stay in Touch",
  "description": "Get notified about new tours and special events.",
  "placeholder": "Enter your email",
  "buttonText": "Subscribe"
}

All fields are optional and have sensible defaults from the UI translations.

What visitors see

• Card with title, description, and email icon
• Email input field with your placeholder text
• Submit button with your button text
• Success message after submission

Data storage

Out of the box, feedback is stored in the browser's localStorage. The data includes:

{
  tourId: string;
  rating: number;      // 1-5 stars
  feedback: string;    // Written feedback text
  email: string;       // Optional email
  submittedAt: string; // ISO timestamp
}

Connecting to your backend

To collect and analyze feedback, you'll need to modify the app to send data to your backend.

The rating context (context/RatingContext.tsx) handles all feedback state. Modify the submitRating function to POST data to your endpoint:

// Example modification to RatingContext.tsx
const submitRating = async () => {
  const ratingData = {
    tourId,
    rating,
    feedback,
    email,
    submittedAt: new Date().toISOString(),
  };
 
  // Send to your backend
  await fetch('https://your-api.com/feedback', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(ratingData),
  });
 
  // Mark as submitted
  setIsSubmitted(true);
};

Backend options