# Classroom SDK & Proctor SDK (/en/realtime-media/flexible-classroom/build/integrate-the-sdks/integrate-flexible-classroom/electron)
> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).
This page introduces how to add Flexible Classroom into your app.
## Electron [#electron]
The following figure shows the overall technical architecture of Flexible Classroom:
## Integration methods [#integration-methods-1]
You can use multiple methods to integrate Flexible Classroom into your Electron project. Depending on whether you need to customize the classroom UI, you can choose different integration methods:
* If you are satisfied with the default UI of Flexible Classroom and do not want to change any of it, integrate the whole Flexible Classroom through CDN.
* If you want to customize the classroom UI based on the default UI of Flexible Classroom, download and use the [source code](https://github.com/AgoraIO-Community/flexible-classroom-desktop/tree/release/2.8.13) on GitHub to integrate Flexible Classroom.
### Use the default UI of Flexible Classroom [#use-the-default-ui-of-flexible-classroom-2]
To integrate the whole Flexible Classroom through CDN if you're satisfied with the default UI of Flexible Classroom and do not want to change any of it, follow this integration method. You must have an existing Electron project using an Electron version higher than 12.0.0 to use this method.
1. Add the following code to the Electron entry file:
```javascript
const electron = require('electron');
app.allowRendererProcessReuse = false;
```
2. When creating a `BrowserWindow` object, pass in the following parameters:
```javascript
mainWindow = new BrowserWindow({
...
webPreferences: {
...
autoplayPolicy: "no-user-gesture-required",
nodeIntegration: true,
contextIsolation: false,
webSecurity: false,
webviewTag: true,
enableRemoteModule: true,
nativeWindowOpen: true,
backgroundThrottling: false
}
});
```
3. Add the following dependencies and configurations to `package.json`:
```javascripton
"agora_electron": {
"electron_version": "12.0.0",
"prebuilt": true
},
"dependencies": {
...
"agora-electron-sdk": "3.6.1-rc.9-build.817"
"adm-zip": "0.4.14",
}
```
4. Import the Agora Classroom SDK in the HTML file and launch a classroom.
Tip
Flexible Classroom's dependency `agora-electron-sdk` contains the native Node.js module. It is not recommended to use webpack and other construction tools for secondary compilation; otherwise, there may be an error that the Node.js module cannot be found. It is recommended to set these two libraries as external dependencies in the project configuration. For example: `externals: {'agora-electron-sdk': 'commonjs2 agora-electron-sdk'}`.
```html
```
The sample code requires passing in `rtmToken`. You can refer to [Generate a Signaling token](/en/realtime-media/flexible-classroom/build/manage-agora-account#generate-temporary-tokens) to learn what is a Signaling token, how to get a temporary Signaling token for testing purpose, and how to generate a Signaling token from the server. The generated token passed in `userId` must be consistent with the `userUuid` parameters passed in the `launch` method; otherwise, the generated token will be invalid.
### Customize the classroom UI [#customize-the-classroom-ui-2]
If you want to customize the classroom UI based on the default UI of Flexible Classroom, you need to integrate Flexible Classroom by downloading the source code on GitHub. Refer to the following steps:
Make sure you have [set up the development environment](/en/realtime-media/flexible-classroom/quickstart#prerequisites).
1. To clone the Flexible-Classroom-Desktop repository and check out the latest release branch, run the following commands:
```bash
git clone https://github.com/AgoraIO-Community/flexible-classroom-desktop.git
cd flexible-classroom-desktop
```
2. Switch to the latest branch.
For example, if you want to switch to the branch of v2.9.40, just run the following command:
```bash
git checkout release/2.9.40
```
Agora recommends switching the branch to the latest release.
3. Modify the code according to your needs. See [Classroom and Proctor SDK UI customization guide](/en/realtime-media/flexible-classroom/build/customize-the-ui-and-plugins/customize-classroom).
4. Debug your code.
After finishing the development, follow these steps to debug:
1. To install dependencies, run the following commands:
```bash
yarn install:packages
```
2. To run the project in development mode, use the following command:
```bash
yarn dev:classroom:electron
```
5. After finishing the development, package the SDK or app with the following commands:
* To package the Electron macOS client:
```bash
yarn pack:classroom:sdk
yarn pack:classroom:plugin
yarn ci:build
yarn pack:electron:mac
```
* To package the Electron Windows client:
```bash
yarn pack:classroom:sdk
yarn pack:classroom:plugin
yarn ci:build
yarn pack:electron:win
```
## Frequent issues [#frequent-issues-1]
### Installation of the `agora-electron-sdk` module fails [#installation-of-the-agora-electron-sdk-module-fails-1]
If you seem unable to install the `agora-electron-sdk` module under the Linux system, it is because the current operating system of the module does not support Linux. Take the following steps to solve the problem:
1. Modify the `package.json` configuration parameters: In the project's `agora_electron` root directory set `platform` as `win32`:
```javascripton
"agora_electron": {
"electron_version": "12.0.0",
"prebuilt": true,
"platform": "win32"
}
```
2. Install dependencies again.
### How to specify the system architecture for packaging Electron applications [#how-to-specify-the-system-architecture-for-packaging-electron-applications]
1. Modify the commands in the `packages/agora-demo-app/package.json` file and add parameters at the end to specify the system architecture. Here we set it to 64-bit operating system architecture. If you need to package a 32-bit operating system, change it to `:pack:macpack:winarch--ia32`
```javascripton
"pack:mac": "yarn electron:copy:electron:mac && electron-builder --mac -p never --x64",
"pack:win": "yarn electron:copy:electron:win && electron-builder --win -p never --x64",
```
2. Modify the `package.json` configuration parameters: In the project's `agora_electron` root directory specify `arch` as `x64`. If you need to package a 32-bit operating system, change it to `ia32`.
```javascripton
"agora_electron": {
"electron_version": "12.0.0",
"prebuilt": true,
"arch": "x64"
}
```
3. Delete the `node_modules/agora-electron-sdk` folder and execute the `yarn install --check-files` command to reinstall the dependencies.
4. Run the packaging command.