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.

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