https://www.plugnmeet.org/assets/js/130fb02f.9274b3dd.js

1"use strict";(globalThis.webpackChunkplugnmeet_documentation=globalThis.webpackChunkplugnmeet_documentation||[]).push([[2639],{29620(e,n,o){o.r(n),o.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>h,frontMatter:()=>r,metadata:()=>t,toc:()=>d});const t=JSON.parse('{"id":"user-guide/joomla-integration","title":"plugNmeet Joomla Integration | Add Video Meetings to Your Site","description":"How to install and configure the plugNmeet component to add self-hosted video meetings and conferencing features to your Joomla website.","source":"@site/docs/user-guide/joomla-integration.md","sourceDirName":"user-guide","slug":"/user-guide/joomla-integration","permalink":"/docs/user-guide/joomla-integration","draft":false,"unlisted":false,"editUrl":"https://github.com/mynaparrot/plugNmeet-docs/edit/main/docs/user-guide/joomla-integration.md","tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"title":"plugNmeet Joomla Integration | Add Video Meetings to Your Site","description":"How to install and configure the plugNmeet component to add self-hosted video meetings and conferencing features to your Joomla website.","keywords":["joomla","joomla integration","joomla component","joomla video conference","joomla webrtc"],"sidebar_position":6,"sidebar_label":"Joomla Integration"},"sidebar":"tutorialSidebar","previous":{"title":"Moodle Integration","permalink":"/docs/user-guide/moodle-integration"},"next":{"title":"LTI Integration","permalink":"/docs/user-guide/lti"}}');var i=o(91987),s=o(82681);const r={title:"plugNmeet Joomla Integration | Add Video Meetings to Your Site",description:"How to install and configure the plugNmeet component to add self-hosted video meetings and conferencing features to your Joomla website.",keywords:["joomla","joomla integration","joomla component","joomla video conference","joomla webrtc"],sidebar_position:6,sidebar_label:"Joomla Integration"},l="How to Add Video Conferencing to Joomla with the Plug-N-Meet Extension",a={},d=[{value:"Part 1: Installation & Initial Setup",id:"part-1-installation--initial-setup",level:2},{value:"1. Install the Extension",id:"1-install-the-extension",level:3},{value:"2. Connect to Your Server (API Settings)",id:"2-connect-to-your-server-api-settings",level:3},{value:"Part 2: Creating & Publishing Your First Meeting",id:"part-2-creating--publishing-your-first-meeting",level:2},{value:"Step 2.1: Create a Meeting Room",id:"step-21-create-a-meeting-room",level:3},{value:"Step 2.2: Display the Room on Your Site",id:"step-22-display-the-room-on-your-site",level:3},{value:"Part 3: The Attendee Experience",id:"part-3-the-attendee-experience",level:2},{value:"Part 4: Advanced Configuration (Optional)",id:"part-4-advanced-configuration-optional",level:2},{value:"Design Customization",id:"design-customization",level:3},{value:"User Permissions",id:"user-permissions",level:3},{value:"Common Questions & Troubleshooting",id:"common-questions--troubleshooting",level:2}];function c(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",hr:"hr",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,s.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"how-to-add-video-conferencing-to-joomla-with-the-plug-n-meet-extension",children:"How to Add Video Conferencing to Joomla with the Plug-N-Meet Extension"})}),"\n",(0,i.jsx)(n.p,{children:"This guide provides a complete walkthrough for integrating the Plug-N-Meet video conferencing component with your Joomla website. By following these steps, you will be able to host secure video meetings directly from your own domain."}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"part-1-installation--initial-setup",children:"Part 1: Installation & Initial Setup"}),"\n",(0,i.jsx)(n.p,{children:"This section covers installing the extension and connecting it to your PlugNmeet server."}),"\n",(0,i.jsx)(n.h3,{id:"1-install-the-extension",children:"1. Install the Extension"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["From your Joomla administrator panel, navigate to ",(0,i.jsx)(n.strong,{children:"System > Install > Extensions"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["Select the ",(0,i.jsx)(n.strong,{children:"Install from Web"})," tab and search for ",(0,i.jsx)(n.strong,{children:"plugnmeet"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["Find the official Plug-N-Meet extension and click ",(0,i.jsx)(n.strong,{children:"Install"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Joomla-install.png",src:o(69088).A+"",width:"1431",height:"725"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"After a moment, you should see a confirmation that the installation was successful."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Joomla-success.png",src:o(61220).A+"",width:"1425",height:"619"})}),"\n",(0,i.jsx)(n.h3,{id:"2-connect-to-your-server-api-settings",children:"2. Connect to Your Server (API Settings)"}),"\n",(0,i.jsx)(n.p,{children:"This is the most important step. You must connect the extension to a working PlugNmeet server."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["From your Joomla administrator panel, navigate to ",(0,i.jsx)(n.strong,{children:"System > Global Configuration"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["In the left-hand menu, select ",(0,i.jsx)(n.strong,{children:"plugNmeet"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Joomla-plugin-config.png",src:o(88865).A+"",width:"2557",height:"1211"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["You will see three fields: ",(0,i.jsx)(n.strong,{children:"Server URL"}),", ",(0,i.jsx)(n.strong,{children:"API Key"}),", and ",(0,i.jsx)(n.strong,{children:"API Secret"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["After installation, these fields will be pre-filled with demo credentials. ",(0,i.jsx)(n.strong,{children:"You must replace these with the API details from your own self-hosted or PlugNmeet Cloud server."})," The demo server is for temporary testing only and has limitations."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Joomla-plugnmeet-config.png",src:o(97183).A+"",width:"999",height:"604"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["After entering your own credentials, click ",(0,i.jsx)(n.strong,{children:"Save"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"part-2-creating--publishing-your-first-meeting",children:"Part 2: Creating & Publishing Your First Meeting"}),"\n",(0,i.jsx)(n.p,{children:"Now that the extension is configured, you need to create a room and then make it accessible on your website."}),"\n",(0,i.jsx)(n.h3,{id:"step-21-create-a-meeting-room",children:"Step 2.1: Create a Meeting Room"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["From the Joomla administrator panel, go to ",(0,i.jsx)(n.strong,{children:"Components > Plug N Meet > Manage Rooms"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["Click ",(0,i.jsx)(n.strong,{children:"+ New"})," to create a new meeting room."]}

1),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Configure Room Settings:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Title & Description:"})," Give your meeting room a clear title."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Passwords:"})," Set passwords for moderators and attendees."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Welcome Message:"})," Customize the initial message that appears in the chat."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Max Participants:"})," Set a limit on the number of users who can join (use ",(0,i.jsx)(n.code,{children:"0"})," for unlimited)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Room Features & Default Lock Settings:"})," Enable or disable features like webcams, screen sharing, and recording to customize the in-room experience."]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["When you are finished, click ",(0,i.jsx)(n.strong,{children:"Save"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Joomla-12.png",src:o(56104).A+"",width:"1131",height:"517"})}),"\n",(0,i.jsx)(n.h3,{id:"step-22-display-the-room-on-your-site",children:"Step 2.2: Display the Room on Your Site"}),"\n",(0,i.jsx)(n.p,{children:"To allow users to access the room, you must link to it from a menu."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Navigate to ",(0,i.jsx)(n.strong,{children:"Menus > Main Menu"})," (or your preferred menu) and click ",(0,i.jsx)(n.strong,{children:"+ Add New Menu Item"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["In the ",(0,i.jsx)(n.strong,{children:"Menu Item Type"})," field, click ",(0,i.jsx)(n.strong,{children:"Select"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:["A modal window will appear. Choose ",(0,i.jsx)(n.strong,{children:"Plug N Meet > Single room"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Joomla-25.png",src:o(966).A+"",width:"1166",height:"696"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["In the ",(0,i.jsx)(n.strong,{children:"Select a room"})," dropdown, choose the room you just created."]}),"\n",(0,i.jsxs)(n.li,{children:["Give the menu item a ",(0,i.jsx)(n.strong,{children:"Title"}),' (e.g., "Live Class" or "Weekly Meeting").']}),"\n",(0,i.jsxs)(n.li,{children:["Click ",(0,i.jsx)(n.strong,{children:"Save"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Joomla-26.png",src:o(82173).A+"",width:"1131",height:"646"})}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Your meeting room is now live and accessible from your website's main menu."}),"\n"]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"part-3-the-attendee-experience",children:"Part 3: The Attendee Experience"}),"\n",(0,i.jsx)(n.p,{children:"When a user clicks the new menu item on your website, they will be taken to the meeting login page."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"To join, they simply need to enter their name and the password you configured for the room."}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Joomla-28.png",src:o(3315).A+"",width:"1419",height:"556"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"part-4-advanced-configuration-optional",children:"Part 4: Advanced Configuration (Optional)"}),"\n",(0,i.jsx)(n.p,{children:"These settings allow you to further customize the look and permissions of your meetings."}),"\n",(0,i.jsx)(n.h3,{id:"design-customization",children:"Design Customization"}),"\n",(0,i.jsx)(n.p,{children:"You can customize colors and logos to match your brand."}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Global Customization:"})," Navigate to ",(0,i.jsx)(n.strong,{children:"System > Global Configuration > plugNmeet > Design Customization"}),"."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.strong,{children:"Per-Room Customization:"})," When editing a specific room (",(0,i.jsx)(n.strong,{children:"Components > Plug N Meet > Manage Rooms"}),"), click the ",(0,i.jsx)(n.strong,{children:"Design Customization"})," tab."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"Here you can change the logo, background, and all primary and secondary colors."}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Joomla-globalcust.png",src:o(82237).A+"",width:"1437",height:"687"})}),"\n",(0,i.jsx)(n.h3,{id:"user-permissions",children:"User Permissions"}),"\n",(0,i.jsxs)(n.p,{children:["When editing a room, click the ",(0,i.jsx)(n.strong,{children:"Permission"})," tab to configure which Joomla user groups have access to the room and what their roles are (e.g., moderator or attendee)."]}),"\n",(0,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"room_permission.png",src:o(37681).A+"",width:"2500",height:"1006"})}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.h2,{id:"common-questions--troubleshooting",children:"Common Questions & Troubleshooting"}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"Why do I see an 'Invalid API' error on my meeting page?"}),"\nThis is the most common issue. It means you are still using the default demo credentials in the global configuration. You must replace these with the API details from your own PlugNmeet server."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.strong,{children:"How do I find the global settings after installation?"}),"\nAs a Joomla administrator, you can find the global settings under ",(0,i.jsx)(n.strong,{children:"System > Global Configuration > plugNmeet"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(c,{...e})}):c(e)}},56104(e,n,o){const t=o.p+"assets/images/Joomla-12-2f6c2929f3147cafe44f90fa8143d4a6.png";o.d(n,["A",0,t])},966(e,n,o){const t=o.p+"assets/images/Joomla-25-1ff47a2ee9cd71ed2be21e1070321d4e.png";o.d(n,["A",0,t])},82173(e,n,o){const t=o.p+"assets/images/Joomla-26-1e03b93f8c1c45b9373f0c59aba3d9f5.png";o.d(n,["A",0,t])},3315(e,n,o){const t=o.p+"assets/images/Joomla-28-cb7f1eefc4e2cd6d54f31c6ad7c3df2e.png";o.d(n,["A",0,t])},82237(e,n,o){const t=o.p+"assets/images/Joomla-globalcust-0becfaae04dcb07d3a51d77927c1246b.png";o.d(n,["A",0,t])},69088(e,n,o){const t=o.p+"assets/images/Joomla-install-0627761d95d5ccccb1f14e47c1358111.png";o.d(n,["A",0,t])},88865(e,n,o){const t=o.p+"assets/images/Joomla-plugin-config-be57a95dc7b51f9b3e6a34234762744c.png";o.d(n,["A",0,t])},97183(e,n,o){const t=o.p+"assets/images/Joomla-plugnmeet-config-ba05654cb67c602a1872ff3f4e7e1e4d.png";o.d(n,["A",0,t])},61220(e,n,o){const t=o.p+"assets/images/Joomla-success-31346fd853ae184da014b8d8ca3d3c59.png";o.d(n,["A",0,t])},37681(e,n,o){const t=o.p+"assets/images/room_permission-d809126ad34729476649f470acc3920a.png";o.d(n,["A",0,t])},82681(e,n,o){o.d(n,{R:()=>r,x:()=>l});var t=o(71763);const i={},s=t.createContext(i);function r(e){const n=t.useContext(s);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);