DO AudioTours Player Installation Guide

The DO AudioTours player can be integrated into your real estate website in several ways. Choose the method that best fits your platform and technical requirements.

1. Direct Template Integration

Best for: IDX templates, custom-built websites, or direct access to listing page templates.

<!-- Player Component -->
<do-audio-tour-player-v2
    listingId="[MLS_NUMBER]"
    zipCode="[ZIP_CODE]"
    pageTranslate="true"
    playerTheme="light"
    defaultLanguage="en-US">
</do-audio-tour-player-v2>

<!-- Required Script - Place in header or before closing body tag -->
<script id="do-audio-tour-player" 
    type="module" 
    src="https://player.doaudiotours.com/do-audio-tour-player-v2.js?key=[YOUR_API_KEY]">
</script>

IDX Platform Examples

IDX Broker

// In your wrapper footer or listing template
if (window.location.href.includes('/idx/details/listing/')) {
    const mlsNumber = document.querySelector('meta[name="IDXNumber"]')?.content;
    const container = document.querySelector('#IDX-details');

    if (mlsNumber && container) {
        const player = document.createElement('do-audio-tour-player-v2');
        player.setAttribute('listingId', mlsNumber);
        player.setAttribute('zipCode', document.querySelector('meta[name="IDXZipCode"]')?.content || '');
        player.setAttribute('pageTranslate', 'true');
        player.setAttribute('playerTheme', 'light');

        container.insertBefore(player, container.querySelector('#IDX-description'));
    }
}

iHomefinder

document.addEventListener('ihfPropertyDetail', function(event) {
    const mlsNumber = event.detail.listingData.mlsNumber;
    const container = document.querySelector('.ihf-detail-container');

    if (mlsNumber && container) {
        const player = document.createElement('do-audio-tour-player-v2');
        player.setAttribute('listingId', mlsNumber);
        player.setAttribute('zipCode', event.detail.listingData.zip);
        player.setAttribute('pageTranslate', 'true');
        player.setAttribute('playerTheme', 'light');

        container.insertBefore(player, container.querySelector('.ihf-detail-features-info'));
    }
});

2. WordPress with IDX Integration

Best for: WordPress sites using popular IDX plugins. Each IDX plugin requires slightly different implementation.

IDX Broker WordPress Plugin

// In your theme's functions.php
function add_do_audio_player_script() {
    // Only load on IDX Broker detail pages
    if (function_exists('idx_is_listing_detail_page') && idx_is_listing_detail_page()) {
        wp_enqueue_script(
            'do-audio-player',
            'https://player.doaudiotours.com/do-audio-tour-player-v2.js?key=[YOUR_API_KEY]',
            array(),
            null,
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'add_do_audio_player_script');

// In your idx-broker-platinum/views/details.php template or via action hook
function add_do_audio_player_markup() {
    if (function_exists('idx_is_listing_detail_page') && idx_is_listing_detail_page()) {
        $mls_number = idx_get_listing_meta('listingID');
        $zip_code = idx_get_listing_meta('zipcode');

        if ($mls_number) {
            echo '<do-audio-tour-player-v2
                listingId="' . esc_attr($mls_number) . '"
                zipCode="' . esc_attr($zip_code) . '"
                pageTranslate="true"
                playerTheme="light">
            </do-audio-tour-player-v2>';
        }
    }
}
add_action('idx_after_listing_description', 'add_do_audio_player_markup');

IMPress Listings (by IDX Broker)

// In your theme's functions.php
function add_do_audio_player_script() {
    // Check if we're on an IMPress listing page
    if (is_singular('listing')) {
        wp_enqueue_script(
            'do-audio-player',
            'https://player.doaudiotours.com/do-audio-tour-player-v2.js?key=[YOUR_API_KEY]',
            array(),
            null,
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'add_do_audio_player_script');

// In your single-listing.php template
function add_do_audio_player_markup() {
    if (is_singular('listing')) {
        $mls_number = get_post_meta(get_the_ID(), '_listing_mls', true);
        $zip_code = get_post_meta(get_the_ID(), '_listing_zip', true);

        if ($mls_number) {
            echo '<do-audio-tour-player-v2
                listingId="' . esc_attr($mls_number) . '"
                zipCode="' . esc_attr($zip_code) . '"
                pageTranslate="true"
                playerTheme="light">
            </do-audio-tour-player-v2>';
        }
    }
}
add_action('impress_after_listing_details', 'add_do_audio_player_markup');

iHomefinder WordPress Plugin

// In your theme's functions.php
function add_do_audio_player_script() {
    // Check if we're on an iHomefinder listing page
    if (function_exists('ihf_is_listing_detail') && ihf_is_listing_detail()) {
        wp_enqueue_script(
            'do-audio-player',
            'https://player.doaudiotours.com/do-audio-tour-player-v2.js?key=[YOUR_API_KEY]',
            array(),
            null,
            true
        );

        // Add initialization script
        add_action('wp_footer', function() {
            ?>
            <script>
            document.addEventListener('ihfPropertyDetail', function(event) {
                const mlsNumber = event.detail.listingData.mlsNumber;
                const container = document.querySelector('.ihf-detail-container');

                if (mlsNumber && container) {
                    const player = document.createElement('do-audio-tour-player-v2');
                    player.setAttribute('listingId', mlsNumber);
                    player.setAttribute('zipCode', event.detail.listingData.zip);
                    player.setAttribute('pageTranslate', 'true');
                    player.setAttribute('playerTheme', 'light');

                    container.insertBefore(player, container.querySelector('.ihf-detail-features-info'));
                }
            });
            </script>
            <?php
        });
    }
}
add_action('wp_enqueue_scripts', 'add_do_audio_player_script');

3. Google Tag Manager Installation

Best for: Sites where direct template modification isn't possible or when you need flexible deployment rules.

Create a new Custom HTML tag in GTM

Add the following code:

<script>
(function() {
  // Only proceed if we're on a listing page
  if (!isListingPage()) return; // See helper function below

  // Create and insert the script
  const script = document.createElement('script');
  script.id = 'do-audio-tour-player';
  script.type = 'module';
  script.src = 'https://player.doaudiotours.com/do-audio-tour-player-v2.js?key=[YOUR_API_KEY]';
  document.head.appendChild(script);

  // Create and insert the player when MLS number is available
  const mlsNumber = getMLSNumber(); // See helper function below
  if (mlsNumber) {
    const player = document.createElement('do-audio-tour-player-v2');
    player.setAttribute('listingId', mlsNumber);
    player.setAttribute('pageTranslate', 'true');
    player.setAttribute('playerTheme', 'light');

    // Insert the player in your desired location
    const container = getListingContainer(); // See helper function below
    if (container) {
      container.appendChild(player);
    }
  }
})();

// Helper Functions - Customize these for your website
function isListingPage() {
  // Common patterns for listing pages
  return (
    window.location.href.includes('/idx/details/') ||
    window.location.href.includes('/property/') ||
    document.querySelector('#listing-details') !== null ||
    document.querySelector('.property-details') !== null
  );
}

function getMLSNumber() {
  // Common patterns for finding MLS numbers
  return (
    document.querySelector('meta[name="IDXNumber"]')?.content ||
    document.querySelector('[data-mls]')?.getAttribute('data-mls') ||
    document.querySelector('.mls-number')?.textContent?.trim() ||
    window.listingData?.mlsNumber
  );
}

function getListingContainer() {
  // Common patterns for listing containers
  return (
    document.querySelector('#IDX-details') ||
    document.querySelector('.property-details') ||
    document.querySelector('#listing-content')
  );
}
</script>

Set trigger conditions:
- Page Path contains /idx/details/ or /property/
- DOM Element with class 'property-details' exists
- Custom Variable matching your listing page pattern

Configuration Options

Required Parameters

Parameter	Description	Example
`key`	MLO API key	`key="your-api-key-here"`
`listingId`	MLS number or listing identifier	`listingId="2405225"`

Optional Parameters

Parameter	Default	Description	Example
`zipCode`	`""`	Property ZIP code	`zipCode="45245"`
`playerWidth`	`"100%"`	Player width	`playerWidth="500px"`
`pageTranslate`	`false`	Enable page translation	`pageTranslate="true"`
`playerTheme`	`"dark"`	Visual theme	`playerTheme="light"`
`defaultLanguage`	`"en-US"`	Default language	`defaultLanguage="es-US"`

Implementation Tips

Detecting Listing Pages

Common methods across platforms:

URL patterns (e.g., /idx/details/, /property/)
WordPress conditional functions (e.g., is_singular('listing'))
IDX plugin functions (e.g., idx_is_listing_detail_page())
Presence of specific DOM elements
Custom post types and taxonomies

Finding MLS Numbers

Common locations:

WordPress post meta
IDX plugin functions and hooks
Meta tags
Data attributes
URL parameters
JavaScript variables

Best Practices

Load the script only on listing pages
Use platform-specific hooks and functions when available
Handle dynamic page loads (common in IDX platforms)
Add error handling for missing MLS numbers
Test on mobile devices
Verify page translation functionality
Consider caching implications with IDX data

Support

Having technical issues? Check our:

Need implementation support? See our Contact & Support page.