WordPress (Divi)

यह पेज Divi थीम पर बनी WordPress साइट्स के लिए दो दृष्टिकोणों को कवर करता है।

दृष्टिकोण 1: साउंड आइकन के साथ स्टैटिक लिंक

जहाँ भी आप “Hear my name” लिंक दिखाना चाहते हैं, यह HTML डालें:

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

प्रोडक्शन में इस दृष्टिकोण के उदाहरण के लिए ocj.org/about/staff-and-board/ देखें:

OCJ staff directory page showing the "Hear my name" link with NameDrop sound icon next to a team member's name

दृष्टिकोण 2: Divi हेडर script (साइट-व्यापी ऑटो-डिटेक्शन)

यह दृष्टिकोण हर पेज को namedrop.io लिंक्स के लिए स्कैन करता है और प्रत्येक के बगल में एक inline play बटन जोड़ता है। कई स्टाफ या बोर्ड पेज वाली साइट्स के लिए सबसे उपयुक्त।

script कहाँ paste करें

Divi admin में:

Divi → Theme Options → Integration।
“Add code to the <head> of your blog” लेबल वाले सेक्शन को ढूँढें।
नीचे दिया गया script अंत में paste करें।
Save Changes पर क्लिक करें।

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>

यह क्या करता है

लोड के बाद पेज के हर लिंक को स्कैन करता है
NameDrop profile (https://namedrop.io/<username>) की ओर इशारा करने वाले लिंक्स को फ़िल्टर करता है
प्रत्येक के बगल में एक play-बटन इमेज जोड़ता है
क्लिक पर audio फ़ाइल (https://data.namedrop.io/audio/<username>.mp3) play करता है — पेज छोड़े बिना

आवश्यक asset

आपको play-btn.png और pause-btn.png को अपने सर्वर पर होस्ट करना होगा (या imageElement.src URL को होस्टेड आइकन्स की ओर swap करना होगा)। ऊपर दिया गया script उन्हें पेज के सापेक्ष ./images/play-btn.png पर अपेक्षित करता है — आवश्यकतानुसार समायोजित करें।

मुझे कौन-सा दृष्टिकोण चुनना चाहिए?

स्थिति	उपयोग करें
आप सबसे सरल इंस्टॉल चाहते हैं	Website Plugin
आप पहले से NameDrop profiles से लिंक कर रहे हैं	Website Plugin (ऑटो-डिटेक्शन)
एक ही पेज पर सिर्फ़ एक नाम	दृष्टिकोण 1 (स्टैटिक लिंक)
कई नाम, Divi थीम, हर पेज पर `<script>` नहीं जोड़ सकते	दृष्टिकोण 2 (हेडर script)