Buzzy Documentation
  • Welcome to Buzzy
  • Getting Started with Buzzy
    • Getting Started Guide
      • 1. Starting with Buzzy AI
      • 2. The Buzzy Workspace
      • 3. Create a new app
      • 4. Preview and edit your app
      • 5. Manage your app
      • 6. Import your app to Figma
      • 7. Using Buzzy with Figma
      • 8. The Buzzy Figma plugin
      • 9. Creating a simple app
      • 10. Screens and navigation
      • 11. Forms, fields and data
      • 12. Data-driven menus & content
      • 13. Data edit and delete
      • 14. Search, sort and filter
      • 15. User login and registration
    • Buzzy AI or Figma first?
  • Working with Buzzy
    • Buzzy AI
      • About Buzzy AI
      • Kickstart with AI
      • Enhance with Figma
      • Extend with Code
      • Example prompts
      • Tips
      • Troubleshooting Buzzy AI
      • AI tokens and pricing
    • Buzzy for Figma
      • About Buzzy for Figma
      • Learning Figma
      • Creating a new app directly in Figma
        • Step by step version
      • Automarkup
      • Responsive layouts
      • Responsive layout checklist
      • Overflow and scrolling
      • Forms and fields
      • Images and galleries
      • Logging users in to your app
      • Theming
      • Troubleshooting Buzzy for Figma
      • Plugin error messages
    • Buzzy Deployment & App Stores
      • Setting up your custom Buzzy app
      • Connecting your own server
      • Apple & Google App Stores
    • Buzzy Marketplace
      • Buzzy Accreditation
    • Buzzy Project Guide
    • Buzzy App Examples
      • Buzzy Templates
      • AI-Powered Chat App
      • AI-Powered Custom T-Shirt App
      • AI-Powered Strategy App
      • AI-Powered Stock Portfolio App
      • Golf Course Finder
      • Personal Finance App with Figma AI
    • FAQs
  • The building blocks
    • Datatables, Fields & Data
      • Introduction to Fields
      • Basic Fields
        • Text
        • Number
        • Date
        • Location
        • Toggle
        • Checkboxes
        • Checklist
        • Selectlist
        • Rating
        • Attachments
        • Images
        • Signature
        • Audio Recording
        • Embedded Link
      • Advanced Fields
        • Formula
        • Sub tables
        • Linked Table field
        • Button
        • Teams
        • Payment
        • Notification
        • Event
        • User Vote
      • Display Fields
        • Header
        • Display Text
        • Image
        • Divider
      • Metadata Fields
        • Author Name
        • Author Phone
        • Submitted
      • Filter Controls
        • Viewers
        • Tags
        • Condition
      • External Fields
        • IBM Connections File
        • Box File
      • Sort Fields
      • Formulas
      • Datatable to Datatable Relationships
      • Security and Access Control
      • Displaying a field based on the values of other fields
      • Hiding a field based on role using a display formula
      • Importing data from a text file
      • Importing data from a URL
      • Import data from Datatable
      • Export data using Chrome
      • Export data in Browser
      • Export data using Safari
      • Datatable Field Type - Cheat Sheet
      • Troubleshooting Fields & Data
    • Code widget (custom code)
      • Code Widget Fields - Advanced Guide
      • New Async API + React HTML Components
      • Examples
        • Image Galley Slideshow
        • Ratings Average and Distribution
        • Event Locations Map
    • Analytics
  • Troubleshooting
    • App Error Codes
      • Action Error
      • App Not Found
      • Component Missing
      • Component Not Set
      • Component Settings Error
      • Datatable Not Found
      • Datatable Not Set
      • Field Not Found
      • Field Not Set
      • No App Selected
      • No Context Name
      • No Screens Found
      • Runtime Exception
      • Screen Not Found
      • Screen Not Set
    • Troubleshooting Buzzy AI
    • Troubleshooting Figma
  • REST API
    • Buzzy REST API
      • Integrating 3rd party applications
      • REST API
        • login
        • createappwithprompt
        • MicroApp Data Operations
          • microappdata
          • microappdata/row
          • insertmicroapprow
          • updatemicroapprow
          • removemicroapprow
          • microappchild
        • User & Organization Operations
          • userid
          • insertteammembers
          • teammembers
          • insertorganization
          • insertteam
        • enforceteammembership
      • Node.js API Client
      • Datatable Rules
      • Datatabledata Tutorial
      • Integrating with Mailchimp
      • Python Access Datatable
  • Advanced Deployment Settings
    • Installation
      • Pre-installation Planning
      • Deployment
        • Introduction to deployment
        • Minikube install guide
        • AWS ECS Fargate install guide
        • HCL Connections install guide
        • Azure AKS install guide
        • Windows container install guide
      • Buzzy settings
      • Whitelabelling Buzzy
      • Certificates
      • Release Management
    • Performance and Reliability
    • Security
      • Platform
      • Users and Roles
      • Datatables
      • Audit Trail
Powered by GitBook
On this page
  • Embedded markup
  • Sandboxed iframe
  • Trusted iframe
  • Other settings
  1. The building blocks

Code widget (custom code)

The Code Widget field allows you to embed custom code in Buzzy. Use embedded markup for simple html or SVG without code, a sandboxed iframe if you have custom code (eg JavaScript), or a trusted iframe to embed media such as Youtube or Vimeo.

For and HTML field to render it needs a row of data.

Note HTML field types and components will also run in a sandboxed HTML widget/component on the Buzzy native client, albeit rendering HTML, see below for communication between the HTML and the parent Buzzy window or native app.

For more details please see the Code Widget Fields - Advanced Guide

Embedded markup

Embedded markup allows you to add custom html or svg code to your app, but code such as javascript will be stripped.

Sandboxed iframe

Sandboxed iframes allow you to add custom markup and code to your app, but are sandboxed, meaning they don’t have access to the root domain.

Trusted iframe

Trusted iframes allow you to embed an iframe from a trusted external source that requires access to the root domain, such as Youtube or Vimeo.

By default, Buzzy trusts the following domains:

  • youtube.com

  • www.youtube.com

  • www.youtube-nocookie.com

  • vimeo.com

  • www.vimeo.com

  • player.vimeo.com

  • www.loom.com

You can define the source URL of a trusted iframes as a:

  • Field: Select a field from the current row that will provide the source URL of the trusted iframe - this might be a text or URL field that contains the URL string.

Note: You can define custom domains to add to the trusted list if you set up your own Buzzy server.

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.

Markup


PreviousTroubleshooting Fields & DataNextCode Widget Fields - Advanced Guide

Last updated 7 months ago

Formula: Write a formula that will provide the source URL for the trusted iframe. See and for help on formulas.

You can provide custom markup such as HTML or SVG. A sandboxed iframe will also allow code such as javascript. Both embedded and sandboxed iframes will allow you to use handlebars to display field values - .

docs
jsonata.org
learn more