labvanced logoLabVanced
  • Research
    • Publications
    • Researcher Interviews
    • Use Cases
      • Developmental Psychology
      • Linguistics
      • Clinical & Digital Health
      • Educational Psychology
      • Cognitive & Neuro
      • Social & Personality
      • Arts Research
      • Sports & Movement
      • Marketing & Consumer Behavior
      • Economics
      • HCI / UX
      • Commercial / Industry Use
    • Labvanced Blog
    • Services
  • Technology
    • Feature Overview
    • Code-Free Study Building
    • Eye Tracking
    • Mouse Tracking
    • Generative AI Integration
    • Multi User Studies
    • More ...
      • Reaction Time/Precise Timing
      • Text Transcription
      • Heart Rate Detection (rPPG)
      • Emotion Detection
      • Questionnaires/Surveys
      • Experimental Control
      • Data Privacy & Security
      • Desktop App
      • Mobile App
  • Learn
    • Guide
    • Videos
    • Walkthroughs
    • FAQ
    • Release Notes
    • Documents
    • Classroom
  • Experiments
    • Cognitive Tests
    • Sample Studies
    • Public Experiment Library
  • Pricing
    • Licenses
    • Top-Up Recordings
    • Subject Recruitment
    • Study Building
    • Dedicated Support
    • Checkout
  • About
    • About Us
    • Contact
    • Downloads
    • Careers
    • Impressum
    • Disclaimer
    • Privacy & Security
    • Terms & Conditions
    • Third-Party Licenses
  • Appgo to app icon
  • Logingo to app icon
Learn
Guide
Videos
Walkthroughs
FAQ
Newsletter Archive
Documents
Classroom
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
Guide
Videos
Walkthroughs
FAQ
Newsletter Archive
Documents
Classroom
  • 中國人
  • Deutsch
  • Français
  • Español
  • English
  • 日本語
  • Guide
    • GETTING STARTED

      • Task Editor
      • Frames
        • Canvas Frame
        • Page Frame
        • Website Frame
      • Trial Timeline
      • Stimulus Presentation
      • Correctness of Response
      • Objects
      • Events
      • Variables
      • Task Wizard
      • Trial System
      • Experiment Design
        • Creating a Study
        • Data Frame Patterns
        • Multi-user Experiment Design
        • Longitudinal Experiment Design
    • FEATURED TOPICS

      • Randomization & Balance
      • Eye Tracking
        • Presenting Stimuli in an Eye Tracking Task
        • How to Choose Eye Tracking Calibration Settings
        • Setting Up Eye Tracking in a Task
        • Recording and Exporting Gaze Data
        • Using Shapes as Areas of Interest (AOI) for Eye Tracking
        • The Participant Calibration Experience
      • Web Bridge
        • Selecting Website AOIs | Anchor, Adjust, and Verify AOI Tracking
        • Tracking Mouse Behavior on a Website AOI | Web Bridge Guide
      • Questionnaires
      • Desktop App
      • Sample Studies
      • Participant Recruitment
      • API Access
        • REST API
        • Webhook API
        • WebSocket API
      • Other Topics

        • Precise Stimulus Timings
        • Multi User Studies
        • Head Tracking in Labvanced | Guide
    • MAIN APP TABS

      • Overview: Main Tabs
      • Dashboard
      • My Studies
      • Shared Studies
      • My Files
      • Experiment Library
      • My Account
      • License & Services
    • STUDY TABS

      • Overview: Study-Specific Tabs
      • Study Design
        • Tasks
        • Blocks
        • Sessions
        • Groups
      • Task Editor
        • Task Controls
        • The Trial System
        • Frame Types
        • Objects
        • Object Property Tables
        • Variables
        • System Variables Table
        • The Event System
        • Text Editor Functions
        • Eye Tracking Options in the Task Editor
        • Head Tracking in a Task
        • Multi-User Studies
      • Settings
      • Variables
      • Media
      • Texts & Translate
      • Launch & Participate
      • Subject Management
      • Dataview and Export
        • Dataview and Variable & Task Selection (OLD Version)
        • Accessing Recordings (OLD Version)
  • Videos
    • Video Overview
    • Getting Started in Labvanced
    • Creating Tasks
    • Element Videos
    • Events & Variables
    • Advanced Topics
  • Walkthroughs
    • Introduction
    • Stroop Task
    • Lexical Decision Task
    • Posner Gaze Cueing Task
    • Change Blindness Flicker Paradigm
    • Eye-tracking Sample Study
    • Infant Eye-tracking Study
    • Attentional Capture Study with Mouse Tracking
    • Rapid Serial Visual Presentation
    • ChatGPT Study
    • Eye Tracking Demo: SVGs as AOIs
    • Multi-User Demo: Show Subjects' Cursors
    • Gamepad / Joystick Controller- Basic Set Up
    • Desktop App Study with EEG Integration
    • Between-subjects Group Balancing and Variable Setup
    • Building a Multi-user Study
    • Website Frame Eye Tracking Walkthrough
    • Conditional Webcam Eye Tracking
  • FAQ
    • Features
    • Support Policy & Guidelines
    • Security & Data Privacy
    • Licensing
    • Precision of Labvanced
    • Programmatic Use & API
    • Using Labvanced Offline
    • Troubleshooting
    • Study Creation Questions
  • Newsletter Archive
  • Documents
  • Classroom
Illustration of the Website Frame in Labvanced, showing a real external website embedded in a study

Website Frame

Website Frame is a third frame type, alongside Canvas Frame and Page Frame, not an element placed on top of either one. It is added to a trial group the same way: a click on its own icon among the frame-type options.

Where a Canvas or Page Frame presents stimuli built inside Labvanced, a Website Frame embeds a real, external, live website directly in the study. This is the frame type behind Labvanced's Web Bridge functionality, used for usability testing, attention studies, and eye tracking on an actual website rather than a recreation of one.

Note

If you plan to use a Website Frame, for embedding your external website or creating one in Labvanced, it is strongly recommended to isolate that frame type in its own task rather than combining it with Canvas or Page Frames in the same trial timeline.

External Website vs. Custom Website

There are two types of websites supported by this frame.

External Website

Embeds a real, live website by URL, with three checkboxes to control the embedded browser chrome: Show URL bar, Show back button, Show forward button. Requires the Web Bridge Chrome extension to be installed, see the full Labvanced Web Bridge guide for installation steps.


Custom Website

Coming soon. Builds a website from scratch inside Labvanced instead of embedding a live one. Clicking Edit Code opens a dedicated HTML, CSS, and JavaScript editor with a Variables panel to inject Labvanced variables into the code at runtime, for example a self-checkout kiosk interface built from a CSV-loaded product catalog.

Website Frame properties

A Website Frame has its own frame-level properties, separate from any element placed on it. Set in the Frame Settings panel:

  • Name: a label to identify the frame within your task (participants never see it)
  • Duration: an optional fixed display time in milliseconds; if left unset, the frame stays on screen until an event or action advances it
  • Hide Mouse: hides the participant's cursor while the frame is active
  • Mode: sets whether the frame shows an External Website or a Custom Website, described above
  • Resolution: a dropdown of presets, or manual Width/Height in pixels, sets a fixed virtual resolution that scales to fit each participant's screen, the same model a Canvas Frame uses, so every participant sees the same layout regardless of their actual screen size

For the complete workflow, installing the browser extension, adding a Website Frame, selecting Areas of Interest, and what gets tracked, see the full Labvanced Web Bridge guide or the Website Frame Eye Tracking Walkthrough for a start-to-finish task flow.

Watch the walkthrough in this video:

Further Reading

Illustration of the three frame types in Labvanced: Canvas, Page, and Website Frame

Frames

The hub for all frame types and the properties every frame shares.

Labvanced Web Bridge

The full guide: installing the extension, adding a Website Frame, selecting AOIs, and what gets tracked.

Website Frame Eye Tracking Walkthrough

A start-to-finish task flow for tracking gaze on a real embedded website.

Prev
Page Frame