Permukaan komponen kecil
Komponen React Anda hanya perlu merender iframe, mengubah ukurannya, dan secara opsional mengelola event handler.
Widget game React
Widget game React untuk game berbasis browser.
Tim React tidak perlu membangun game dari awal untuk menambahkan widget yang dapat dimainkan. Render Games I Know iframe di dalam komponen React, berikan URL frame, dan dengarkan event postMessage ketika aplikasi induk membutuhkan status game.
Komponen Iframe
Pendengar pesan reaksi
Pembungkus responsif
Dukungan penyelesaian yang ditandatangani
Jawaban singkat
Gunakan rute frame, lalu tambahkan konteks halaman.
Di React, buat komponen iframe kecil untuk /embed/{gameSlug}/frame/, berikan tenantId sebagai parameter URL, dan lampirkan listener pesan untuk event Games I Know.
Cobalah widget game yang kompatibel dengan React.
Demo ini menunjukkan iframe dan event halaman induk yang dapat diikuti oleh aplikasi React Anda.
Pengembang React menambahkan game embed
Mengapa tim React menggunakan widget iframe
Sebuah iframe menjaga agar runtime game tetap terpisah dari aplikasi Anda, namun tetap memungkinkan integrasi berbasis event.
Tidak ada paket mesin game.
Gim ini tidak akan menambah ukuran paket aplikasi React Anda dengan logika papan, aset, atau kode waktu nyata.
Batas integrasi yang jelas
Aplikasi induk dapat bereaksi terhadap peristiwa tanpa terhubung langsung ke internal game.
Alur pengaturan
Cara embed widget game di React
Bungkus iframe dalam sebuah komponen, simpan URL frame jika diperlukan, dan bersihkan pendengar pesan saat dilepas.
Langkah 1
Buat komponen GameWidget.
Render sebuah iframe dengan lebar 100%, tinggi tetap, allow="fullscreen", dan URL frame Games I Know.
Langkah 2
Lewati konfigurasi penyewa
Buat atribut `src` dengan `tenantId` dan `campaignId` (opsional) agar data dasbor Anda tetap terorganisir.
Langkah 3
Dengarkan saat menggunakan efek
Lampirkan window.addEventListener("message", handler) dan saring pesan di mana data.source adalah gamesiknow.
Langkah 4
Verifikasi sebelum memberikan hadiah
Jika aplikasi React membuka hadiah, panggil backend Anda dan verifikasi hasil yang telah ditandatangani sebelum memberikan apa pun.
Pelaksanaan
Catatan implementasi React
Pertahankan komponen iframe tetap sederhana. Sebagian besar bug berasal dari ukuran yang tidak stabil, pendengar duplikat, atau terlalu mempercayai pesan browser.
Gunakan kunci yang stabil.
Jangan melakukan remount iframe pada setiap render induk. Pertahankan src tetap stabil kecuali pengaturan game atau tenant berubah.
Bersihkan pendengar
Kembalikan fungsi pembersihan dari useEffect agar mode pengembangan React tidak meninggalkan penanganan event yang duplikat.
Pisahkan antarmuka pengguna (UI) dari verifikasi.
React dapat menampilkan hasilnya dengan cepat, tetapi keputusan mengenai hadiah atau kredit harus dilakukan di server Anda.
Permainan yang tersedia
Pilih permainan yang sesuai dengan halaman.
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.
Pengaturan 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.
Pengaturan Embed
Bingo
Same-screen Bingo in your embed, or host a remote room so players can join from their own devices.
Pengaturan Embed
I Know
Quick trivia in your embed on one screen, or run a live room so friends can answer from anywhere.
Pengaturan Embed
Sudoku
Embed a solo Sudoku puzzle for calm brain breaks on blogs, school pages, and waiting-room screens.
Pengaturan Embed
Word Search
Embed a solo Word Search puzzle for quick brain breaks on blogs, school pages, and waiting-room screens.
Pengaturan Embed
Pertanyaan yang Sering Diajukan (FAQ)
Pertanyaan umum tentang Widget game React
Apa perbedaan antara /embed/{gameSlug}/ dan /embed/{gameSlug}/frame/?
Gunakan /embed/{gameSlug}/frame/ sebagai src iframe. Rute tersebut adalah kerangka game ringan yang dibangun untuk embed situs web dan peristiwa postMessage. Rute /embed/{gameSlug}/ adalah halaman pratinjau publik dan SEO untuk orang-orang, bukan rute yang ditempatkan di dalam iframe.
Apakah pengunjung perlu mengunduh aplikasi atau membuat akun?
Tidak. Pengunjung dapat bermain di dalam browser iframe di ponsel, tablet, laptop, atau desktop. Akun mitra hanya diperlukan oleh pemilik situs web yang memasang embed.
Bisakah saya membatasi embed hanya untuk domain saya sendiri?
Ya. Games I Know embed dirancang berdasarkan situs web terdaftar dan pengaturan penyewa yang dibatasi domain, sehingga kode iframe yang disalin tidak dapat digunakan kembali secara bebas di situs yang tidak berizin.
Judul Games I Know mana yang saat ini embed dapat digunakan?
Tic Tac Toe, Four in a Row, Bingo, dan I Know tersedia sebagai game browser yang dapat dimainkan di embed. Dokumentasi embed menggunakan model event yang sama di seluruh game yang didukung.
Apakah Games I Know merupakan paket React?
Tidak. Games I Know embeds berbasis iframe. Itu menjaga agar pengaturan tetap independen dari kerangka kerja sambil tetap berfungsi dengan baik di dalam komponen React.
Siap menambahkan game browser?
Buat akun mitra, daftarkan domain Anda, dan hasilkan iframe yang dibatasi domain untuk situs web Anda.