diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..f06235c
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..9b94b63
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,44 @@
+
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "extends": [
+        "airbnb",
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react",
+        "jsx-a11y",
+        "import"
+    ],
+    "env": {
+      "es6": true,
+      "node": true,
+      "browser": true
+    },
+    "rules": {
+      "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
+      "no-shadow": "off",
+      "@typescript-eslint/no-shadow": "warn",
+      "import/prefer-default-export": "off",
+      "no-underscore-dangle": 0,
+      "import/extensions": [2, "never"],
+      "import/no-absolute-path": 0,
+      "import/no-unresolved": 0,
+      "import/no-extraneous-dependencies": 1,
+      "react/prop-types": 1,
+      "jsx-a11y/no-access-key": 0,
+      "react/jsx-props-no-spreading": "off",
+      "max-classes-per-file": "off",
+      "class-methods-use-this": "off"
+    },
+    "globals": {
+      "browser": "writable"
+    }
+  }
diff --git a/.github/ISSUE_TEMPLATE/bigbluebutton-html-plugin-sdk-issue.md b/.github/ISSUE_TEMPLATE/bigbluebutton-html-plugin-sdk-issue.md
new file mode 100644
index 0000000..bbedd1d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bigbluebutton-html-plugin-sdk-issue.md
@@ -0,0 +1,52 @@
+---
+name: BBB-Plugin-SDK
+about: Template for creating BBB-Plugin-SDK Issue (SDK to create plugins for Bigbluebutton).
+title: ''
+labels: 'module: client'
+assignees: ''
+
+---
+
+<!--PLEASE DO NOT FILE ISSUES FOR GENERAL SUPPORT QUESTIONS.
+This issue tracker is only for bbb development related issues.-->
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Actual behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**BBB version, plugin in which The bug happened and SDK version:**
+BigBlueButton continually evolves. Providing the version/build helps us to pinpoint when an issue was introduced.
+Example:
+$ sudo bbb-conf --check | grep BigBlueButton
+BigBlueButton Server 2.2.2 (1816)
+
+The SDK version is mentioned in the package.json file of the plugin, so search for "bigbluebutton-html-plugin-sdk" inside that file.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. Windows, Mac]
+ - Browser [e.g. Chrome, Safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, Safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000..793cc44
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+  - name: BigBlueButton GitHub Repository
+    url: https://github.com/bigbluebutton/bigbluebutton
+    about: Everything BigBlueButton (in case you are looking for something different than plugin sdk)
+  - name: Looking for commercial support in building/maintaining plugins
+    url: https://bigbluebutton.org/commercial-support
+    about: List of companies offering commercial BigBlueButton support
+  - name: BigBlueButton Developers Mailing List:
+    url: https://groups.google.com/forum/#!forum/bigbluebutton-dev
+    about: Ask questions and share experiences with other BigBlueButton developers (including about plugins).
\ No newline at end of file
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..96969e2
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,36 @@
+<!--
+PLEASE READ THIS MESSAGE.
+
+HOW TO WRITE A GOOD PULL REQUEST?
+
+- Make it small.
+- Do only one thing.
+- Avoid re-formatting.
+- Make sure the code builds and works.
+- Write useful descriptions and titles.
+- Address review comments in terms of additional commits.
+- Do not amend/squash existing ones unless the PR is trivial.
+- Read the contributing guide: https://docs.bigbluebutton.org/support/faq.html#bigbluebutton-development-process
+- Sign and send the Contributor License Agreement: https://docs.bigbluebutton.org/support/faq.html#why-do-i-need-to-sign-a-contributor-license-agreement-to-contribute-source-code
+
+-->
+
+### What does this PR do?
+
+<!-- A brief description of each change being made with this pull request. -->
+
+### Closes Issue(s)
+<!-- List here all the issues closed by this pull request. Use keyword `closes` before each issue number
+Closes #123456
+-->
+Closes #
+
+
+### Motivation
+
+<!-- What inspired you to submit this pull request? -->
+
+### More
+
+<!-- Anything else we should know when reviewing? -->
+- [ ] Added/updated documentation
diff --git a/.github/actions/merge-branches/action.yml b/.github/actions/merge-branches/action.yml
new file mode 100644
index 0000000..ea8fc99
--- /dev/null
+++ b/.github/actions/merge-branches/action.yml
@@ -0,0 +1,20 @@
+name: Merge branches
+on:
+  workflow_call:
+
+runs:
+  using: "composite"
+  steps:
+    - name: Checkout ${{ github.event.pull_request.base.ref || 'master' }}
+      uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.base.ref || '' }}
+        fetch-depth: 0 # Fetch all history
+    - name: Merge pr-${{ github.event.number }} into ${{ github.event.pull_request.base.ref }}
+      if: github.event_name == 'pull_request'
+      shell: bash
+      run: |
+        git config user.name "BBB Automated Tests"
+        git config user.email "tests@bigbluebutton.org"
+        git config pull.rebase false
+        git pull origin pull/${{ github.event.number }}/head:${{ github.head_ref }}
\ No newline at end of file
diff --git a/.github/config.yml b/.github/config.yml
index 8773ba9..5a893c6 100644
--- a/.github/config.yml
+++ b/.github/config.yml
@@ -5,4 +5,3 @@ newPRWelcomeComment: >
   Thank you for this contribution!
   Could you please confirm if you already sent in the signed Contributor License Agreement? See https://docs.bigbluebutton.org/support/faq.html#why-do-i-need-to-sign-a-contributor-license-agreement-to-contribute-source-code
   Thanks in advance!
-
diff --git a/.github/stale.yml b/.github/stale.yml
new file mode 100644
index 0000000..fd63948
--- /dev/null
+++ b/.github/stale.yml
@@ -0,0 +1,19 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 270
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 90
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - "status: accepted"
+  - "status: verify"
+  - "target: security"
+  - "type: discussion"
+# Label to use when marking an issue as stale
+staleLabel: "status: stale"
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false
diff --git a/.github/workflows/automated-tests-publish-results.yml b/.github/workflows/automated-tests-publish-results.yml
new file mode 100644
index 0000000..08a4f6a
--- /dev/null
+++ b/.github/workflows/automated-tests-publish-results.yml
@@ -0,0 +1,88 @@
+name: Automated tests - publish results
+on:
+  workflow_run:
+    workflows:
+      - Automated tests
+    types:
+      - completed
+
+jobs:
+  get-pr-data:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.event == 'pull_request' }}
+    outputs:
+      pr-number: ${{ steps.set-env.outputs.pr-number }}
+      workflow-id: ${{ steps.set-env.outputs.workflow-id }}
+    steps:
+      # https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#using-data-from-the-triggering-workflow
+      - name: Download artifact
+        uses: actions/github-script@v6
+        with:
+          script: |
+            let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
+               owner: context.repo.owner,
+               repo: context.repo.repo,
+               run_id: context.payload.workflow_run.id,
+            });
+
+            let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => {
+              return artifact.name == "pr-comment-data"
+            })[0];
+            let download = await github.rest.actions.downloadArtifact({
+               owner: context.repo.owner,
+               repo: context.repo.repo,
+               artifact_id: matchArtifact.id,
+               archive_format: 'zip',
+            });
+            let fs = require('fs');
+            fs.writeFileSync(`${process.env.GITHUB_WORKSPACE}/pr-comment-data.zip`, Buffer.from(download.data));
+      - name: Unzip artifact
+        run: unzip pr-comment-data.zip
+      - name: Set env variables
+        id: set-env
+        run: |
+          echo "pr-number=$(cat ./pr_number)" >> $GITHUB_OUTPUT
+          echo "workflow-id=$(cat ./workflow_id)" >> $GITHUB_OUTPUT
+  comment-pr:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    needs: get-pr-data
+    steps:
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        id: fc
+        with:
+          issue-number: ${{ needs.get-pr-data.outputs.pr-number }}
+          comment-author: "github-actions[bot]"
+          body-includes: Automated tests Summary
+      - name: Remove previous comment
+        if: steps.fc.outputs.comment-id != ''
+        uses: actions/github-script@v6
+        with:
+          script: |
+            github.rest.issues.deleteComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              comment_id: ${{ steps.fc.outputs.comment-id }}
+            })
+      - name: Passing tests comment
+        if: ${{ github.event.workflow_run.conclusion == 'success' }}
+        uses: peter-evans/create-or-update-comment@v2
+        with:
+          issue-number: ${{ needs.get-pr-data.outputs.pr-number }}
+          body: |
+            <h1>Automated tests Summary</h1>
+            <h3><strong>:white_check_mark:</strong> All the CI tests have passed!</h3>
+      - name: Failing tests comment
+        if: ${{ github.event.workflow_run.conclusion == 'failure' }}
+        uses: peter-evans/create-or-update-comment@v2
+        with:
+          issue-number: ${{ needs.get-pr-data.outputs.pr-number }}
+          body: |
+            <h1> Automated tests Summary</h1>
+            <h3><strong>:rotating_light:</strong> Test workflow has failed</h3>
+
+            ___
+
+            [Click here](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ needs.get-pr-data.outputs.workflow-id }}) to check the action test reports
diff --git a/.github/workflows/check-merge-conflict.yml b/.github/workflows/check-merge-conflict.yml
new file mode 100644
index 0000000..e857e90
--- /dev/null
+++ b/.github/workflows/check-merge-conflict.yml
@@ -0,0 +1,26 @@
+name: Merge conflict check
+on:
+  push:
+  pull_request_target:
+    types:
+      - opened
+      - synchronize
+
+permissions:
+  contents: read
+
+jobs:
+  main:
+    permissions:
+      pull-requests: write  # for eps1lon/actions-label-merge-conflict to label PRs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for dirty pull requests
+        uses: eps1lon/actions-label-merge-conflict@v3
+        with:
+          dirtyLabel: "status: conflict"
+          repoToken: "${{ secrets.GITHUB_TOKEN }}"
+          commentOnDirty: |
+              This pull request has conflicts ☹
+              Please resolve those so we can review the pull request.
+              Thanks.
diff --git a/.github/workflows/ts-code-compilation.yml b/.github/workflows/ts-code-compilation.yml
new file mode 100644
index 0000000..8c351fc
--- /dev/null
+++ b/.github/workflows/ts-code-compilation.yml
@@ -0,0 +1,21 @@
+name: Typescript - compile code
+on: [pull_request]
+permissions:
+  contents: read
+jobs:
+  ts-code-compilation:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+      - name: Merge branches
+        uses: ./.github/actions/merge-branches
+      - name: install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - name: run npm install
+        run: npm install
+      - name: typescript code compilation
+        run: npx tsc
diff --git a/.github/workflows/ts-code-validation.yml b/.github/workflows/ts-code-validation.yml
new file mode 100644
index 0000000..b9fa8e8
--- /dev/null
+++ b/.github/workflows/ts-code-validation.yml
@@ -0,0 +1,22 @@
+name: Typescript - validate code (eslint)
+on: [pull_request]
+
+permissions:
+  contents: read
+jobs:
+  ts-code-validation:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+      - name: Merge branches
+        uses: ./.github/actions/merge-branches
+      - name: install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - name: run npm install
+        run: npm install
+      - name: typescript code validation with eslint
+        run: npm run lint
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..23b22c4
--- /dev/null
+++ b/package.json
@@ -0,0 +1,72 @@
+{
+  "name": "<plugin-name>",
+  "version": "0.1.0",
+  "private": true,
+  "main": "./src/index.tsx",
+  "dependencies": {
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/node": "^20.3.1",
+    "@types/react": "^18.2.13",
+    "@types/react-dom": "^18.2.6",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "bigbluebutton-html-plugin-sdk": "0.0.52",
+    "styled-components": "^5.3.3",
+    "path": "^0.12.7",
+    "react-chat-elements": "^12.0.14",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1"
+  },
+  "scripts": {
+    "build-bundle": "webpack --mode production",
+    "start": "webpack serve --mode development",
+    "build:watch": "rm -rf dist && tsc -w --module CommonJS",
+    "lint": "eslint ./src/*",
+    "lint:fix": "npm run lint -- --fix",
+    "lint:watch": "watch 'yarn lint'"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@types/react-modal": "^3.16.0",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.4",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.3",
+    "webpack": "^5.83.1",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.1",
+    "@types/node": "^20.4.4",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-watch": "^8.0.0",
+    "lint-staged": "11.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.6",
+    "watch": "^1.0.2"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..2316cb6
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "noImplicitAny": true,
+        "module": "es6",
+        "target": "es5",
+        "jsx": "react",
+        "allowJs": true,
+        "moduleResolution": "node"
+    },
+    "paths": {
+        "*": ["node_modules/@types/*", "node_modules/*"]
+    }
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..a71a6a5
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,43 @@
+module.exports = {
+  entry: './src/index.tsx',
+  output: {
+    filename: '<PluginName>.js',
+    library: '<PluginName>',
+    libraryTarget: 'umd',
+    publicPath: '/static/',
+    globalObject: 'this',
+  },
+  devServer: {
+    allowedHosts: 'all',
+    port: 4701,
+    host: 'localhost',
+    hot: false,
+    liveReload: false,
+    client: {
+      overlay: false,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.tsx', '.ts'],
+  },
+};