Code widget (custom code)
The Code Widget field allows you to embed custom code and 3rd party systems into a Buzzy application. These work seamlessly across web and native platforms (iOS and Android), using secure sandboxed iFrames within React Native applications.
Code widgets unlock powerful capabilities that extend far beyond standard form fields, enabling you to create sophisticated user experiences and integrate with external services.
What Code Widgets Enable
Code widgets open up endless possibilities for enhancing your Buzzy applications:
Interactive User Interfaces
Kanban boards for project management and workflow visualization
Interactive maps with custom markers, popups, and location services
Advanced image galleries with drag-and-drop upload and slideshow functionality
File managers with upload, download, and organization capabilities
Custom charts and data visualizations using libraries like Chart.js
Complex Button Operations
Multi-step user operations - Look up related records, perform calculations, and update multiple fields in a single action
Template duplication systems - Copy entire course structures with quizzes, questions, and user assignments
Hierarchical data copying - Duplicate complex nested data structures with file attachments across tables
Workflow automation buttons - Guide users through multi-screen processes with automated navigation
Cross-table relationship management - Update linked records based on lookups and business logic
Data Operations & Integration
Real-time filtering and search with custom UI controls
Complex data operations across multiple tables and relationships
External API integrations for enriching your app data
Custom business logic that goes beyond standard formulas
Advanced Functionality
Games and interactive experiences using 3D libraries like Three.js
Custom calculators and tools tailored to your business needs
Specialized input methods like drawing tools or signature capture
Integration with external services like payment processors or communication tools
See comprehensive examples demonstrating these patterns here.
How Code Widgets Work
Within a Buzzy sandboxed iFrame, you have full access to:
Buzzy data through the modern BuzzyFrameAPI
Navigation capabilities to move between screens
Real-time updates when underlying data changes
File upload/download with S3 integration
External JavaScript libraries for enhanced functionality
For trusted external content like YouTube or Vimeo, you can use Trusted iFrames that provide full access to the parent window.
Code Widget Types
There are 2 main types of code widgets, each designed for different use cases:
Sandboxed iframe (Recommended for Custom Development)
Sandboxed iframes are the preferred choice for custom code development. They provide a secure environment where you can build sophisticated functionality while maintaining security boundaries.
Key Benefits:
Full development freedom with HTML, CSS, JavaScript, and React
Access to the BuzzyFrameAPI for data operations and navigation
External library support for charts, maps, UI components, and more
Real-time data updates through microapp listeners
File upload/download capabilities with S3 integration
Security isolation from the parent domain
Perfect for:
Interactive dashboards and data visualizations
Custom forms and input controls
File management interfaces
Maps and location-based features
Business logic and calculations
Integration with external APIs
See comprehensive examples and refer to the Buzzy Async API for detailed implementation guidance.
AI-Assisted Development: You can prompt Buzzy's AI to generate initial code for your widgets, then customize and refine as needed.
Security Settings: Sandbox permissions are configurable with Buzzy Deployment plans to meet your specific requirements.
Trusted iframe (For External Services)
Trusted iframes are designed for embedding external services that require full access to the parent window, such as video players, social media widgets, or other third-party tools.
Pre-approved Trusted Domains:
youtube.com,www.youtube.com,www.youtube-nocookie.comvimeo.com,www.vimeo.com,player.vimeo.comwww.loom.com
URL Configuration Options:
Field-based: Select a field from the current row containing the embed URL
Formula-based: Use JSONATA formulas to dynamically generate URLs
Perfect for:
Video content (YouTube, Vimeo, Loom)
Social media embeds
Third-party widgets and tools
External dashboards and reports
Other settings
Dimensions
You can define your iframe dimensions either as a ratio (eg 16x9) or provide custom width and height values. Remember to include your units (eg %, px, em, vw).
Connection mode
An embedded iframe can be connected to Buzzy either as ‘Reactive’ (default) or ‘Static’. Reactive will refresh automatically, but may slow your app down. Static is quicker, but will require manual refresh.
Advanced Configuration
Trusted iframe Security Considerations
What is a trusted iframe?
This is the simplest option allowing you to embed a trusted site into your application. By trusted, this means the external site has full access to the parent (Buzzy) window.
When to use trusted iframes in Buzzy?
You probably will want to use a Trusted iframe when using out-of-the-box 3rd party sites that you trust. Common examples are YouTube, Vimeo etc. But these can be customized on a per app basis.
Besides the basic formatting (eg dimensions) and choosing the URL, you cannot change anything else, as you've handed over control to the 3rd party site you're embedding.
How to use trusted iframes in your Buzzy app?
Each Buzzy app can customize which domains that are trusted.
Reminder - only grant access to sites you Trust!
Important Security Consideration when using Trusted iframes
Security Warning: Do not add a domain to your settings unless you really know that the code is going to be "well behaved" and secure. Ensure it's from a reputable source or written by yourself. If in doubt, avoid this option.
Be very careful when using Trusted iframes, as they can include code that gets full access to the Buzzy parent window and can operate, via code, like the logged in user.
Also, be careful that the embedding site does not allow a redirect as part of their API, as this could allow a url to redirect to a nefarious site.
When allowing end-users to enter their own URL (user generated content) to be embedded in an iframe URL, take special care to ensure this is safe. Otherwise, it's only Owners & Authors of an application that has access to create/configure the Code widget.
Q: If it could be potentially bad, why does it exist?
A: Certain sites like youtube require full access to the parent window, so that they can track users, access local storage and so on. They cannot be embedded in a sandboxed secure iframe and still work.
Last updated