Display external websites directly in your Nextcloud dashboard with this customizable widget
- 🌐 Embed any website in your Nextcloud dashboard
- 🔤 Customizable widget title
- 🎨 Support for custom icons using Simple Icons with the
si:prefix - 🎭 Custom icon coloring
- 📏 Adjustable iframe height
- 🖥️ Extra-wide display option (2 columns)
- 🎯 Clean, responsive design that integrates with Nextcloud themes
- 👤 Separate Personal and Public iFrame Widgets
- 👥 NEW: Group-based iFrame Widgets (admin-configured, group-specific)
- 🌍 Multi-language support with translations
- 3-Column Size
- Refresh Button (or Refresh Timer Option)
- Add missing Translations
- Enhanced Widget Management (Drag&Drop, modernized UI, Categories)
🖥️ Widget in Dashboard
The iFrame Widget provides three types of widgets: admin/public, personal, and group-based configuration options, allowing administrators to set up shared widgets for all users, enable individual users to create their own personalized widgets, and create group-specific widgets that are only visible to members of selected user groups.
⚙️ Admin Settings
Access the administrator settings from:
- Settings → Administration → iFrame Widget
- Configure the following options:
- 🔤 Widget Title: Set a custom title (or leave empty to hide the header)
- 🎨 Widget Icon: Enter an icon name with
si:prefix (e.g.,si:github) - 🎭 Icon Color: Choose a custom color for the icon
- 🌐 URL to Display: The website URL to embed
- 📏 iFrame Height: Set a fixed height or use 100% (default)
- 🖥️ Extra Wide: Toggle to span two dashboard columns
These settings apply to the public widget that appears on all users' dashboards.
Each user can configure their own personal iFrame widget:
- Settings → Personal → iFrame Widget
- Configure the following options:
- 🔤 Widget Title: Set a custom title for your personal widget
- 🎨 Widget Icon: Choose your preferred icon with
si:prefix - 🎭 Icon Color: Set a custom color for your widget icon
- 🌐 URL to Display: Add your personal website URL to embed
- 📏 iFrame Height: Adjust the height to fit your needs
- 🖥️ Extra Wide: Enable for a wider widget view
Personal widgets are visible only to the user who configured them and don't affect other users.
Administrators can create iFrame widgets that are only visible to specific user groups:
- Settings → Administration → iFrame Widget
- Scroll down to the "Group-based iFrame Widgets" section
- Click "Add Group Widget" to create a new group-specific widget
- Configure the following options:
- 👥 Select Group: Choose which user group should see this widget
- 🔤 Widget Title: Set a custom title for the group widget
- 🎨 Widget Icon: Choose an icon with
si:prefix - 🎭 Icon Color: Set a custom color for the widget icon
- 🌐 URL to Display: Add the website URL to embed for this group
- 📏 iFrame Height: Adjust the height for the group widget
- 🖥️ Extra Wide: Enable for a wider widget view
Group widgets are visible only to users who are members of the selected group. You can create multiple group widgets for different groups, and users can be members of multiple groups to see multiple group widgets.
Important Notes on Group Widget Functionality:
- 🔸 Single Widget Per Group: Currently, only one widget can be shown per group at a time. If multiple widgets are configured for the same group, only the one marked as "shown" will be visible to group members.
- 👤 Single Widget Per User: Each user can only see one group widget at a time, even if they belong to multiple groups. The system prioritizes the first group widget they are eligible for.
- 🔄 No Multi-Group Support: Users cannot see multiple group widgets simultaneously - only one group widget is displayed per user.
These limitations are planned to be addressed in future updates. See the TODO List.
This widget uses Simple Icons for custom icons:
si:iconname
For example:
si:github-GitHub icon
si:youtube-YouTube icon
si:nextcloud-Nextcloud icon
Browse available icons at SimpleIcons.org.
- 📦 Nextcloud 30+
- 🌐 Website to be embedded must allow iframe embedding (not all sites do)
- 🔒 Content Security Policy (CSP) configuration to allow external domains in iframes
iFrame Widget supports multiple languages and can be translated. Currently, the following languages are available:
- 🇬🇧 English (en)
- 🇩🇪 German (de)
- 🇫🇷 French (fr)
- 🇪🇸 Spanish (es)
- 🇮🇹 Italian (it)
- 🇳🇱 Dutch (nl)
- 🇷🇺 Russian (ru)
- 🇵🇱 Polish (pl)
- 🇵🇹 Portuguese (pt)
- 🇧🇷 Brazilian Portuguese (pt_BR)
- 🇨🇳 Chinese (Simplified) (zh_CN)
- 🇯🇵 Japanese (ja)
- 🇨🇿 Czech (cs)
- 🇸🇪 Swedish (sv)
- 🇳🇴 Norwegian Bokmål (nb)
If you'd like to contribute translations, please see the translation guide.
By default, Nextcloud restricts which websites can be embedded in iframes for security reasons. To embed external websites in your dashboard widget, you'll need to allow the target domains in your server's Content Security Policy (CSP).
Important: Avoid overwriting the entire CSP if your server or Nextcloud already sets other security directives. Instead, extend the existing frame-src directive where possible.
If your server or Nextcloud already sets a Content-Security-Policy, use Header always edit to safely append additional domains to the existing frame-src list without replacing other directives. This is especially useful when running Nextcloud inside containers (e.g., Nextcloud AIO) where the main CSP may be managed by the platform.
Example (append Wikipedia domains):
# Safely extend the existing frame-src instead of replacing the whole CSP
Header always edit Content-Security-Policy "(^|;\\s*)frame-src\\s+([^;]+)" \
"$1frame-src \\2 https://*.wikipedia.org https://www.wikipedia.org"If you control the full CSP and prefer to set it directly, you can use:
# Allow specific domain(s) in iframes (overwrites/sets the CSP)
Header set Content-Security-Policy "frame-src 'self' https://example.com https://another-site.org;"Note for Nextcloud AIO: Some container images expose Apache configuration as read-only. In that case, editing the Nextcloud instance .htaccess (for example, inside the nextcloud-aio-nextcloud container at /var/www/html/.htaccess) and adding the Header always edit line has been reported to work by users — it appends to the existing CSP safely without breaking other policies.
For Nginx you can set or extend the CSP. If you control the entire header, add the header in your server block:
# Allow specific domain(s) in iframes
add_header Content-Security-Policy "frame-src 'self' https://example.com https://another-site.org;";If you need to programmatically append to an existing header on Nginx, consider using the more_set_headers or more_clear_headers directives provided by the headers-more module, or adjust the upstream configuration that sets the CSP.
Some websites explicitly block being embedded in iframes using their own headers (for example X-Frame-Options: DENY or a CSP frame-ancestors: 'none'). Those sites cannot be embedded even if you allow them in your server's CSP. In such cases consider using the External Sites app with the redirect option instead.
- 🛡️ Websites embedded through iframes operate within their own security context
- 🚫 Some websites block embedding using X-Frame-Options headers
- ✅ Use trusted sources for embedded content
If you experience issues with saving personal widget settings after upgrading to v0.7.0, try the following solutions:
-
🗑️ Clear the Nextcloud cache:
php occ maintenance:mode --on php occ memcache:clear php occ maintenance:mode --off
-
🔄 Restart your web server: For Apache:
sudo systemctl restart apache2
For Nginx:
sudo systemctl restart nginx sudo systemctl restart php-fpm
-
♻️ Disable and re-enable the app:
php occ app:disable iframewidget php occ app:enable iframewidget
-
🔍 Check your browser console for JavaScript errors: If you see CSRF token errors, clearing your browser cache might help.
If the widget doesn't appear on your dashboard after installation:
- Make sure you've added it from the dashboard customization screen (+ button)
- Verify that there are no JavaScript errors in your browser console
- Check that the app is properly enabled:
php occ app:list | grep iframe
- Admin/Public Widget: Configured by administrators and appears on all users' dashboards with the same content
- Personal Widget: Each user can configure their own widget that's visible only to them
- Group Widget: Configured by administrators and appears only on dashboards of users who are members of the selected group
- You can use all three simultaneously - users can have the admin-configured widget, their own personal widget, and any group widgets they're eligible for
All widgets need to be added to your dashboard using the "+" button in dashboard customization.
If you find this app useful, consider supporting this and future developments, which heavily relies on coffee:
This project is licensed under the AGPL-3.0-or-later license.
- Simple Icons - Used for widget icons