WordPress (Divi)

Ce contenu n’est pas encore disponible dans votre langue.

This page covers two approaches for WordPress sites built on the Divi theme.

Approach 1: Static link with sound icon

Drop this HTML wherever you want a “Hear my name” link to appear:

<p align="center" style="font-size:.9em; color:grey;">
  Hear my name
  <a href="https://namedrop.io/{{namedrop username}}">
    <img />
  </a>
</p>

For an example of this approach in production, see ocj.org/about/staff-and-board/.

Approach 2: Divi header script (site-wide auto-detection)

This approach scans every page for namedrop.io links and adds an inline play button next to each one. Best for sites with many staff or board pages.

Where to paste the script

In the Divi admin:

Divi → Theme Options → Integration.
Find the section labeled “Add code to the <head> of your blog”.
Paste the script below at the end.
Click Save Changes.

The script

<script>
  window.onload = (e) => {
    const audioURL = 'https://data.namedrop.io/audio';
    const ArrayOfHrefs = document.querySelectorAll('a');
    const convertHrefToArray = Array.from(ArrayOfHrefs);
    convertHrefToArray.map((href) => {
      const url = new URL(href.href);
      const pathnames = ['/', '/stories', '/offerings', '/dashboard', '/login', '/signup'];
      if (url.origin === 'https://namedrop.io' && !pathnames.includes(url.pathname)) {
        const audio = new Audio();
        let isPlaying = false;
        const parentElement = href;
        const parentHeight = parentElement.offsetHeight;
        const nameDropUserName = url.pathname.substring(1);
        audio.src = `${audioURL}/${nameDropUserName}.mp3`;

        const imageElement = document.createElement('img');
        // Replace this with a hosted play-button image URL on your site
        imageElement.src = './images/play-btn.png';
        imageElement.style.maxWidth = '100%';
        imageElement.style.transform = 'translateY(5px)';
        imageElement.style.display = 'inline-block';
        imageElement.height = parentHeight;
        imageElement.style.margin = '0px 5px';
        parentElement.appendChild(imageElement);

        href.addEventListener('click', (e) => {
          if (e.target.tagName === 'IMG') {
            e.preventDefault();
            isPlaying = !isPlaying;
            if (isPlaying) {
              audio.play();
              imageElement.src = './images/pause-btn.png';
            } else {
              imageElement.src = './images/play-btn.png';
              audio.pause();
            }
          }
        });

        audio.onended = () => {
          isPlaying = false;
          imageElement.src = './images/play-btn.png';
        };
      }
    });
  };
</script>

What it does

Scans every link on the page after load
Filters to links that point at a NameDrop profile (https://namedrop.io/<username>)
Adds a play-button image next to each one
Plays the audio file (https://data.namedrop.io/audio/<username>.mp3) on click without navigating away

Required asset

You’ll need to host play-btn.png and pause-btn.png on your own server (or swap the imageElement.src URLs to point at hosted icons). The script above expects them at ./images/play-btn.png relative to the page — adjust as needed.

Which approach should I use?

Situation	Use
You want the simplest possible install	Website Plugin
You’re already linking to NameDrop profiles	Website Plugin (auto-detection)
Just one name on a single page	Approach 1 (static link)
Many names, Divi theme, can’t add `<script>` per page	Approach 2 (header script)