Add web objects to an Adobe Captivate project

Last updated on Jan 21, 2025

Captivate User Guide
Introduction to Captivate
1. What's New in Adobe Captivate
2. Adobe Captivate System Requirements
3. Adobe Captivate Updates
4. Download Adobe Captivate
5. Frequently Asked Questions
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
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
Add text blocks
1. Add text to a project
2. Add Adobe fonts to a project
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
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
Add branding blocks
1. Add a header to a project
2. Add a footer to a project
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
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
Add audio to a project
1. Add audio
2. Add closed captions
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
Animations
1. Add animations to a project
Accessibility
1. Make a project accessible
Customize the timeline
1. Timeline panel in Adobe Captivate
Customize TOC and Playbar
1. Table of Contents in Adobe Captivate
Edit project properties
1. Variables in Adobe Captivate
2. Preferences
3. Project dimensions
4. Themes
Create a simulation project
1. Simulation
Preview a project
1. Preview
Share a project for review
1. Share for review
2. FAQs and Troubleshooting guide for sharing projects for review
Publish a project
1. Publish your project
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.

Customize a web object
Best practices for using web objects in e-learning projects

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.

Select Add media blocks from the left toolbar.
Select Web Object.
In the Visual Properties panel, choose the number of web objects to include in the content block, with a maximum of 2 per slide.
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.

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.

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.

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.

Select the Embed code option.
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.

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.

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.

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.
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.

Customize a web object

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.
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 a card around the web object. Select the Card option from Components and expand the Card section to change the appearance of the card.
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.
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.

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.

Get help faster and easier

New user?