Skip to content

Example Implementation

Here's a simple example of integrating the DO AudioTours Player into a listing page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Property Listing Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
        }

        .listing-details {
            margin-bottom: 20px;
        }

        h1 {
            margin: 0 0 10px 0;
            font-size: 24px;
            color: #333;
        }

        .price {
            color: #2E8B57;
            font-size: 22px;
            font-weight: bold;
        }

        .description {
            line-height: 1.6;
            color: #555;
        }

        .audio-player {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="listing-details">
            <h1>123 Example Street, New York, NY</h1>
            <p class="price">$1,250,000</p>
            <div class="description">
                <p>Stunning 3-bedroom, 2-bathroom apartment with breathtaking city views. 
                Features include hardwood floors throughout, modern kitchen with stainless steel appliances, 
                and a spacious master suite.</p>
            </div>
        </div>

        <!-- DO AudioTours Player -->
        <div class="audio-player">
            <do-audio-tour-player-v2 
                listingId="QVPZJWLKGH"
                pageTranslate="true"
                playerTheme="light"
                defaultLanguage="en-US">
            </do-audio-tour-player-v2>
        </div>

        <!-- Widget Script -->
        <script id="do-audio-tour-player" type="module" src="https://player.doaudiotours.com/do-audio-tour-player-v2.js?key=eyJpdiI6IjA2MHBrUkNJRjhKZmpKV0RJc3ZIbnc9PSIsInZhbHVlIjoiR0xtdnRCbSt3MWtudldlVFRJREdhRUsvZEw0UlA2NFpaT0loYWdtcWo1VnZUd2EvaHV4YlVDd1ViVmwxckNCL1RBMllXb1p2V25BUDRwamlrRHpvYkR3T1BhVHZjQ2djeDJXRXZKVHBrZ25Zb3VuWjl3aDdNc3lsRUtGRUd6UnhEOUdyMXF3UjBJQUkreTNicnRFblJ3PT0iLCJtYWMiOiJiNzhhOTE1YTgwYmY1YjZhY2ZlZjNkYzZkYTZlNjdlYTQ2NzEyMGQ2OWQwZDQwMTNlOTAyYzQyYjQ3NmVjYWU1IiwidGFnIjoiIn0="></script>
    </div>
</body>
</html>

Key Components

Player Implementation

<do-audio-tour-player-v2 
    listingId="2405225"
    pageTranslate="true"
    playerTheme="light"
    defaultLanguage="en-US">
</do-audio-tour-player-v2>

Required Script

<script id="do-audio-tour-player" 
    type="module" 
    src="https://player-test.doaudiotours.com/do-audio-tour-player-v2.js?key=eyJpdiI6IjA2MHBrUkNJRjhKZmpKV0RJc3ZIbnc9PSIsInZhbHVlIjoiR0xtdnRCbSt3MWtudldlVFRJREdhRUsvZEw0UlA2NFpaT0loYWdtcWo1VnZUd2EvaHV4YlVDd1ViVmwxckNCL1RBMllXb1p2V25BUDRwamlrRHpvYkR3T1BhVHZjQ2djeDJXRXZKVHBrZ25Zb3VuWjl3aDdNc3lsRUtGRUd6UnhEOUdyMXF3UjBJQUkreTNicnRFblJ3PT0iLCJtYWMiOiJiNzhhOTE1YTgwYmY1YjZhY2ZlZjNkYzZkYTZlNjdlYTQ2NzEyMGQ2OWQwZDQwMTNlOTAyYzQyYjQ3NmVjYWU1IiwidGFnIjoiIn0=">
</script>

This example shows:

  1. Basic responsive layout
  2. Proper player positioning
  3. Essential listing information structure
  4. Required player configuration
  5. Correct script implementation with provided key

Remember to update the listingId to match your MLS listing number when implementing.