Website Plugin

NameDrop Website Plugin विज़िटर्स को आपकी वेबसाइट पर किसी नाम पर hover करके यह सुनने देता है कि उसका उच्चारण कैसे होता है। यह एक script tag है, ~22 KB, शून्य डिपेंडेंसी, और किसी भी प्लेटफ़ॉर्म पर काम करता है।

इसे लाइव देखें

Website Plugin को लाइव देखने के लिए keshavmalani.com पर जाएँ। उच्चारण सुनने के लिए नाम पर hover करें।

Quick start

अपनी वेबसाइट के <head> में या क्लोज़िंग </body> टैग से पहले यह लाइन जोड़ें — बस:

<script src="https://namedrop.io/script/namedrop-integration.min.js" defer></script>

script लोड होने के बाद, आपके पास अपने पेजों पर pronunciation-योग्य नाम जोड़ने के दो तरीके हैं।

विकल्प A: `<namedrop>` टैग्स का उपयोग करें (अनुशंसित)

किसी भी नाम को <namedrop> टैग में wrap करें ताकि वह इंटरैक्टिव हो जाए। यह आपको पूरा नियंत्रण देता है कि किन नामों को enhance किया जाए।

व्यक्तिगत नाम:

<namedrop username="johndoe">John Doe</namedrop>

ब्रांड नाम:

<namedrop brandUsername="nike">Nike</namedrop>

पूरा पेज उदाहरण:

<!doctype html>
<html>
  <head>
    <title>Our Team</title>
    <script src="https://namedrop.io/script/namedrop-integration.min.js" defer></script>
  </head>
  <body>
    <h1>Meet Our Team</h1>
    <p>Our CEO, <namedrop username="johndoe">John Doe</namedrop>, founded the company in 2020.</p>
    <p>We are proud partners with <namedrop brandUsername="nike">Nike</namedrop>.</p>
  </body>
</html>

विकल्प B: स्वतः लिंक डिटेक्शन

क्या आप अपनी साइट पर पहले से NameDrop profiles के लिए लिंक कर रहे हैं? Plugin उन लिंक्स को स्वतः डिटेक्ट करेगा और उन्हें audio प्लेयर्स में बदल देगा — markup में किसी बदलाव की ज़रूरत नहीं।

<!-- ये लिंक्स स्वतः audio प्लेयर्स बन जाते हैं -->
<a href="https://namedrop.io/johndoe">John Doe</a>
<a href="https://namedrop.io/brands/nike">Nike</a>

सीधे audio फ़ाइल लिंक्स (.mp3, .wav, .m4a, .ogg, .webm, .aac, .flac) भी समर्थित हैं और profile आइकन के बिना एक प्लेयर दिखाते हैं।

किसी लिंक को सामान्य लिंक की तरह रखना चाहते हैं? data-namedrop-processed="true" जोड़ें:

<a href="https://namedrop.io/johndoe" data-namedrop-processed="true">Regular link</a>

आप एक ही पेज पर <namedrop> टैग्स और ऑटो-डिटेक्टेड लिंक्स दोनों का उपयोग कर सकते हैं — वे बिना संघर्ष के एक साथ काम करते हैं।

कस्टमाइज़ेशन

नामों के बगल में NameDrop आइकन के बिना एक साफ़ रूप चाहिए? script टैग में data-hide-icon attribute जोड़ें:

<script src="https://namedrop.io/script/namedrop-integration.min.js" data-hide-icon defer></script>

नाम केवल underlined टेक्स्ट के रूप में दिखाई देंगे। hover पर, play/pause, waveform विज़ुअलाइज़ेशन और वॉल्यूम कंट्रोल वाला एक कॉम्पैक्ट audio प्लेयर दिखाई देता है। प्लेयर स्वतः ही आपकी वेबसाइट के light या dark कलर स्कीम के अनुकूल हो जाता है।

प्लेटफ़ॉर्म गाइड

प्लेटफ़ॉर्म	script कैसे जोड़ें
स्टैटिक HTML	अपने HTML में सीधे जोड़ें
WordPress	थीम हेडर, या “Insert Headers and Footers” जैसा कोई plugin
Squarespace	Settings → Code Injection
Wix	Site Settings → Custom Code
Webflow	Project Settings → Custom Code
Shopify	`theme.liquid` एडिट करें या कस्टम ऐप का उपयोग करें
React / Next.js	`<Script>` कंपोनेंट का उपयोग करें या अपने HTML टेम्पलेट में जोड़ें
Angular / Vue	`index.html` में जोड़ें

FAQ

क्या यह मेरी वेबसाइट को धीमा कर देता है?

नहीं। script defer (नॉन-ब्लॉकिंग) के साथ लोड होती है, ~22 KB की है, और audio केवल तभी fetch होता है जब कोई play पर क्लिक करता है।

क्या यह सिंगल-पेज ऐप्स या डायनेमिक रूप से लोड किए गए कंटेंट के साथ काम करता है?

हाँ। Plugin पेज लोड के बाद जोड़े गए नए कंटेंट पर नज़र रखता है, इसलिए यह React, Vue, Angular और AJAX कंटेंट के साथ काम करता है।

अगर किसी profile में अभी रिकॉर्डिंग न हो तो क्या?

Play बटन एक संक्षिप्त error state दिखाता है। नाम का टेक्स्ट दिखाई देता रहता है और कार्यशील रहता है।

क्या plugin पेज लोड पर requests करता है?

कोई audio पहले से fetch नहीं होता। API requests तभी होती हैं जब कोई play पर क्लिक करता है।

मदद चाहिए?

hello@namedrop.io पर हमसे संपर्क करें — सेटअप में मदद करने में हमें ख़ुशी होगी।