Lingara Lingara दस्तावेज़ मार्गदर्शिकाएँ API लाइब्रेरी ऐप बनाएं एम्बेड वेब ऐप
भाषा: हिन्दी

वेबसाइट विजेट

यह पेज अंग्रेज़ी से अनुवादित है। अगर दोनों में अंतर हो, तो अंग्रेज़ी पेज सही है। अंग्रेज़ी पेज पढ़ें

वेबसाइट पर, 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)
})
कोड उदाहरण की भाषा

TypeScript

// The page that mounts the widget: the token never appears in it.
export function practicePage(planId: string, cspNonce: string): string {
  const widget = widgetSnippet({ planId, tokenEndpoint: '/lingara/token', theme: 'auto', locale: 'fr', title: 'Pratique', nonce: cspNonce })
  return `<!doctype html><title>Practice</title>${widget}`
}

Rust

// The element, its script build and a token provider that POSTs to your
// token route. The token never appears in the markup.
let html = widget_snippet(&SnippetOptions {
    locale: Some("fr".into()),
    nonce: Some(csp_nonce.into()), // your page's CSP nonce, for a strict script-src
    ..SnippetOptions::new(plan_id, "/lingara/token")
})?;

Go

// The plan your server made for this player, and the token route above.
// Pass the request's CSP nonce when your script-src allows no inline
// script; the token itself never appears in the markup.
theme := "auto"
html, err := lingaraembed.WidgetSnippet(lingaraembed.SnippetOptions{
	PlanID:        planID,
	TokenEndpoint: "/lingara/token",
	Theme:         &theme,
	Nonce:         &cspNonce,
})
if err != nil {
	return "", err // a *lingaraembed.SnippetError names the refused option
}
return template.HTML(html), nil // already escaped by the kit

Java

// planId is the lesson plan your server made for this player. The element
// POSTs to tokenEndpoint with same-origin cookies: the token never appears
// in the markup. Pass this request's CSP nonce if your page sets one.
String html =
    WidgetSnippet.render(
        SnippetOptions.builder(planId, "/lingara/token").locale("fr").nonce(cspNonce).build());

Kotlin

// planId is the lesson plan your server made for this player. The element
// POSTs to tokenEndpoint with same-origin cookies: the token never appears
// in the markup. Pass this request's CSP nonce if your page sets one.
val html =
    widgetSnippet(
        SnippetOptions(planId, tokenEndpoint = "/lingara/token").apply {
            locale = "fr"
            nonce = cspNonce
        },
    )

Ruby

# The plan your server made for this player, rendered into your page.
# nonce: your page's CSP nonce, when its script-src allows no inline script.
def self.widget(plan_id, csp_nonce)
  Lingara::Embed.widget_snippet(plan_id: plan_id, token_endpoint: "/lingara/token", locale: "fr", nonce: csp_nonce)
end

PHP

use Lingara\Embed\SnippetOptions;
use Lingara\Embed\WidgetSnippet;

// In your page's template: the plan your server made for this player, and
// your token route. Pass the request's CSP nonce if your script-src allows
// no inline script. A bad option throws SnippetException naming its field.
function practiceWidget(string $planId, string $cspNonce): string
{
    return WidgetSnippet::render(new SnippetOptions(
        planId: $planId,
        tokenEndpoint: '/lingara/token',
        theme: 'auto',
        nonce: $cspNonce,
    ));
}

C#

app.MapGet("/practice/{planId}", (string planId, HttpContext http) =>
{
    var widget = WidgetSnippet.Render(new SnippetOptions
    {
        PlanId = planId,                              // the plan your server made for this player
        TokenEndpoint = "/lingara/token",             // same origin: the element sends this page's cookies
        Nonce = http.Items["csp-nonce"] as string,     // your CSP's nonce, if script-src has one
    });
    return Results.Content($"<!doctype html><title>Practice</title>\n{widget}", "text/html");
}).RequireAuthorization();