Getting Started

Table of Contents

• 1. Installation
• 2. Configuration Project Settings
• 3. Using SCefView (Slate)
• 4. Using UCefView (UMG)
• 5. Using Blueprint

1. Installation

1. Install the UCefView plugin to your Unreal Engine project from Fab. UCefView on Fab UCefView on Fab
2. Ensure the plugin is enabled in the Plugins window (Edit -> Plugins).

Warning

UCefView is not compatible with Unreal’s built‑in Web Browser plugin when used side‑by‑side. Please disable Unreal’s built‑in Web Browser plugin in your project via Edit > Plugins > Built-in > UI > Web Browser.

2. Configuration Project Settings

Navigate to Edit -> Project Settings...: Engine -> Cef Settings to configure the global CEF settings for your project. Key settings include:

Cef Settings

• Locale: Sets the locale for the CEF browser.
• User Agent: Defines the user agent string used by the browser.
• Accept Language List: Specifies the accepted languages for web requests.
• Command Line Args: Additional command-line arguments to pass to the CEF browser process.
• Builtin Scheme Name: The scheme name for builtin resources.
• Bridge Object Name: The name of the JavaScript object used for the C++ bridge.
• Disable Sandbox: Whether to disable the sandbox for the UCefViewHelper processes.

Note

Regarding macOS platform, CEF doesn't support sandbox enable on main process, this means if you want to ship a game product with UCefView plugin, you need to disable the App Sandbox feature for your Unreal project in generated Xcode project.

For more details, please refer to the UCefSettings class.

3. Using SCefView (Slate)

1. In your Slate-based UI, include the SCefView.h header file.
2. Create an instance of the SCefView widget.
3. Use the SCefView::SetUrl method to load a URL into the WebView.
4. Customize the appearance and behavior of the WebView using the FCefViewSettings structure.
5. Bind events such as SCefView::OnLoadStart, SCefView::OnLoadEnd, and SCefView::OnConsoleMessage to handle WebView events in your C++ code.

   // In your .h file
   #include "Slate/SCefView.h"
    
   TSharedPtr<SCefView> MyWebView;
    
   // In your .cpp file, inside a method like SNew
   SNew(SCefView)
       .Url(TEXT("https://www.google.com"))
       .OnLoadStart(this, &SMyWidget::HandleLoadStart)
       .OnLoadEnd(this, &SMyWidget::HandleLoadEnd)  

4. Using UCefView (UMG)

1. Open your Widget Blueprint in the UMG editor.
2. In the Palette window, search for UCefView and drag it into your widget hierarchy.

1. In the Details panel, set the UCefView::Url property to load a URL into the WebView.
2. Customize the appearance and behavior of the WebView using the available properties.
3. Bind events such as UCefView::OnLoadStart, UCefView::OnLoadEnd, and UCefView::OnConsoleMessage to handle WebView events in your Blueprint graph.

5. Using Blueprint

UCefView provides several Blueprint widgets, you can customize your own browser with them.

• WBP_CefView: A basic user widget that encapsulates a single UCefView component.
• WBP_CefViewBrowserTab: A user widget that includes a UCefView component along with an address bar and navigation buttons (back, forward, reload).
• WBP_CefViewSingleTabBrowserWindow: A complete single-tab browser window widget.
• WBP_CefViweMultipleTabBrowserWindow: A complete multiple-tab browser window widget.

Custom With Blueprint