Thanks you for the plugin! 
This works great except my editor freezed when enabling web-gl on 4.23.1.
Any suggestions?
For anyone who’s using VSCode, I put together a simple type declarations file for this so I could get autocompletion/Intellisense working:
declare const ue: {
/**
* Object providing communication with UE4.
*
* The `broadcast` method sends data to UE4.
*
* All other properties should be functions to be called from UE4 by the `Call` function of the WebInterface widget blueprint.
*/
interface: {
/**
* Sends data to UE4 by calling the 'OnInterfaceEvent' event dispatcher.
*
* @param name Pseudo-event name to be passed to the `Name` event parameter.
* @param data Optional value to be passed to the `Data` event parameter as a UE4 `JSON Value`.
*/
broadcast(name: string, data?: any): void;
} & {
[key: string]: (data?: any) => void;
};
};
/**
* Alias for `ue.interface.broadcast`.
*
*/
declare const ue4: typeof ue.interface.broadcast;
You can save the above into a d.ts file (I named it “ue4.d.ts”) and then add this line to the top of any Javascript file to get Intellisense in VSCode:
/// <reference path="[PATH_TO_FILE]" />
where [PATH_TO_FILE] is the location of the ue4.d.ts file. It should provide Intellisense for Typescript files, too.
[Edit] Added some docstrings.
Does anyone know if it’s possible to upgrade UE4’s embedded Chromium version? It can’t be as simple as downloading the latest Chromium source and rebuilding the plugin with it, can it?
Love this Plugin 
A little problem I found is that target=“_blank” on <a> tag is broken, on default WebBrowser I can use OnBeforePopup to fix it, but now I couldn’t find it on WebInterface widget 
Zhong.
@ Because I have project really need this reall appreciate for your help 
Thanks for pointing that out but <a target=“_blank”> is not broken and was disabled ON PURPOSE. In fact all popups have been explicitly disabled by the plugin AS THE INTENDED FUNCTIONALITY. The only exception to this is the Chrome Dev Tools popup which the plugin allows in development builds.
The point of this plugin is to develop web-based user interfaces and to communicate with these browser instances via JSON using the OnBroadcast event. When you click <a target=“_blank”> the engine will automatically create a new window but it is not a WebUI widget and you have no OnBroadcast event to communicate with the popup. Moreover popup windows in UE4 are a little buggy when closing the popup as they break the parent web browser.
So popups will not be supported in the plugin. However if you absolutely need to get popups working then you can edit the source code and compile the plugin yourself. You can see in the OnBeforePopup method that it always returns TRUE which indicates that the popup was handled:
Again the only exception to this is when the URL matches the Chrome Dev Tools in which case it returns FALSE and UE4 will create a popup. So if you remove the code in this function and just have it always return FALSE then you can achieve legacy popup functionality in the engine. There are instructions in the documentation on how to compile the plugin yourself.
Now the INTENDED FUNCTIONALITY is for you to use the global ue4(…) helper function to relay information to the engine. That means if you want to create a popup for some reason (even though it really is an awful design strategy for games) you should bind an OnClick event in JavaScript to the <a> tag such that you can trigger the OnBroadcast event and handle the popup yourself. There really is no reason to be using <a target=“_blank”> if developing your own custom user interface.
However if you are loading a website that uses <a target=“_blank”> (or any similar situation where you do not have control over the interface) then you might actually need to respond to these popup events. So while that function always returns TRUE you can see it also always triggers the OnBeforePopup event of the parent widget allowing you to respond to these events. However it seems this event was not relayed to UMG (blueprints) meaning you cannot access it without extending the Slate widget yourself.
Therefore I’ll make a note to add this event to the UMG widget allowing for access in blueprints to the OnBeforePopup event. But as mentioned popup functionality itself will always remain disabled in this plugin.
Downloads: https://github.com/tracerinteractive/UnrealEngine/releases
Documentation: https://cdn.tracerinteractive.com/webui/documentation.pdf
This plugin includes a new 3D widget interaction component that leverages the transparency features from the update last year. It allows you to place a web interface widget in the physical world that’s not only interactable but allows the virtual pointer to passthrough the transparent regions of the browser:
The interface event has also been updated with a new callback feature that allows you to call a callback function in the browser. An updated global [FONT=Courier New]ue4(…) helper function is provided that generates a temporary callback on the [FONT=Courier New]ue.interface object:
This new helper function forwards the UUID of the temporary callback to the engine which can then choose to call the callback with an optional data argument:
The global [FONT=Courier New]ue4(…) helper also manages the lifetime of the callback and will automatically remove it from the [FONT=Courier New]ue.interface object after a specific timeout period.
Finally the JSON library has been updated with support for vector, rotator, and transform object wrappers:
These new features look great, can’t wait to try them out 
Thanks!
very useful, thank you!
Nice! Just curious, did you do those graphs using D3?
Sheesh. You are way better at HTML/CSS/JS than I am.
Did you use a framework like React or something for this?
I did graphs using EChart.js
No framework just pure HTML + JS
Zhong.
Is there a public link of this plugin still available? Looks like the github link for the repo is down.
I first tested this out with the latest UE install and noticed the slider in the sample html wouldn’t drag unless you moved the mouse really slowly. So then I compiled the latest, which is 4.25.3, and had to also recompile the webui and json plugins, with the webGL disabled and I’m still having that issue. Anyone else notice this?
Yes, it seems the UE4 web browser widget is screwy with the HTML drag and range functionality - see here: FREE: Web UI (HTML/CSS/JS Interface) - #35 by spidershift - Marketplace - Unreal Engine Forums
JavaScript-based dragging seems to work fine, though.
Thanks much!
I’m using UE 4.25 and using Webbrowser. Issues come from when I press some key when enable the IME option using another language different EN(Such as Ko,Jp, China…). IME allows the input of Windows change status enables to be disabled.
And history according to Release notes: https://docs.unrealengine.com/en-US/…_18/index.html
Release Note:New: Chromium Embedded Framework (CEF) upgraded to branch 3071 Win32/Win64/Mac. Added web browser support for foreign language character input via IME.
But Webbrowser still occur issues when user input IME. Facing on Windows OS 10, and many PC has the same issues. Please help me.
https://user-images.githubusercontent.com/26614687/93008444-e42cca80-f59e-11ea-98ae-24982a85e891.png
@ I’m having trouble using the 3D widget on Android builds. The Widget component doesn’t show anything at all! I’m on UE 4.25 with the latest version of the plugins.
As a side note, I’ve tried with the vanilla WebBrowser from Epic, and it shows a Black rectangle where the widget component should be. My guess is these issues are related.
Is anybody else having the same issue?
Thank you for reporting this issue. I already replied to your post on github, but double posting both here and on github is not necessary so please choose one or the other next time so we’re not wasting time going over the same issue twice.
I’m not sure why the 3D widget component wouldn’t render on mobile, but that’s an engine related issue. The only modifications made by this plugin to 3D widgets is the implementation of a custom 3D widget interaction component, which isn’t even the 3D widget itself. The interaction component is just the “laser pointer” that allows you to interact with the widget in a 3D space. It’s completely built into the engine and they do all the mapping from 3D to 2D space, handling of the virtual mouse events, ect. So basically what this plugin does for 3D widgets is implement a custom interaction component that leverages the custom transparency features to allow this “laser pointer” to passthrough the transparent regions of the browser. Everything else involving 3D widgets is the vanilla engine and any issue you’re having is an engine related issue.
Now focusing on the transparency feature itself, the 2D transparency would not work on mobile at all, or at least, not without a cursor since it requires the mouse position in order to do a transparency lookup and toggle whether or not the widget is hit testable. This simply doesn’t translate to a touch-based user interface, and there isn’t anything in the plugin that hooks into the engine event system that could handle or passthrough mouse/touch events based on the transparency of the browser at the location of the click/touch event.
However the 3D transparency could technically work on mobile since you could still utilize a laser pointer of sorts, but not really as intended. So I’m not really sure what you’re looking to accomplish if you plan on using the 3D widget for anything other than rendering because 3D interaction probably isn’t going to be really fluid on mobile. And again, this only relates to the interaction itself, because the component that actually renders the widgets in the 3D world is a built in engine feature and has nothing to do with the plugin. So if you cannot get the 3D widget component to render on Android, that’s something you’ll need to report to Epic Games.