Skip to main content

📽️ Multimedia

The Multimedia category encompasses components that handle various media types, enabling you to enrich your application with images, videos, animations, and 3D models.

Available Components:

  • Image
  • Video
  • Lottie Animation
  • 3D Model
  • Audio

Image​

  1. Add the Image:
    • Drag and drop the Image component onto the Canvas.
    • Place the image where desired and adjust its size using percentage values or by dragging its edges.
  2. Set and Customize:
    • Left Toolbar:
      • Add Image Link: Paste the URL of the image you want to display.
      • Upload Image:
        • Click on "Choose Image" and select an image file from your device.
        • Alternatively, drag and drop an image from your desktop.
        • Click "Upload Image" to add it to AppStruct.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Video​

  1. Add the Video:
    • Drag and drop the Video component onto the Canvas.
    • Place the video where desired and adjust its size accordingly.
  2. Set and Customize:
    • Left Toolbar:
      • Embedding YouTube Videos:
        • If you’re adding a YouTube video, don’t copy the link directly from your browser’s address bar. Instead, click on “Share” under the YouTube video, then choose “Embed”.
        • Copy the embed link (the URL found within the <iframe> code), and paste it into the “Add Video Link” field.
        • Other Video Links: If you have a direct mp4 video URL (not YouTube), simply paste it here.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize comprehensive customization options, such as border style, shadow, and more.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Lottie Animation​

  1. Add the Lottie Animation:
    • Drag and drop the Lottie Animation component onto the Canvas.
    • Place the animation where desired and adjust its size accordingly.
  2. Set and Customize:
    • Left Toolbar:
      • Add Lottie Animation Link: Paste the URL of the Lottie animation file.
      • Upload Lottie Animation File:
        • Click on "Choose a Lottie Animation File" and select a .json file from your device.
        • Alternatively, drag and drop a Lottie animation file from your desktop.
        • Click "Upload Lottie Animation File" to add it to AppStruct.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize comprehensive customization options, such as border style, shadow, and more.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

3D Model​

  1. Add the 3D Model:
    • Drag and drop the 3D Model component onto the Canvas.
    • Place the 3D model where desired and adjust its size accordingly.
  2. Set and Customize:
  • Left Toolbar:
    • Add 3D Model Link: Paste the URL of the 3D model file.
    • Upload 3D Model File:
      • Click on "Add 3D Model File" and select a .glb or .gltf file from your device.
      • Alternatively, drag and drop a 3D model file from your desktop.
      • Click "Upload 3D Model File" to add it to AppStruct.
    • Rotation and Scaling Options:
      • Autorotate: Enable or disable automatic rotation of the model.
      • Rotate by Mouse or Touch: Allow users to rotate the model using mouse or touch gestures.
      • Scale by Mouse Wheel or Touch Events: Enable scaling of the model through mouse wheel or touch interactions.
      • Set Camera Position: Enter numerical values to define the camera's position relative to the model.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
  • Right Toolbar:
    • Utilize comprehensive customization options, such as border style, shadow, and more.
    • Refer to the Customization Guide for detailed instructions.

Spline Integration:​​

Spline integration allows you to add animated 3D models to AppStruct and interact with them directly in your Canvas and Preview Mode. Follow these steps to take advantage of the Spline integration:

  1. Create or Open a Scene in Spline.
  2. Export Your 3D Model:
    • Click on the "Export" button.
    • Select "Code Export (Beta)" in the popup window.
    • Copy the scene link provided in the first bar.
  3. Add to AppStruct:
    • Use this link in the 3D Model Link section to add the Spline model directly to your project.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Audio​

The Audio component allows you to easily embed and control audio playback within your application. It offers customizable options for displaying audio information, controlling playback rate, volume, and features like autoplay and looping. With this component, you can integrate audio tracks with a clean and user-friendly interface, providing a seamless multimedia experience for your users.

  1. Adding the Audio Component
  • Drag and drop the Audio Component component onto the Canvas.
  • Place the Audio Component where desired and adjust its size accordingly.
  1. Set and Customize:
  • Left Toolbar:
    • Audio Source: In the Audio Source field, paste the URL of the audio file you want to play. It can be an online URL or a local file..
    • Audio Title: Provide the title of the track (e.g., "Track Title"). This will be displayed to users next to the player.
    • Audio Subtitle: This field is optional. You can add an Artist Name or other relevant information that will be displayed under the title.
    • Playback Rate: Define the playback rate for the audio. You can set a custom playback speed (e.g., 1x, 1.5x, or 2x) if needed.
    • Autoplay: Turn on Autoplay if you want the audio to start playing automatically when the page or element is loaded.
    • Loop: Enable the Loop option to make the audio repeat indefinitely when it finishes playing.
    • Muted: Use the Muted toggle if you want the audio to start in a muted state by default.
    • Volume Control: The built-in Volume Slider allows users to control the volume of the audio playback. The slider’s range can be adjusted to fit your needs.
    • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
    • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
  • Right Toolbar:
    • Utilize comprehensive customization options, such as border style, shadow, and more.
    • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Quick Tips​

  1. Optimize File Sizes: Use compressed images, animations, and videos to keep load times short and maintain a smooth user experience.
  2. Ensure Cross-Platform Compatibility: Test your media components on various devices and browsers to confirm they work properly everywhere.
  3. Maintain Visual Consistency: Keep styles (e.g., borders, shadows, colors) consistent across different multimedia components for a cohesive look and feel.
  4. Use Descriptive Filenames and Alt Text: Label media files clearly and provide alt text where possible to improve accessibility and SEO.
  5. Control Autoplay Responsibly: Only enable autoplay for videos or audio when it benefits the user experience and does not disrupt user flow.
  6. Preview & Adjust for Different Screen Sizes: Take advantage of responsive settings to ensure media elements look great on mobile, tablet, and desktop.
  7. Provide Clear Controls: Offer easy-to-use buttons and sliders (e.g., volume, playback rate) so users can interact comfortably with your media.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].