Guida utente Annulla

Add web objects to an Adobe Captivate project

  1. Captivate User Guide
  2. Introduction to Captivate
    1. What's New in Adobe Captivate
    2. Adobe Captivate System Requirements
    3. Adobe Captivate Updates
      1. Adobe Captivate (12.5 update) release notes
      2. Adobe Captivate (12.4 update) release notes
      3. Adobe Captivate (12.3 update) release notes
      4. Adobe Captivate (12.2 update) release notes
      5. Adobe Captivate (12.1 update) release notes
    4. Download Adobe Captivate
    5. Frequently Asked Questions
  3. Add a slide
    1. Slide navigator in Adobe Captivate
    2. Add a conversation slide
    3. Add characters to your Adobe Captivate project
    4. Edit the background image on a slide
    5. Add padding to content blocks and components
    6. Create a long scroll project
  4. Design options in Adobe Captivate
    1. What are design options?
    2. Parts of a design option
    3. Create custom design options
    4. Modify a custom design option
    5. Export a custom design option
    6. Import a custom design option
  5. Add text blocks
    1. Add text to a project
    2. Add Adobe fonts to a project
  6. Add media blocks
    1. Add images to a project
    2. Add videos to a project
    3. Add quotes
    4. Add SVGs to a project
    5. Add web objects to a project
  7. Interactive components
    1. Add a button
    2. Add an input field
    3. Add a radio button group
    4. Add a dropdown
    5. Add a checkbox
  8. Add branding blocks
    1. Add a header to a project
    2. Add a footer to a project
  9. Widgets
    1. Add a Card
    2. Add Tabs
    3. Add a Certificate
    4. Add a Carousel
    5. Add a Hotspot
    6. Add Drag-and-Drop
    7. Add a Timeline
    8. Add Click to Reveal
    9. Add an Accordion
  10. Create quizzes
    1. Add a Multiple-choice question
    2. Add a True or false question
    3. Add a Match the column question
    4. Add a Short answer question
    5. Add a Sequence question
    6. Add question pools and random question slides
    7. Import questions as CSV
  11. Add audio to a project
    1. Add audio
    2. Add closed captions
  12. Interactions
    1. Add interactions to a project
    2. Create interactive video with overlay
    3. Create a slide-level interaction
    4. Create an object-level interaction
  13. Animations
    1. Add animations to a project
  14. Accessibility
    1. Make a project accessible
  15. Customize the timeline
    1. Timeline panel in Adobe Captivate
  16. Customize TOC and Playbar
    1. Table of Contents in Adobe Captivate
  17. Edit project properties
    1. Variables in Adobe Captivate
    2. Preferences
    3. Project dimensions
    4. Themes
  18. Create a simulation project
    1. Simulation
  19. Preview a project
    1. Preview
  20. Share a project for review
    1. Share for review
    2. FAQs and Troubleshooting guide for sharing projects for review   
  21. Publish a project
    1. Publish your project
  22. Upgrade projects in Adobe Captivate
    1. Upgrade projects to the latest version 

Learn how to add web objects to a Captivate project.

Overview

Web objects allow you to embed external content, such as HTML5 media, videos, web pages, streaming links, and PDFs, directly into slides. This feature enhances interactivity and allows the integration of third-party resources. Web Objects can be added using URLs, embed codes, or uploaded PDFs, offering flexibility in content inclusion. Their appearance is fully customizable, with options to include captions, subtitles, and interactive buttons, ensuring a cohesive and engaging user experience.

Topics in this page:

Add a web object on a slide

There are three methods for adding a web object in Adobe Captivate: you can add the URL of a webpage, insert an embed code for a video or streaming link, or upload a PDF from your system.

  1. Select Add media blocks from the left toolbar.

  2. Select Web Object.

    Add a web object on a slide

  3. In the Visual Properties panel, choose the number of web objects to include in the content block, with a maximum of 2 per slide.

  4. Add components such as Captions, Subtitles, Cards, or Buttons through the Components section.

    • Caption/Subtitle: Adds text placeholders inside the content block. 
    • Card: Adds a card around the web object(s) and acts as a container. 
    • Button: Can be used to hide or show the web object, add interactions and animations. 
    Add components ins a web object

Adding web object sources

Select the web object placeholder on the slide to see the source options in the Content section to add the web object.

Web object source

 Adding a URL as a web object

Select the URL option in the Content section to display web pages or an online video on a slide, then copy and paste the URL into the address field.

Add a URL of a web object

 The preview of the web object appears within the content block. 

Adding an embed code as a web object

An embed code is a snippet of HTML or JavaScript provided by external platforms that allows you to integrate multimedia content, such as videos, interactive elements, or widgets, into your project.

An embed code helps you to include videos from a streaming server and gives you more control over the object’s size, layout, and appearance.

  1. Select the Embed code option.

  2. Copy the embed code from YouTube, Vimeo, or any video streaming platform and paste it.

    Here is an example of an embed code from a YouTube video:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/pydJXGFsQ3A?si=Xn7kPDoNG9UduYX8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

    On pasting the embed code, the preview appears on the slide.

    Embed code from YouTube

    To utilize the entire area of the web object content block, edit the embed code of the iframe. Adjust the code to set the width and height attributes to "100%". For example: width="100%" height="100%". This ensures the web object fully occupies the available space.

    embed code

Adding a PDF as a web object

Embedding PDFs as web objects in Adobe Captivate enhances e-learning by providing supplementary materials, such as guides or worksheets, directly within slides. 

  1. Select the System option and then select the   icon to browse a PDF file from the system. Upon publishing the project, the PDF is copied to the project files.

    PDF as a web object

  2. Select Preview from the top-right corner to check how the PDF appears across various device views at runtime.. During the preview, test key functions such as search, scrolling, annotations, and saving the file.

    PDF on preview

Customize a web object

  1. Customize the appearance of the web object content block in the Appearance section. Enhance its visual appeal by adjusting the background color, adding borders, and applying shadows.

    Customize the web object appearance

  2. In the Alignment and Spacing section, you can adjust the content width using the slider or add padding between the content and its borders. Learn more about padding and auto-layouts in Adobe Captivate.

    Add alignment and spacing for a web object

  3. Add a card around the web object. Select the Card option from Components and expand the Card section to change the appearance of the card.

    Web object card

  4. Select the Caption or Subtitle text components to customize their appearance. You can adjust the text color, apply highlights or shadows, add bullets or numbering, and choose a style from the presets panel.

    Customize the text in a web object

  5. Select the Button component to customize its design or add padding. You can modify its shape, text, icon, color, border, or add shadows for a personalized look.

    Customize the button in a web object

Best practices for using web objects in e-learning projects 

To ensure that embedded content like videos and links to external media run smoothly and securely within your e-learning project, we recommend these best practices: 

  • Use HTTPS: Always use HTTPS for secure, encrypted connections to protect user data and ensure compatibility with modern browsers.  
  • Check for Clickjacking: Click jacking is a threat to security and Captivate does not support redirecting to a different website. 
  • Verify Browser Compatibility: Test embedded content across different browsers to ensure it displays and functions properly for all users. 
  • Confirm Legal and Unblocked Content: Use trusted, legal sources for embedded media and regularly check that links still work and are accessible in relevant regions. 
  • Ensure CORS Compliance: Make sure external resources support CORS (Cross origin resource sharing) to avoid browser restrictions on embedded content from different origins. 
  • Test Device Compatibility: Verify that embedded content is responsive on tablets and mobile devices for a seamless experience across screen sizes. 
  • Check for Script Blocking: Test content with script blocking enabled and work with your team to implement fallbacks if critical content is blocked. 

Ottieni supporto in modo più facile e veloce

Nuovo utente?