Zo voeg je HTML5-games toe aan een bedrijfswebsite
Drie manieren om een game op een zakelijke site te zetten, via iframe, je eigen hosting of een gamepakket, en wat je controleert voordat hij live gaat.
Er zijn drie manieren om een game aan een bedrijfswebsite toe te voegen: een game insluiten die iemand anders hostt, met een iframe; de bestanden van een game uploaden naar je eigen webruimte en op een pagina tonen; of een game als pakket licentiëren en die als eigen game publiceren. De eerste is het snelst om uit te proberen. De tweede geeft je de meeste controle. De derde kies je als de game op de lange termijn je merk moet dragen.
Deze gids is voor bedrijven, bureaus en sitebeheerders op WordPress, Wix, een maatwerksite, een intranet of een portaal. Hij vergelijkt de opties, geeft een checklist om vóór de lancering te doorlopen en somt op wat een Polar Games-pakket bevat. Het is algemene informatie, geen juridisch advies.
Drie manieren om een game op je website te zetten
- Insluiten met een iframe. Een game die elders wordt gehost verschijnt in een kader op je pagina. Je schrijft één tag, maar de game, de updates en de beschikbaarheid blijven bij degene die hem hostt.
- De bestanden zelf hosten. Je uploadt de map van de game naar je eigen webruimte en opent die op je eigen adres, op zichzelf of in een iframe op een van je pagina's. Voor onze pakketten is een host die statische bestanden serveert genoeg: om te spelen is geen PHP, database of account nodig.
- Een game als pakket licentiëren. De studio levert een kant-en-klare map, de bewerkbare broncode en een handleiding, onder een licentie voor één eindproduct. Jij hostt hem, en je mag de code, het beeld en de audio binnen dat product wijzigen.
Iframe of je eigen hosting: de vergelijking
- Snelheid: een kader laadt de game van de server van de host, dus je pagina hangt van die server af. Bestanden op je eigen host laden vanaf een adres dat jij beheert.
- Controle: op je eigen host bepaal jij het adres, de pagina rond de game, caching en updates. Bij andermans embed bepaalt de host dat, en kan die de game wijzigen of verwijderen.
- Cookies en toestemming: een game die van een adres van derden wordt geladen, laat je bezoekers contact maken met dat adres, en die partij kan eigen cookies plaatsen of bezoeken meten. Zelf gehoste bestanden komen van je eigen domein. Advertenties en analytics kunnen, waar ze ook draaien, toestemming vereisen, dus controleer met een gekwalificeerde adviseur welke regels voor jou gelden.
- Zoekmachines: reken er niet op dat een game in een iframe tekst levert voor je pagina. Schrijf zelf je kop, een korte beschrijving, de uitleg en een link rond de game.
De iframe-tag, attribuut voor attribuut
Een gebruikelijke embed voor een game die je zelf hostt. De opmerkingen bij de attributen komen uit de iframe-referentie van MDN.
<iframe src="https://your-site.example/games/my-game/" title="My Game" loading="lazy" allow="fullscreen" width="960" height="540" style="border:0"></iframe>
- title: volgens MDN kunnen schermlezergebruikers dit gebruiken om de inhoud van het kader te benoemen, en het moet die inhoud beknopt beschrijven.
- allow="fullscreen": MDN definieert het verouderde attribuut allowfullscreen als allow="fullscreen *". Zonder die toestemming kan een kader van een ander adres niet schermvullend worden.
- sandbox: laat het weg bij een game die je zelf hostt. MDN raadt sterk af om allow-scripts samen met allow-same-origin te gebruiken in een kader van dezelfde oorsprong, omdat het kader dan zijn eigen sandbox kan verwijderen.
- Een leeg kader of een weigering om verbinding te maken: de server die de game hostt kan X-Frame-Options sturen (DENY blokkeert alle kaders, SAMEORIGIN staat alleen dezelfde oorsprong toe) of een frame-ancestors-regel in een Content-Security-Policy-header, wat MDN aanbeveelt. Pas de header aan voor de map van de game, of serveer pagina en game vanaf één adres.
Lees de praktische gids over hosten en insluiten
Checklist voordat je publiceert
- HTTPS overal. Een https-pagina kan geen http-iframe laden: MDN noemt scripts en iframes als verzoeken die browsers blokkeren als gemengde inhoud.
- Telefoons. Open hem op een echte telefoon, in beide oriëntaties, binnen je pagina.
- Geluid. MDN zegt dat browsers hoorbaar automatisch afspelen over het algemeen pas toestaan nadat de bezoeker met de pagina heeft gewerkt. Reken op stilte tot de eerste tik en ontwerp het startscherm rond een tik.
- Schermvullend en talen. Controleer dat de knop voor schermvullend binnen het kader verschijnt en dat de talen van de game je publiek dekken.
- Basis toegankelijkheid. Geef het kader een titel, bied een link die de game op zichzelf opent, controleer tekstgrootte en contrast, en zeg welke de bediening is. Houd essentiële informatie als gewone paginatekst, niet binnen de game.
- Privacy en toestemming. Noteer wat er op de pagina draait: advertentiescripts, analytics, lettertypen van andere hosts. Werk je privacyverklaring bij. Gebruik je advertenties of analytics, vraag je adviseur dan of toestemming nodig is volgens de lokale wet.
Twaalf zaken om te controleren voordat je voor een game betaalt
Wat een Polar Games-pakket bevat
Elke editie somt zijn inhoud op de marketplace-pagina, en je kunt een live demo spelen voordat je koopt. In het algemeen krijg je:
- Een kant-en-klare map game/. De vereisten die onze edities noemen zijn een moderne browser en een willekeurige HTTP(S)-host die statische bestanden serveert. Hosting heeft geen database en geen buildstap nodig. Twee edities, Zabum en Ricopop, hebben een optioneel scorebord dat PHP 7.4 of nieuwer vereist.
- Een bewerkbare map source/ en een handleiding in documentation/ met hoofdstukken over installatie en aanpassen.
Vijf edities, waaronder Gridspark en Velvet Pool, zijn gewoon JavaScript. De andere zijn geschreven in TypeScript en sommige gebruiken bibliotheken zoals Three.js of Phaser, maar de map game/ is al gebouwd. Node.js heb je alleen nodig om de broncode te bewerken en opnieuw te bouwen.
Niet inbegrepen: hosting, installatie op je server, aanpassingen, nieuwe functies, en SDK- of portalintegratie. De voorwaarden noemen deze als aparte diensten, vooraf in een offerte. Ondersteuning dekt vragen over het installeren en gebruiken van de geleverde bestanden en reproduceerbare defecten, 6 maanden, of 12 met de verlenging.
Bekijk Gridspark, een puzzeleditie in gewoon JavaScript
Bekijk Velvet Pool, een 3D-pooleditie
Licentie, facturen en pakketten
- Eén licentie dekt één eindproduct, voor jou of voor één klant. Een bureau dat voor meerdere klanten bouwt, heeft voor het product van elke klant een licentie nodig.
- De licentie is eeuwigdurend en verloopt niet als de ondersteuning eindigt. Bezoekers mogen gratis spelen of via advertentie-inkomsten.
- We geven op verzoek een Braziliaanse nota fiscal uit, of een factuur voor klanten in het buitenland.
- Meerdere items tegelijk kopen levert korting op de lijstprijzen op: 5% voor twee, 10% voor drie, 15% voor vier, 20% voor vijf of meer.
De licentie uitgelegd, clausule voor clausule
Wanneer een game met jouw merk zinvol is
Een standaardtemplate is genoeg als je snel een goede game op een pagina wilt. Een eigen versie is zinvol als de game je logo, kleuren, teksten en regels moet dragen, als hij bij een campagne moet passen, of als hij moet werken binnen een platform dat je al gebruikt. We nemen projecten op maat en witlabelwerk aan. Prijzen en levertijden hangen af van de opdracht, dus we noemen er geen: stuur het template dat je wilt en wat je wilt laten wijzigen, en vraag een offerte aan.
Contact: willian@polargames.com.br
Engine, template of gewoon JavaScript: welke kies je
Veelgestelde vragen
Helpt een game in een iframe de SEO van mijn pagina?
Reken er niet op. Schrijf koppen, een beschrijving en uitleg rond de game als gewone paginatekst.
Bevatten de games advertenties of tracking?
De edities noemen advertentie-SDK's en advertentieaccounts als niet inbegrepen. Wat je eigen pagina toevoegt, zoals analytics of advertenties, moet jij openbaar maken en, waar vereist, toestemming voor vragen.
Volgende stap
Kies een game in de marketplace, speel de demo en lees de handleiding. Kies dan de manier die bij je site past, en schrijf ons als je je merk erop wilt.
Witlabel HTML5-games: wat je krijgt en wat je moet vragen