LogoLogo
DocumentationWebsiteCommunityPortal
  • Get Started
    • Quickstart
    • Tutorials
    • Wizards
  • Features
    • Release Notes
      • 2024
        • 04-05 Apr Update
        • 03-27 Mar Update
        • 02-07 Feb Update
        • 01-23 Jan Update
        • 01-05 Jan Update
      • 2023
        • 12-18 Dec Update
        • 11-30 Nov Update
        • 10-30 Oct Update
        • 10-04 Oct Update
        • 09-18 Sep Update
        • 09-11 Sep Update
        • 08-28 Aug Update
        • 08-14 Aug Update
        • 07-23 July Update
        • 07-14 July Update
        • 06-16 June Update
        • 06-6 June Update
        • 05-16 May Update
        • 03-31 Mar Update
        • 03-16 Mar Update
        • 03-10 Mar Update
        • 02-07 Feb Update
        • 01-24 Jan Update
        • 01-10 Jan Update
      • 2022
        • 12-08 Dec Update
        • 11-13 Nov Update
        • 11-07 Nov Update
        • 10-26 Oct Update
        • 10-14 Oct Update
        • 10-01 Oct Update
        • 08-26 Aug Update
        • 08-02 Aug Update
        • 07-01 July Update
        • 06-08 June Update
        • 05-20 May Update
        • 05-05 May Update
        • 04-25 Apr Update
        • 02-11 Feb Update
        • 01-28 Jan Update
        • 01-10 Jan Update
      • 2021
        • 12-10 Dec Update
        • 12-01 Dec Update
        • 11-26 Nov Update
        • 11-17 Nov Update
        • 11-12 Nov Update
        • 11-09 Nov Update
        • 11-02 Nov Update
        • 10-26 Oct Update
        • 10-21 Oct Update
        • 10-14 Oct Update
        • 09-27 Sep Update
        • 08-31 Aug Update
        • 07-20 July Update
        • 07-02 July Update
        • 06-31 June Update
  • Metaverse
    • Building
      • Portal
        • Team Members
        • Defining Global Variables
      • Editor
        • File Manager
          • Selecting a file
          • Sketchfab Integration
        • Placement in 3D Space
        • Project Settings
          • Preferences
          • Branding
          • Collaborators
          • Menu
          • Variables in Settings
          • Lead Generation
          • Tour Mode
          • Advanced
          • E-Commerce in Settings
        • Preview
          • Headset Testing - WebXR Emulator
        • Viewport Properties
        • Editor Keyboard Shortcuts
      • Scenes
        • 3D Scene
          • Avatar System
          • Colliders
          • Zones
          • Lights
        • 360 Scene
        • Orbit Scene
      • Elements
        • Image
        • Video
        • Audio
        • GIF
        • Text to Speech
        • Character
        • Character AI
        • Actionbar
        • Timer
        • Polygon
        • Linked Popups
        • Variants
      • Rules
        • Shared Rules
        • How Rules Work
        • Number Variable Rules
        • String Variable Rules
        • Boolean Variable Rules
      • Variables
        • Autogenerated Variables
        • String Substitution
        • Capturing User Input
      • Build FAQs
    • Publishing
      • URL or QR Code
      • Embed on your Website
      • Full-Page HTML
      • Embedding within Apps
        • Android Embed
        • React Native Embed
      • Export as SCORM package
      • Authentication
        • SSO
        • Password With Expiry
        • Email with OTP
        • Custom List
        • Token
        • Load from another Experience
      • Publishing FAQs
      • Private Cloud Deployment
    • Multiplayer
      • Host Mode
      • Broadcast Mode
      • Voice Chat
      • Text Chat
      • Video Chat
      • Screenshare
      • Comments
      • Share Reactions
      • Notifications
      • Troubleshooting webcam and microphone
    • Analytics
      • Advanced Analytics
      • Leaderboard
      • Viewer Sessions
    • Integrations
      • GMetri with SCORM
        • Embed a SCORM package in a GMetri experience
      • Live Stream on GMetri
        • Live Stream Zoom on YouTube
        • Live Stream Zoom on Vimeo
          • Zoom Setup
      • E-Commerce with GMetri
        • Shopify Integration
        • WooCommerce Integration
        • Custom Integration
        • Using an E-Commerce Plugin
      • Adding a Chatbot
      • Sending data to GMetri Deployment
    • Viewing
      • Avatars
      • First/Third Person
      • Concurrency
      • Oculus Controls
      • Viewer Keyboard Shortcuts
      • IT Permissions
        • Whitelisting for Viewing Experiences
        • Whitelisting for Editing Experiences
        • Whitelisting for Analytics
        • Subprocessors
    • GMetri SDK
      • GMetri Player
      • GMetri SDK APIs
        • Project
        • Deployment
        • File
        • Viewer Group
      • GMetri Webhooks
      • API Token
      • Examples
  • Guidelines/Compatibility
    • Guidelines
      • Content Creation Guidelines
        • XR Experience Storyboard
        • 360 Degree Video Shoots
        • Avatars vs Characters
        • Designing 3D Models for Immersive VR mode
      • Asset Guidelines
        • 3D Models
          • Export GLB/GLTF from 3DS Max
          • Export GLB/GLTF from Blender
        • 360 Pano Images Render
        • Resources for Assets
        • Asset FAQs
        • Image Aspect Ratio
      • Experience Optimizations
        • Scene Optimizations
          • Performance Monitor
        • Image Optimizations
        • Audio Optimizations
        • Video Optimizations
        • 3D Model Optimizations
      • Workflows
        • Green Screen
          • Apply Green Screen to Videos
          • Accurate Color Selection
        • QR Code Scanner
        • Adding Sprites
        • Adding Background Music & Persistent Logo
        • EmbedHTML Snippets
    • Compatibility
      • Platform Requirements - Viewer
      • Platform Compatibility Matrix
      • Supported File Formats
      • Supported Browsers
      • Capture Network and Console Logs from Chrome Browser
    • Limitations
      • iOS Limitations
      • VR Mode Limitations
  • Platform
    • Billing
    • Platform FAQs
    • Security
    • Legal
Powered by GitBook
On this page
  • Key Features
  • Getting Started
  • Example Use Cases
  • Best Practices
  • Troubleshooting

Was this helpful?

Edit on GitHub
Export as PDF
  1. Metaverse
  2. Building
  3. Elements

Linked Popups

PreviousPolygonNextVariants

Last updated 1 year ago

Was this helpful?

The Linked Popups feature allows you to enhance your interactive experiences by creating dynamic connections between image or video elements and popup elements. With Linked Popups, you can create engaging interactions where a popup element opens automatically when a linked image or video element is clicked. Furthermore, any updates made to the image or video asset will automatically reflect in the linked popup, ensuring seamless synchronization.

Key Features

  • Connect Image/Video Elements: Establish a connection between an image or video element and a popup element to create interactive experiences.

  • Automatic Popup Trigger: Whenever the linked image or video element is clicked, the popup element will open automatically, offering a seamless user experience.

  • Real-time Asset Updates: Any changes made to the image or video asset will be instantly reflected in the linked popup, eliminating the need for manual updates.

Getting Started

To use Linked Popups, follow these steps:

  1. Add Image/Video Element: Begin by adding an image or video element to your experience. You can upload your own asset or choose from the File Manager.

  2. Establish Link: Next, click on the "Add a New Linked Popup" button on the element's property panel. Alternatively, select an existing Popup element from the dropdown below the button. This will serve as the container for the content that will appear when the linked image or video element is clicked.

  3. Navigate, Unlink, Delete linked popup: Editors can navigate quickly to the linked popup element by clicking the "Go to Linked Popup" button. There are quick actions to delete and unlink the linked popup element.

  4. Customize Popup: Customize the design and content of the popup element to match your preferences. You can add a heading, description and background. You can also change the content to be shown in the Popup.

  5. Preview and Publish: Preview your Metaverse experience to test the Linked Popups feature. Ensure that the popup opens correctly when the linked image or video element is clicked. Make any necessary adjustments and then publish your project.

Example Use Cases

  1. Product Showcase: Create a Metaverse experience where clicking on different product images triggers a popup with detailed information, pricing, and a call-to-action button for purchasing the product.

  2. Virtual Tour: Design a virtual tour where clicking on specific areas within a 360-degree image opens popups with additional details, such as historical facts, multimedia content, or navigation options.

  3. Video Galleries: Build an interactive video gallery where each thumbnail image is linked to a popup containing the corresponding video. Users can easily browse and watch videos without leaving the Metaverse experience.

  4. Storytelling and Narration: Use Linked Popups to create interactive stories or presentations where users can click on specific images or video elements to reveal additional narrative content or interactive branching paths.

Best Practices

  • Keep the popup content concise and relevant to maintain a smooth user experience.

  • Ensure that the linked image or video element clearly indicates its interactive nature, such as by using hover effects or clickable overlays.

  • Test the Metaverse experience thoroughly across different platforms and devices to ensure the Linked Popups work consistently.

Troubleshooting

  • If the popup does not open when the linked image or video element is clicked, double-check the link configuration and ensure that the elements are properly connected.

  • If the asset changes are not reflected in the linked popup, verify that you are modifying the correct image or video element. Assets are only synced when there are no manual modifications made to the Popup element.