वेबसाइट विजेट
यह पेज अंग्रेज़ी से अनुवादित है। अगर दोनों में अंतर हो, तो अंग्रेज़ी पेज सही है। अंग्रेज़ी पेज पढ़ें
वेबसाइट पर, Lingara एक कस्टम एलिमेंट, <lingara-embed>, के रूप में चलता है। एलिमेंट Lingara के अभ्यास को Lingara द्वारा परोसे गए एक फ़्रेम में दिखाता है, इसलिए आपका पेज कभी शिक्षार्थी का डेटा नहीं देखता और Lingara का पेज कभी आपका डेटा नहीं देखता।
एलिमेंट माउंट करें
npm से @lingara/embed इंस्टॉल करें, या अगर आपकी साइट में कोई बंडलर नहीं है तो उसका मॉड्यूल बिल्ड किसी CDN से लोड करें। फिर पेज पर <lingara-embed> रखें और उसे डिफ़ाइन करें। एलिमेंट ये लेता है:
plan-id, अभ्यास के लिए पाठ योजना, जो खिलाड़ी की अपनी हो;surface, क्या दिखाना है:practice, डिफ़ॉल्ट और एकमात्र मौजूद सरफ़ेस;theme, इनमें से एक:light,darkयाauto;locale, फ़्रेम के अपने शब्दों की भाषा, जो अन्यथा शिक्षार्थी का अनुसरण करती है;title, फ़्रेम का सुलभ नाम।
स्टाइलिंग थीम पर ही रुक जाती है। आपका पेज फ़्रेम के अंदर नहीं पहुँच सकता, और थीम ही वह एकमात्र सेटिंग है जो वह देता है।
उसे टोकन दें
एलिमेंट के tokenProvider को एक ऐसे फ़ंक्शन पर सेट करें जो आपके अपने सर्वर से टोकन माँगता है। आपका सर्वर पेज के ओरिजिन के साथ उसे मिंट करता है, सर्वर किट का उपयोग करते हुए, और टोकन तथा उसकी समाप्ति के साथ जवाब देता है। एलिमेंट टोकन को संदेश के ज़रिए फ़्रेम को सौंपता है, और वह कभी URL में नहीं जाता।
जिन ओरिजिन पर विजेट चलता है, उन सभी को मिंट करने से पहले कंसोल में अपने क्लाइंट की सेटिंग्स में रजिस्टर करें। सर्वर किट पेज बताता है कि कैसे। API किसी भी दूसरे ओरिजिन के लिए मिंट किया गया टोकन अस्वीकार कर देता है, और फ़्रेम अभ्यास के बजाय एक त्रुटि दिखाता है।
सर्वर किट आपके लिए पूरा स्निपेट भी लिख सकता है, एलिमेंट और टोकन प्रोवाइडर एक साथ, आपके पेज की स्क्रिप्ट nonce के साथ अगर आपकी कंटेंट सिक्योरिटी पॉलिसी को उसकी ज़रूरत हो। नीचे का अंतिम सैंपल इसे दिखाता है।
फ़्रेम जो कहता है उसे सुनें
फ़्रेम एक वर्शन वाले संदेश प्रोटोकॉल पर एलिमेंट से बात करता है, और एलिमेंट आपके पेज के लिए ज़रूरी चीज़ों को DOM इवेंट में बदलता है:
lingara:practice-completedजब शिक्षार्थी कोई सेट पूरा करता है, उसकेplanId,setNumber,correctऔरtotalके साथ;lingara:errorजब फ़्रेम रुक जाता है, एकcodeऔरretryableके साथ। retryable त्रुटि का अर्थ है कि नया माउंट सफल हो सकता है; दोबारा कब कोशिश करनी है, यह आप तय करते हैं।
अभ्यास का परिणाम आपके सर्वर तक भी पहुँचता है, जैसा अभ्यास के परिणाम में बताया गया है।
npm install @lingara/embed@0.1.0-alpha.6
# No bundler? One module script instead:
# <script type="module" src="https://cdn.jsdelivr.net/npm/@lingara/embed@0.1.0-alpha.6/dist/lingara-embed.min.js"></script><!-- plan-id is a lesson plan your server made for this player. -->
<lingara-embed surface="practice" plan-id="0b9d4f2e-3c1a-4e8b-9f6d-2a7c5e1b8d40" theme="auto" title="Practice"></lingara-embed>
<script type="module">
import { defineLingaraEmbed } from '@lingara/embed'
defineLingaraEmbed()
</script>// Your own endpoint, on your own server. It mints with this page's origin and
// returns exactly { token, expires_at }: the token (lgr_et_…) never touches a URL.
widget.tokenProvider = async () => {
const response = await fetch('/lingara/token', { method: 'POST', credentials: 'same-origin' })
if (!response.ok) throw new Error(`token endpoint answered ${response.status}`)
return response.json()
}widget.addEventListener('lingara:practice-completed', (event) => {
const { planId, setNumber, correct, total } = (event as CustomEvent).detail
console.log(`set ${setNumber} of ${planId}: ${correct}/${total}`)
})
widget.addEventListener('lingara:error', (event) => {
const { code, retryable } = (event as CustomEvent).detail
// `retryable` means a remount may succeed; when to try is yours to decide.
if (retryable) setTimeout(() => widget.reload(), 30_000)
else console.warn('Lingara practice stopped:', code)
})