छोटे घटक की सतह
आपके रिएक्ट कंपोनेंट को केवल iframe को रेंडर करने, उसका आकार निर्धारित करने और वैकल्पिक रूप से इवेंट हैंडलर को प्रबंधित करने की आवश्यकता है।
रिएक्ट गेम विजेट
ब्राउज़र गेम के लिए रिएक्ट गेम विजेट
रिएक्ट टीमों को प्लेएबल विजेट जोड़ने के लिए गेम को शुरू से बनाने की आवश्यकता नहीं है। एक रिएक्ट कंपोनेंट के अंदर Games I Know iframe को रेंडर करें, फ्रेम URL पास करें, और जब पैरेंट ऐप को गेम स्टेट की आवश्यकता हो तो postMessage इवेंट्स को सुनें।
आईफ्रेम घटक
रिएक्ट संदेश श्रोता
उत्तरदायी रैपर
हस्ताक्षरित समापन समर्थन
संक्षिप्त जवाब
पहले फ्रेम रूट का उपयोग करें, फिर पेज कॉन्टेक्स्ट जोड़ें।
React में, /embed/{gameSlug}/frame/ के लिए एक छोटा iframe कंपोनेंट बनाएं, टेनेंटआईडी को URL पैरामीटर के रूप में पास करें, और Games I Know इवेंट्स के लिए एक मैसेज लिसनर अटैच करें।
React के अनुकूल गेम विजेट को आज़माएँ
यह डेमो iframe और पैरेंट-पेज इवेंट्स को दिखाता है जिन्हें आपका रिएक्ट ऐप सब्सक्राइब कर सकता है।
React डेवलपर्स एक गेम जोड़ रहे हैं embed
React टीमें iframe विजेट का उपयोग क्यों करती हैं?
एक iframe गेम रनटाइम को आपके ऐप से अलग रखता है, जबकि इवेंट-आधारित एकीकरण की अनुमति भी देता है।
कोई गेम इंजन बंडल नहीं
यह गेम बोर्ड लॉजिक, एसेट्स या रियल-टाइम कोड के साथ आपके रिएक्ट एप्लिकेशन बंडल का आकार नहीं बढ़ाता है।
स्पष्ट एकीकरण सीमा
पैरेंट ऐप गेम के आंतरिक घटकों से सीधे जुड़े बिना ही घटनाओं पर प्रतिक्रिया दे सकता है।
सेटअप प्रवाह
React में गेम विजेट को कैसे embed करें
iframe को एक कंपोनेंट में लपेटें, यदि आवश्यक हो तो फ्रेम URL को मेमोराइज़ करें, और अनमाउंट होने पर संदेश श्रोताओं को साफ़ करें।
चरण 1
एक GameWidget घटक बनाएं
iframe को 100% चौड़ाई, एक स्थिर ऊंचाई, allow="fullscreen" और Games I Know फ्रेम URL के साथ रेंडर करें।
चरण 2
किरायेदार कॉन्फ़िगरेशन पास करें
अपने डैशबोर्ड डेटा को व्यवस्थित रखने के लिए, src को अपने tenantId और वैकल्पिक campaignId के साथ बनाएं।
चरण 3
उपयोग में सुनें प्रभाव
window.addEventListener("message", handler) संलग्न करें और उन संदेशों को फ़िल्टर करें जहां data.source gamesiknow है।
चरण 4
पुरस्कार देने से पहले सत्यापन करें
यदि रिएक्ट ऐप रिवॉर्ड अनलॉक करता है, तो कुछ भी प्रदान करने से पहले अपने बैकएंड को कॉल करें और हस्ताक्षरित परिणामों को सत्यापित करें।
कार्यान्वयन
रिएक्ट कार्यान्वयन संबंधी नोट्स
iframe घटक को सरल रखें। अधिकांश बग अस्थिर आकार निर्धारण, डुप्लिकेट श्रोताओं या ब्राउज़र संदेशों पर अत्यधिक भरोसा करने के कारण उत्पन्न होते हैं।
एक स्थिर कुंजी का उपयोग करें
प्रत्येक पैरेंट रेंडर पर iframe को पुनः माउंट न करें। गेम या टेनेंट सेटिंग्स में परिवर्तन होने तक src को स्थिर रखें।
श्रोताओं को साफ़ करें
useEffect से एक क्लीनअप फ़ंक्शन लौटाएँ ताकि React डेवलपमेंट मोड में डुप्लिकेट इवेंट हैंडलर न रह जाएँ।
यूआई को सत्यापन से अलग करें
रिएक्ट परिणाम जल्दी दिखा सकता है, लेकिन पुरस्कार या क्रेडिट संबंधी निर्णय आपके सर्वर पर होने चाहिए।
उपलब्ध खेल
वह गेम चुनें जो पेज के लिए उपयुक्त हो
Tic Tac Toe
Embed for same-screen play on your site, or send players to Games I Know to challenge a friend remotely with a room link.
Embed सेटअप
Four in a Row
Embed for local two-player drops on one screen, or link friends to play Four in a Row online from anywhere.
Embed सेटअप
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Embed सेटअप
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Embed सेटअप
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Embed सेटअप
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Embed सेटअप
अक्सर पूछे जाने वाले प्रश्न
रिएक्ट गेम विजेट के बारे में सामान्य प्रश्न
/embed/{gameSlug}/ और /embed/{gameSlug}/frame/ के बीच क्या अंतर है?
/embed/{gameSlug}/frame/ को iframe स्रोत के रूप में उपयोग करें। यह रूट वेबसाइट embed और postMessage इवेंट्स के लिए बनाया गया हल्का गेम फ्रेम है। /embed/{gameSlug}/ रूट लोगों के लिए सार्वजनिक पूर्वावलोकन और SEO पेज है, न कि iframe के अंदर रखने वाला रूट।
क्या आगंतुकों को कोई ऐप डाउनलोड करने या खाता बनाने की आवश्यकता है?
नहीं। आगंतुक ब्राउज़र iframe के अंदर फ़ोन, टैबलेट, लैपटॉप या डेस्कटॉप पर खेल सकते हैं। पार्टनर अकाउंट केवल वेबसाइट के मालिक को चाहिए जो embed इंस्टॉल करता है।
क्या मैं embed को अपने डोमेन तक सीमित कर सकता हूँ?
हाँ। Games I Know और embed पंजीकृत वेबसाइटों और डोमेन-प्रतिबंधित किरायेदार सेटिंग्स को ध्यान में रखकर डिज़ाइन किए गए हैं, इसलिए कॉपी किए गए iframe कोड को अनधिकृत साइटों पर स्वतंत्र रूप से पुन: उपयोग नहीं किया जा सकता है।
वर्तमान में कौन से Games I Know पद embed के लिए मान्य हैं?
Tic Tac Toe, Four in a Row, Bingo और I Know ब्राउज़र गेम के रूप में उपलब्ध हैं जिन्हें embed के साथ जोड़ा जा सकता है। embed का दस्तावेज़ीकरण सभी समर्थित गेमों में एक ही इवेंट मॉडल का उपयोग करता है।
क्या Games I Know एक React पैकेज है?
नहीं। Games I Know और embed, iframe पर आधारित हैं। इससे सेटअप फ्रेमवर्क-स्वतंत्र रहता है और साथ ही रिएक्ट कंपोनेंट्स के अंदर सुचारू रूप से काम करता है।
क्या आप ब्राउज़र गेम जोड़ने के लिए तैयार हैं?
एक पार्टनर खाता बनाएं, अपना डोमेन पंजीकृत करें और अपनी वेबसाइट के लिए डोमेन-प्रतिबंधित iframe जेनरेट करें।