How to get QWebEngine in QT Designer

Question

I am trying to make a program for captioning youtube videos because they removed the community captions functionality last year. I want to be able to use the QWebEngine widget when in QT Designer but it isn't part of the main distribution and I cannot find the steps to install it on Windows.

Answer 1

C++

The problem is similar to this post but instead of QChartView you want QWebEngineView so my answer will be more concise and I will only point out the changes:

Promoted

1. First add QT += webenginewidgets in the .pro
2. Place the QWidget to the design.
3. Right click on the QWidget and select Promote to...
4. When doing the above, a menu appears, in the menu it should be set in QWebEngineView in Promoted Class Name, and QWebEngineView in Header file, then press the add button and finally press promote.

Plugin

You must clone the repository using the branch of your Qt version, in the example I will use Qt 5.15.2, then you must compile the plugin and install it:

git clone -b 5.15.2 https://code.qt.io/qt/qtwebengine.git
cd qtwebengine/src/plugins/qwebengineview
qmake .
make
make install

If you don't want to clone the project then you could download the files from here and run qmake, make and make install.

---

Python

It seems that the OP is using python and not C++ so the first solution has another methodology, but the second method still works as it installs the plugin for QtDesigner. Considering the above I am going to show simple methods to integrate QWebEngineView in QtDesigner.

Promoted

You just have to use steps 2 to 4 but setting the header "PyQt5.QWebEngineWidgets", and for example you will get the following:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QWebEngineView" name="widget"/>
    </item>
    <item>
     <widget class="QPushButton" name="pushButton">
      <property name="text">
       <string>PushButton</string>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>28</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <customwidgets>
  <customwidget>
   <class>QWebEngineView</class>
   <extends>QWidget</extends>
   <header>PyQt5.QWebEngineWidgets</header>
   <container>1</container>
  </customwidget>
 </customwidgets>
 <resources/>
 <connections/>
</ui>

If you are going to use PySide2 then just change it to PySide2.QtWebEngineWidgets.

Container

Another simpler option is to use QWidget as a container and then use a layout to place it.

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <item>
     <widget class="QWidget" name="widget" native="true"/>
    </item>
    <item>
     <widget class="QPushButton" name="pushButton">
      <property name="text">
       <string>PushButton</string>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>28</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

import os
from pathlib import Path

from PyQt5.QtWidgets import QApplication, QMainWindow, QVBoxLayout
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.uic import loadUi

CURRENT_DIRECTORY = Path(__file__).resolve().parent


class Widget(QMainWindow):
    def __init__(self, parent=None):
        super().__init__(parent)
        filename = os.fspath(CURRENT_DIRECTORY / "gui.ui")
        loadUi(filename, self)
        lay = QVBoxLayout(self.widget)
        self.webview = QWebEngineView()
        lay.addWidget(self.webview)


def main():
    import sys

    app = QApplication(sys.argv)
    w = Widget()
    w.show()
    sys.exit(app.exec_())


if __name__ == "__main__":
    main()

_{Note: Promoting a widget does not allow modifying the widget's properties in QtDesigner, only that it can be used when the .ui is loaded into the project.}