Getting Started

Table of Contents

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

1. Installation

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

2. Configuration

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

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 Xcode.

for more details please refer to UCefSettings

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.

4. Using UCefView (UMG)

1. In your UMG-based UI, add a UCefView widget to your widget hierarchy.
2. In the Details panel, set the UCefView::Url property to load a URL into the WebView.
3. Customize the appearance and behavior of the WebView using the available properties.
4. 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.uasset
The UUserWidget encapsulates a single UCefView

WBP_CefViewBrowserTab.uasset
The UUserWidget encapsulates a single UCefView, address bar and navigation buttons

WBP_CefViewSingleTabBrowserWindow.uasset
A single tab browser

WBP_CefViweMultipleTabBrowserWindow.uasset
A multiple tabs browser

Custom With Blueprint