diff --git a/src/components/Editor/Project/Project.jsx b/src/components/Editor/Project/Project.jsx
index 4fa543b97..ae33818db 100644
--- a/src/components/Editor/Project/Project.jsx
+++ b/src/components/Editor/Project/Project.jsx
@@ -22,6 +22,7 @@ const Project = (props) => {
     withProjectbar = true,
     withSidebar = true,
     sidebarOptions = [],
+    plugins = [],
   } = props;
   const saving = useSelector((state) => state.editor.saving);
   const autosave = useSelector((state) => state.editor.lastSaveAutosave);
@@ -59,7 +60,7 @@ const Project = (props) => {
           "proj-container--wc": webComponent,
         })}
       >
-        {withSidebar && <Sidebar options={sidebarOptions} />}
+        {withSidebar && <Sidebar options={sidebarOptions} plugins={plugins} />}
         <div className="project-wrapper" ref={containerRef}>
           {withProjectbar && <ProjectBar nameEditable={nameEditable} />}
           {!loading && (
diff --git a/src/components/Menus/Sidebar/Sidebar.jsx b/src/components/Menus/Sidebar/Sidebar.jsx
index 86987a52b..d37298018 100644
--- a/src/components/Menus/Sidebar/Sidebar.jsx
+++ b/src/components/Menus/Sidebar/Sidebar.jsx
@@ -23,9 +23,13 @@ import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
 import FileIcon from "../../../utils/FileIcon";
 import DownloadPanel from "./DownloadPanel/DownloadPanel";
 import InstructionsPanel from "./InstructionsPanel/InstructionsPanel";
+import SidebarPanel from "./SidebarPanel";
 
-const Sidebar = ({ options = [] }) => {
+const Sidebar = ({ options = [], plugins = [] }) => {
   const { t } = useTranslation();
+  const projectIdentifier = useSelector(
+    (state) => state.editor.project.identifier,
+  );
 
   let menuOptions = [
     {
@@ -79,6 +83,22 @@ const Sidebar = ({ options = [] }) => {
     },
   ].filter((option) => options.includes(option.name));
 
+  let pluginMenuOptions = plugins.map((plugin) => {
+    return {
+      name: plugin.name,
+      icon: plugin.icon,
+      title: plugin.title,
+      position: plugin.position || "top",
+      panel: () => (
+        <SidebarPanel heading={plugin.title} Button={plugin.button}>
+          {plugin.panel({ projectIdentifier })}
+        </SidebarPanel>
+      ),
+    };
+  });
+
+  menuOptions = [...menuOptions, ...pluginMenuOptions];
+
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const projectImages = useSelector((state) => state.editor.project.image_list);
   const instructionsSteps = useSelector(
diff --git a/src/components/WebComponentProject/WebComponentProject.jsx b/src/components/WebComponentProject/WebComponentProject.jsx
index 99051afb9..dc258b641 100644
--- a/src/components/WebComponentProject/WebComponentProject.jsx
+++ b/src/components/WebComponentProject/WebComponentProject.jsx
@@ -35,6 +35,7 @@ const WebComponentProject = ({
   outputOnly = false,
   outputPanels = ["text", "visual"],
   outputSplitView = false,
+  plugins = [],
 }) => {
   const loading = useSelector((state) => state.editor.loading);
   const project = useSelector((state) => state.editor.project);
@@ -152,6 +153,7 @@ const WebComponentProject = ({
                 withProjectbar={withProjectbar}
                 withSidebar={withSidebar}
                 sidebarOptions={sidebarOptions}
+                plugins={plugins}
               />
             ))}
           {outputOnly && (
diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx
index 702ac2f96..95da4bfac 100644
--- a/src/containers/WebComponentLoader.jsx
+++ b/src/containers/WebComponentLoader.jsx
@@ -47,6 +47,7 @@ const WebComponentLoader = (props) => {
     outputOnly = false,
     outputPanels = ["text", "visual"],
     outputSplitView = false,
+    plugins = [],
     projectNameEditable = false,
     reactAppApiEndpoint = process.env.REACT_APP_API_ENDPOINT,
     readOnly = false,
@@ -97,6 +98,10 @@ const WebComponentLoader = (props) => {
 
   useEmbeddedMode(embedded);
 
+  useEffect(() => {
+    console.log("the plugins are", plugins);
+  }, [plugins]);
+
   useEffect(() => {
     if (theme) {
       dispatch(disableTheming());
@@ -227,7 +232,9 @@ const WebComponentLoader = (props) => {
               outputPanels={outputPanels}
               outputSplitView={outputSplitView}
               editableInstructions={editableInstructions}
+              plugins={plugins}
             />
+            {plugins.map((plugin) => plugin.slot1())}
             {errorModalShowing && <ErrorModal />}
             {newFileModalShowing && <NewFileModal />}
             {renameFileModalShowing && modals.renameFile && <RenameFileModal />}
diff --git a/src/web-component.js b/src/web-component.js
index 693862362..6cff55dd5 100644
--- a/src/web-component.js
+++ b/src/web-component.js
@@ -27,6 +27,7 @@ class WebComponent extends HTMLElement {
   mountPoint;
   componentAttributes = {};
   componentProperties = {};
+  plugins = [];
 
   connectedCallback() {
     if (!this.shadowRoot) {
@@ -157,6 +158,11 @@ class WebComponent extends HTMLElement {
     });
   }
 
+  setPlugins(plugins) {
+    this.plugins = plugins;
+    this.mountReactApp();
+  }
+
   reactProps() {
     return {
       ...this.componentAttributes,
@@ -177,7 +183,7 @@ class WebComponent extends HTMLElement {
       <React.StrictMode>
         <Provider store={store}>
           <BrowserRouter>
-            <WebComponentLoader {...this.reactProps()} />
+            <WebComponentLoader plugins={this.plugins} {...this.reactProps()} />
           </BrowserRouter>
         </Provider>
       </React.StrictMode>,