Webview
The WebView object acts as an embedded browser directly within your Custom Launcher. It allows you to display live, external web pages, web apps, or HTML files without forcing the user to leave your interface.
Whether you want to show a live dynamic server store, a web-based changelog, a community forum, or a custom HTML/JS registration form, the WebView provides a seamless window to the web. It bridges the gap between your standalone application and your online infrastructure.
The WebView object requires the Developer Edition. It provides advanced embedding capabilities and can even communicate with the launcher via JavaScript postMessage events.
WebView Overview
When placed on the canvas, the WebView acts as a container for an internal iframe. You specify a URL, and the engine handles loading and rendering the remote content inside the bounds of the object.
Typical Uses
- ❖ Embedding a live server donation store
- ❖ Displaying formatted HTML patch notes
- ❖ Loading a custom web-based login portal
- ❖ Showing community leaderboards or stats
Default Settings
| Property | Default Value |
|---|---|
| Dimensions | Width: 400, Height: 300 |
| URL | https://example.com |
Properties
The WebView setup is straightforward but powerful.
Page Settings
- URL: The full web address to load. It must include
https://orhttp://. - Load at Start: If checked, the WebView will automatically begin navigating to the URL the moment the launcher page appears. If unchecked, the frame will remain blank until triggered by an action.
Understanding CORS and Iframe Restrictions
Because the WebView utilizes an internal iframe structure, it is subject to standard web security policies. This is the most important concept to understand when using this object.
Many modern websites (like Google, YouTube, or major social networks) explicitly block themselves from being embedded inside other applications to prevent security risks like clickjacking. They do this using HTTP headers like X-Frame-Options: DENY or restrictive Content-Security-Policy: frame-ancestors.
If you point your WebView to a site with these restrictions, the editor may display a fallback block reading "Live preview unavailable here" or "Preview blocked by site policy".
How to Fix Embedding Issues (Server-Side)
If you are trying to embed your own website (e.g., a WordPress site, a custom PHP script, or a Node.js app) and it is being blocked, you must modify your server's configuration to allow the launcher to frame it.
You need to adjust or remove the headers that block embedding.
For Apache (.htaccess):
# Allow framing from anywhere (Less Secure) Header always unset X-Frame-Options Header always unset Content-Security-Policy
For Nginx:
# Remove the restricting header proxy_hide_header X-Frame-Options;
For WordPress:
Some security plugins (like Wordfence) automatically add X-Frame-Options: SAMEORIGIN. You may need to disable that specific setting within the plugin's security options to allow the launcher to display your site.
The editor will warn you if a site blocks embedding during the preview phase. However, always test your WebView in the compiled runtime, as the underlying engine in the built launcher sometimes handles cross-origin policies differently than the web-based editor.
ByteBox Media can only provide this level of support for this issue if it exists for you. If you need any further assistance, please contact your website or server provider as this is out of our realm.
Events
The WebView object can notify your launcher when pages load or fail, allowing you to hide loading spinners or show error graphics.
| Event | Description |
|---|---|
| onPageLoaded | Fires when the web page finishes loading successfully. |
| onPageError | Fires when the webview fails to load a page or resource. |
| onMessageReceived | Fires when the embedded web page posts a message back to the launcher using the JavaScript postMessage bridge. |
Actions
You can interact with the WebView dynamically using specific actions.
| Action | How it works |
|---|---|
| Open URL (Send to WebView) | The Open URL action can be configured to send a payload to a target WebView instead of opening the system browser. This requires setting sendToWebview to true and providing the target webviewObjectName. |
Building Logic with the WebView
Example: Smooth Loading Experience
Hide the white flash of a loading web page by keeping the WebView invisible until it's ready.
- Place a WebView object on your page and set its URL.
- In the object properties, ensure Load at Start is checked, but use the editor to hide the object initially (or place a Loading GIF over it).
- Select the WebView and assign an action to the onPageLoaded event.
- Set the action to Show Objects and target the WebView itself. The page will only appear once fully loaded.
Custom CSS Example
Because the WebView sits inside a container, you can use Custom CSS to style its outer bounds, creating seamless borders or rounded corners that match your launcher theme.
Custom CSS styles the container of the WebView, not the contents of the website itself. You cannot inject CSS into the remote website due to cross-origin security policies.
/* Developer Edition Custom CSS Example for WebView Container */
/* Adds a glowing blue border and rounded corners */
border: 2px solid #3b82f6 !important;
border-radius: 12px !important;
box-shadow: 0 0 15px rgba(59, 130, 246, 0.3) !important;
overflow: hidden !important;
Summary
The WebView object is an essential tool for creating a connected Custom Game Launcher. By understanding how to manage its URL settings and ensuring your web server allows embedding, you can integrate rich, dynamic web content directly into your application.