html embed presentation

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

• No order here

Fantastic Ordered List

• One is smaller than...
• Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

• Right-to-left support
• Extensive JavaScript API
• Auto-progression
• Parallax backgrounds
• Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

Home Blog PowerPoint Tutorials How to Embed HTML in PowerPoint

How to Embed HTML in PowerPoint

Embedding an HTML file in PowerPoint can enable directly opening the file during a PowerPoint presentation. While PowerPoint is not a web browser with limitations regarding such files, you can embed HTML in PowerPoint.

How to Embed HTML into PowerPoint

To add embed code in PowerPoint, you can simply add it to a textbox. You might also want to see which PowerPoint templates or Google Slides templates to use with PowerPoint to make your code prominently visible. However, to embed an HTML file, it needs to be added as an object. 

HTML files can be embedded as objects in PowerPoint via Insert -> Text -> Object .

From the dialog box, select a file and browse to select the HTML file. You can choose to display the file as an icon by checking the Display as Icon option. Check the Link option if you want the linked file to be updated with the latest version. This will help ensure that changes made to the HTML file are reflected when you open it.

How to Open Embedded HTML File in Normal Mode

The HTML file added to PowerPoint can be opened by clicking Normal mode.

How to Open Embedded HTML File in Slide Show Mode

Once the HTML object is added, you will require hyperlinking it to ensure it opens in Slide Show mode. Select the HTML object embedded in your slide and go to Insert Link via the Insert tab.

Browse to select the HTML file to hyperlink it to the embedded HTML object in your slide.

Hyperlinking the HTML file will make it clickable in Slide Show mode.

Final Words

If you link to an HTML file, your PowerPoint file will refer to the linked file, whereas not linking it will embed your PowerPoint presentation. Hence, if you want to embed an HTML file in your slide, you shouldn’t link your file. To ensure the file can open in Slide Show mode, it will require a hyperlink to become clickable directly during a Live presentation session. Otherwise, you must exit Slide Show mode to launch the file.

Like this article? Please share

HTML, Microsoft PowerPoint Filed under PowerPoint Tutorials

Related Articles

Filed under Google Slides Tutorials , PowerPoint Tutorials • April 17th, 2024

Google Slides vs. PowerPoint: A Detailed Comparison

Contrast and pick with presentation software suits your best. Check our guide on how the Google Slides vs. PowerPoint eternal debate.

Filed under PowerPoint Tutorials • April 16th, 2024

How to Insert an Equation in PowerPoint

Learn how to create easy-to-understand science slides by mastering how to insert an equation in PowerPoint. Step-by-step guide.

Filed under PowerPoint Tutorials • April 9th, 2024

How to Remove Notes from PowerPoint

Make alternative versions of your presentation files by learning how to remove notes from PowerPoint. Step-by-step guide with screeshots.

Leave a Reply

Presenting Slides

This article covers the mechanics of presenting slides with Reveal. Basic navigation is done using the following keyboard shortcuts:

You will often want to enter fullscreen mode when presenting. You can do this by pressing the F key.

In addition to basic keyboard navigation, Reveal supports several more advanced capabilities, including:

• Navigation menu and overview mode
• Speaker view (w/ speaker notes,timer, and preview of upcoming slides)
• Printing to PDF and publishing as self contained HTML
• Drawing on top of slides & chalkboard/whiteboard mode
• Multiplex, which allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop.

These capabilities are described below.

Navigation Menu

You can also open the navigation menu by pressing the M key.

The navigation menu also includes a Tools pane that provides access to the various other navigation tools including Fullscreen, Speaker View, Overview Mode, and Print to PDF.

Use the following options to customize the appearance and behavior of the menu:

For example:

You can hide the navigation menu by specifying the menu: false option:

Note that you can still open the menu using the M key even if the button is hidden.

Overview Mode

Overview mode provides an alternate view that shows you a thumbnail for each slide:

You can enable Overview Mode by pressing the O key.

Hold down the Alt key (or Ctrl in Linux) and click on any element to zoom towards it. Try zooming in on one of these images:

Alt or Ctrl click again to zoom back out.

Speaker View

The speaker view shows the current slide along with the upcoming slide, a timer, and any speaker notes associated with the current slide:

You can enable Speaker View by pressing the S key.

You can add speaker notes to a slide using a div with class .notes . For example:

Slide Numbers

You can add slide numbers to your presentation using the slide-number option. You can also control in which contexts slide numbers appear using the show-slide-number option. For example, here we configure slides numbers for printed output only:

In addition to a simple true or false value, the slide-number option can also specify a format. Available formats include:

See Vertical Slides for additional information on vertical slides.

The show-slide-number option supports the following values:

Print to PDF

Reveal presentations can be exported to PDF via a special print stylesheet.

Note: This feature has been confirmed to work in Google Chrome , Chromium as well as in Firefox .

To Print to PDF, do the following:

• Toggle into Print View using the E key (or using the Navigation Menu )
• Open the in-browser print dialog (CTRL/CMD+P).
• Change the Destination setting to Save as PDF .
• Change the Layout to Landscape .
• Change the Margins to None .
• Enable the Background graphics option.
• Click Save 🎉

Here’s what the Chrome print dialog would look like with these settings enabled:

Print Options

There are a number of options that affected printed output that you may want to configure prior to printing:

For example, the following specifies that we want to print speaker notes on their own page and include slide numbers:

Preview Links

Reveal makes it easy to incorporate navigation to external websites into the flow of presentations using the preview-links option.

When you click on a hyperlink with preview-links: true , the link will be navigated to in an iframe that overlays the slide. For example, here we’ve clicked on a Matplotlib link and the website opens on top of the slide (you’d click the close button at top right to hide it):

Available values for preview-link include:

For example, here we set preview-links to auto :

You can also set this option on a per-link basis. These two links respectively enable and disable preview:

Previewing website in HTML format will use an <iframe> , which not all websites will allow (e.g. they could set in their respone header X-Frame-Options to deny , or frame-ancestor restriction in their Content-Security-Policy ). If a website disallow iframe usage, the preview will not be working in the Quarto document output.

Slide tone plays a subtle sound when you change slides. It was requested by a blind user and enables presenters to hear an auditory signal of their progress through the slides. Enable slide tone with:

The tones increase in pitch for each slide from a low C to a high C note. The tone pitch stays the same for incremental slides.

The implementation of slide tone was adapted from the slide tone plugin in xaringanExtra.

Presentations can be configured to step through slides automatically, without any user input. To enable this you will need to specify an interval for slide changes using the auto-slide option (the interval is provided in milliseconds). The loop option can additionally be specified to continue presenting in a loop once all the slides have been shown.

For example, here we specify that we want to advance every 5 seconds and continue in a loop:

A play/pause control element will automatically appear for auto-sliding decks. Sliding is automatically paused if the user starts interacting with the deck. It’s also possible to pause or resume sliding by pressing A on the keyboard.

You can disable the auto-slide controls and prevent sliding from being paused by specifying auto-slide-stoppable: false .

Slide Timing

It’s also possible to override the slide duration for individual slides and fragments by using the autoslide attribute (this attribute also works on Fragments ). For example, here we set the auto-slide value to 2 seconds:

There are two main ways to publish Reveal presentations:

As a PDF file—see Print to PDF above for details on how to do this.

As an HTML file. For HTML, it’s often most convenient to distribute the presentation as a single self contained file. To do this, specify the embed-resources option:

All of the dependent images, CSS styles, and other assets will be contained within the HTML file created by Quarto.

Note that specifying embed-resources can slow down rendering by a couple of seconds, so you may want to enable embed-resources only when you are ready to publish. Also note that Reveal plugin Chalkboard is not compatible with embed-resources — when Chalkboard plugin is enabled, specifying embed-resources: true will result an error.

See the documentation on Publishing HTML for details on additional ways to publish Reveal presentations including GitHub Pages and Posit Connect.

Navigation Options

There are several navigational cues provided as part of Reveal presentations and corresponding options that control them:

For example, the following configuration hides the progress bar and specifies that we want to use browser history:

Quarto includes a built-in version of the reveal.js-chalkboard plugin. Specify the chalkboard: true option to enable the plugin, which enables you to draw on a notes canvas on top of your slides and/or open up an empty chalkboard within your presentation:

Note that Reveal plugin Chalkboard is not compatible with embed-resources output — when Chalkboard plugin is enabled, specifying embed-resources: true will result an error.

Here are what the notes canvas and chalkboard look like when activated:

Here are all of the keyboard shortcuts associated with the notes canvas and chalkboard:

The following mouse and touch gestures can be used for interacting with drawings:

Click on the buttons at the bottom left to toggle the notes canvas or chalkboard

Click on the color picker at the left to change the color (the color picker is only visible if the notes canvas or chalkboard is active)

Click on the up/down arrows on the right to switch among multiple chalkboard (the up/down arrows are only available for the chalkboard)

Click the left mouse button and drag to write on notes canvas or chalkboard

Click the right mouse button and drag to wipe away previous drawings

Touch and move to write on notes canvas or chalkboard

Touch and hold for half a second, then move to wipe away previous drawings

Restoring Drawings

The D key downloads any active drawings into a JSON file. You can then restore these drawings when showing your presentation using the src option. For example:

Chalkboard Options

The following options are available to customize the behavior and appearance of the chalkboard:

For example, the following configuration specifies that we want to use the whiteboard theme with a (thicker) boardmarker width, and that we want to hide the chalkboard buttons at the bottom of each slide:

If you disable the chalkboard buttons globally you can selectively re-enable them for inidvidual slides with the chalkboard-buttons attribute. For example:

You can also use chalkboard-buttons="false" to turn off the buttons for individual slides.

Quarto includes a built-in version of the Reveal Multiplex plugin. The multiplex plugin allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop. When you change slides in your master presentations everyone will follow and see the same content on their own device.

Creating a Reveal presentation that supports multiplex is straightforward. Just specify the multiplex: true option as follows:

Rendering the presentation will result in two HTML files being created by Quarto:

The two versions of the presentation will be synchronized such that when the speaker version switches slides the viewers also all switch to the same slide.

Multiplex Server

Behind the scenes there is a multiplex server that is synchronizing slide events between the viewer and speaker versions of the presentation. Note that the this server does not actually see any of the slide content, it is only used to synchronize events.

By default, a server created and hosted by the Revealjs team is used for this: https://reveal-multiplex.glitch.me/ . This server is used by default when you specify multiplex: true .

Running your own server

If you want to run your own version of this server its source code is here: https://github.com/reveal/multiplex/blob/master/index.js .

You can then configure multiplex to use an alternate server as follows:

Note that Quarto calls the multiplex server behind the scenes to provision a id and secret for your presentation. If you want to provision your own id and secret you can do so at https://reveal-multiplex.glitch.me/ (or using your custom hosted server URL) and provide them explicitly in YAML:

Note that the secret value will be included in only the speaker version of the presentation.

Learning More

See these articles lo learn more about using Reveal:

• Reveal Basics covers the basic mechanics of creating presentations.
• Advanced Reveal delves into transitions, animations, advanced layout and positioning, and other options available for customizing presentations.
• Reveal Themes talks about using and customizing existing themes as well as creating brand new themes.

How to Create Beautiful HTML & CSS Presentations with WebSlides

Share this article

Getting Started with WebSlides

Create a web presentation with webslides.

• Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

This article was peer reviewed by Ralph Mason , Giulio Mainardi , and Mikhail Romanov . Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Presentations are one of the best ways to serve information to an audience. The format is short and sharp, made up of small, digestible chunks, which makes any topic under discussion engaging and easier to understand. A presentation can contain all kinds of data, represented by many different elements, such as tables, charts, diagrams, illustrations, images, videos, sounds, maps, lists, etc, all of which lends great flexibility to this medium of expression.

Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations:

WebSlides “is about telling the story, and sharing it in a beautiful way.”

In fact, one of WebSlides’ main benefits is that you can share your story beautifully and in a variety of different ways. With one and the same architecture — 40+ components with semantic classes, and clean and scalable code — you can create portfolios, landings, longforms, interviews, etc.

Besides, you can also extend WebSlides’ functionality by combining it with third-party services and tools such as Unsplash , Animate.css , Animate On Scroll , and so on.

WebSlides is easy to learn and fun to use. Let’s see it in action now.

To get started, first download WebSlides . Then, in the root folder, create a new folder and call it presentation . Inside the newly created presentation folder, create a new file and call it index.html . Now, enter the following code, which contains the needed references to the WebSlides’ files (make sure the filepaths correspond to the folder structure in your setup):

In this section you’re going to create a short, but complete presentation, which explains why SVG is the future of web graphics. Note: If you are interested in SVG, please check my articles: SVG 101: What is SVG? and How to Optimize and Export SVGs in Adobe Illustrator .

You’ll be working step by step on each slide. Let’s get started with the first one.

The first slide is pretty simple. It contains only one sentence:

Each parent <section> inside <article id="webslides"> creates an individual slide. Here, you’ve used two classes from WebSlides’ arsenal, i.e., bg-gradient-r and aligncenter , to apply a radial gradient background and to align the slide content to the center respectively.

The second slide explains what SVG is:

The code above uses the content-left and content-right classes to separate the content into two columns. Also, in order to make the above classes work, you need to wrap all content by using the wrap class. On the left side, the code uses text-subtitle to make the text all caps, and text-intro to increase the font size. The right side consists of an illustrative image.

The next slide uses the grid component to create two columns:

The snippet above shows how to use the grid and column classes to create a grid with two columns. In the first column the style attribute aligns the text to the left (Note how the aligncenter class on the <section> element cascades through to its .column child element, which causes all text inside the slide to be center aligned). In the second column, the browser class makes the illustrative image look like a screenshot.

In the fourth slide, use the grid component again to split the content into two columns:

In this slide, place half of the content to the left and the other half to the right using the content-left and content-right classes respectively:

In this slide, use the background class to embed an image as a background with the Unsplash service . Put the headline on light, transparent background by using the bg-trans-light class. The text’s color appears white, because the slide uses a black background with the bg-black class, therefore the default color is inversed, i.e., white on black rather than black on white. Also, for the text to be visible in front of the image, wrap it with <div class="wrap"> :

In this slide, put the explanation text on the left and the illustrative image on the right at 40% of its default size (with the alignright and size-40 classes on the <img> element). For this and the next three slides, use slideInRight , which is one of WebSlides’ built-in CSS animations:

Do a similar thing here:

This slide also uses a similar structure:

Here, divide the content into left and right again. In the second <p> tag, use the inline style attribute to adjust the font-size and line-height properties. Doing so will override the text-intro class styles that get applied to the element by default. On the right side, use <div class="wrap size-80"> to create a container for the SVG code example:

Here, leverage some of the classes you’ve already used to illustrate browser support for SVG:

In this slide, show some of the use cases for SVG in the form of an image gallery. To this end, use an unordered list with the flexblock and gallery classes. Each item in the gallery is marked up with a li tag:

This section shows a typical SVG workflow, so you need to use the flexblock and steps classes, which show the content as a sequence of steps. Again, each step is placed inside a li tag:

For each step after the first one, you need to add the process-step-# class. This adds a triangle pointing to the next step.

In the last slide, use another one of WebSlides’ built-in CSS animations, i.e., zoomIn :

Congratulations! You’re done. You can see the final outcome here:

See the Pen HTML and CSS Presentation Demo with WebSlides by SitePoint ( @SitePoint ) on CodePen .

Et voilà! You have just created a beautiful, fully functional and responsive web presentation. But this is just the tip of the iceberg, there’s a lot more you can quickly create with WebSlides and many other WebSlides features which I didn’t cover in this short tutorial.

To learn more, explore the WebSlides Components and CSS architecture documentation , or start customizing the demos already available to you in the downloadable folder.

Then, focus on your content and let WebSlides do its job.

Frequently Asked Questions (FAQs) about Creating Beautiful HTML & CSS Presentations with WebSlides

How can i customize the design of my webslides presentation.

WebSlides allows you to customize your presentation to suit your style and needs. You can change the color scheme, fonts, and layout by modifying the CSS file. If you’re familiar with CSS, you can easily tweak the styles to create a unique look. If you’re not, there are plenty of online resources and tutorials that can help you learn. Remember, the key to a great presentation is not only the content but also the design. A well-designed presentation can help keep your audience engaged and make your content more memorable.

Can I add multimedia elements to my WebSlides presentation?

How can i share my webslides presentation with others.

Once you’ve created your WebSlides presentation, you can share it with others by hosting it on a web server. You can use a free hosting service like GitHub Pages, or you can use your own web server if you have one. Once your presentation is hosted, you can share the URL with anyone you want to view your presentation. They’ll be able to view your presentation in their web browser without needing to install any special software.

Can I use WebSlides for commercial projects?

Yes, WebSlides is free to use for both personal and commercial projects. You can use it to create presentations for your business, for your clients, or for any other commercial purpose. However, please note that while WebSlides itself is free, some of the images and fonts used in the templates may be subject to copyright and may require a license for commercial use.

How can I add interactive elements to my WebSlides presentation?

You can add interactive elements to your WebSlides presentation by using JavaScript. For example, you can add buttons that the user can click to navigate to different slides, or you can add forms that the user can fill out. This can be done by adding the appropriate HTML and JavaScript code to your slides. If you’re not familiar with JavaScript, there are plenty of online resources and tutorials that can help you learn.

Can I use WebSlides offline?

Yes, you can use WebSlides offline. Once you’ve downloaded the WebSlides files, you can create and view your presentations offline. However, please note that some features may not work offline, such as loading external images or fonts. To ensure that all features work correctly, it’s recommended to host your presentation on a web server.

How can I add transitions and animations to my WebSlides presentation?

You can add transitions and animations to your WebSlides presentation by using CSS. CSS allows you to control the appearance and behavior of elements on your slides, including transitions and animations. For example, you can use the transition property to animate the change of a property from one value to another, or you can use the animation property to create more complex animations.

Can I use WebSlides on mobile devices?

Yes, WebSlides is designed to be responsive and works well on both desktop and mobile devices. However, please note that due to the smaller screen size, some elements may not display as intended on mobile devices. It’s recommended to test your presentation on different devices to ensure that it looks and works well on all platforms.

How can I add navigation controls to my WebSlides presentation?

You can add navigation controls to your WebSlides presentation by using the built-in navigation options. You can add arrows to navigate between slides, or you can add a slide counter to show the current slide number and the total number of slides. This can be done by adding the appropriate HTML and CSS code to your slides.

Can I use WebSlides with other web development tools?

Yes, you can use WebSlides with other web development tools. For example, you can use it with a text editor to write your HTML and CSS code, or you can use it with a version control system like Git to manage your project files. You can also use it with a build tool like Gulp or Grunt to automate tasks like minifying your code or compiling your CSS.

I am a web developer/designer from Bulgaria. My favorite web technologies include SVG, HTML, CSS, Tailwind, JavaScript, Node, Vue, and React. When I'm not programming the Web, I love to program my own reality ;)

Create beautiful stories

WebSlides makes HTML presentations easy. Just the essentials and using lovely CSS.

WebSlides 1.5.0 Github

Why WebSlides?

Good karma & Productivity.

An opportunity to engage.

WebSlides is about good karma. This is about telling the story, and sharing it in a beautiful way. HTML and CSS as narrative elements.

Work better, faster.

Designers, marketers, and journalists can now focus on the content. Simply choose a demo and customize it in minutes.

WebSlides is really easy

Each parent <section> in the #webslides element is an individual slide.

Code is clean and scalable. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Making an HTML presentation has never been so fast .

→ Simple Navigation

Slide counter, 40 + beautiful components, vertical rhythm, 500 + svg icons, webslides demos.

Contribute on Github . View all ›

If you need help, here's just some tutorials. Just a basic knowledge of HTML is required:

• Components · Classes .
• WebSlides on Codepen .
• WebSlides Media: images, videos...

Built to expand

The best way to inspire with your content is to connect on a personal level:

• Background images: Unsplash .
• CSS animations: Animate.css .
• Longforms: Animate on scroll .

Ready to Start?

Create your own stories instantly. 120+ premium slides ready to use.

Free Download Pay what you want.

People share content that makes them feel inspired. WebSlides is a very effective way to engage young audiences, customers, and teams.

@jlantunez , @ant_laguna , and @luissacristan .

How to Embed HTML in Google Slides? [Complete Guide!]

By: Author Shrot Katewa

HTML is a great way of including “more information” into your presentations which can open up a whole new world of possibilities to present an interactive presentations. Although Google has not introduced a feature to embed HTML in Google Slides yet, we can use “insert” option to embed Objects like URLs, images, videos etc. easily.

If you want to display some information outside your presentation and also want to keep the flow at the same time, there are two ways to add links of web pages in Google Slides.

Either you select the text and choose “Link” from the “Right-click” menu or select “Link” from the dropdown menu of “Insert” tab. It will open a dialog box where you can paste the link of your website, padlet, Instagram post etc. and click “apply” to embed the link into the slide.

In this article, we will also teach you how to embed a Google Slide on a website. So, let’s start out this complete guide:

1. How to Embed HTML in Google Slides?

Google Slides does not have any feature to embed HTML in a presentation slide. Unfortunately, you cannot embed HTML in a Google Slides presentation.

However, using the “Insert” menu in the menu bar, you can insert embedded objects like images, audio, videos, etc. To learn more about inserting embedded media into a Google Slides presentation, you can read my article here .

2. How to Embed a Website in Google Slides?

In Google Slides, you cannot embed a website into a slide. However, you can add the link of a website to the text in a slide. All you have to do is follow 2 easy steps.

Step-1: Click on the “Link” option

The first step is to select the text where you want to link the website. Then “Right Click” on the text. In the right-click menu, click on the “Link” option. Alternatively, you can press the “Ctrl+K” keys on your keyboard.

Step-2: Click on the “Apply” option

In the pop-up dialog under the selected text, click on the “Search or paste a link” box. You can now paste the website link that you want to embed. Then click on the “Apply” option to hyperlink the text.

3. How to Embed iframes in Google Slides?

You cannot embed iframes in Google Slides. Since there is no feature for HTML codes, the application cannot embed iframes. However, you can copy the iframe code for the Google Slides presentation to embed it into websites. Refer to section 6 for detailed steps on obtaining the iframe code for a Google Slides presentation.

4. How to Embed Padlet in Google Slides?

To embed your Padlet wall in Google Slides, you have to first copy the link from Padlet. Since Google Slides does not have any feature that allows you to embed a code, you have to add Padlet as a link. To do so, follow the 3 quick steps.

Step-1: Click on the “Insert” tab

The first step is to select the text or image where you want to link the Padlet wall. Then click on the “Insert” tab in the menu bar located at the top of the screen.

Step-2: Click on the “Link” option

In the dropdown menu under the “Insert” tab, click on the “Link” option. You can alternatively press the “Ctrl+K” keys on your keyboard.

Step-3: Paste the Padlet link

In the pop-up dialog box, you can now paste the Padlet link. Finally, all you have to do is click on the “Apply” button to add the Padlet link to the selected text or image.

5. How to Embed Instagram Post in Google Slides?

In Google Slides, you cannot embed an Instagram post using the embed link available on Instagram. However, you can insert the picture and link it to the Instagram post. All you have to do is follow the 5 simple steps.

Step-1: Click on the “Insert” menu

The first step is to insert the Instagram image into the presentation slide. To do so, you have to click on the “Insert” menu in the menu bar located at the top of the screen.

Step-2: Click on the “Image” option

In the “Insert” dropdown menu, click on the “Image” option. In the pop-up menu by the “Image” option in the “Insert” menu, click on the “Drive” or “Photos” option.

Since you cannot insert the image directly using the Instagram link, you must first upload the Instagram picture to Google Drive or Google Photos.

Step-3: Click on the “Insert” option

In the “Google Drive” sidebar on the right side of the screen, click on the Instagram image. Then click on the “Insert” option at the bottom of the sidebar to insert the image into the slide.

Step-4: Click on the “Insert link” option

The next step is to click on the Instagram picture inserted into the slide to select it. Then click on the “Insert link” option in the toolbar located under the menu bar at the top of the screen.

Alternatively, you can press the “Ctrl+K” keys on your keyboard.

Step-5: Paste the Instagram link

In the pop-up dialog under the picture, you can now paste the link to the Instagram post in the “Search or paste a link” box. Then all you have to do is click on the “Apply” button next to the box to embed the Instagram post to the picture in the presentation.

6. How to Embed a Google Slides on a Website?

Google Slides offers the “Publish to the web” feature that gives you the embed code that you can copy and paste to a website to embed the presentation. To embed the Google Slides presentation to a website, follow the 5 quick steps.

Sep-1: Click on the “File” menu

In the menu bar located at the top of the screen, click on the “File” menu. It is the first tab in the menu bar.

Step-2: Click on the “Publish to the web” option

The next step is to scroll down in the dropdown menu under the “File” tab. Click on the “Publish to the web” option in the “File” menu. This will open the “Publish to the web” dialog box.

Step-3: Click on the “Embed” option

In the “Publish to the web” dialog box, click on the “Embed” option. Then you can customize autoplay options for the embedded presentation.

Step-4: Click on the “Publish” button

The next step is to click on the “Publish” button at the bottom of the “Publish to the web” dialog box. This will prompt a pop-up dialog box. Click on the “OK” button in the pop-up dialog.

Step-5: Copy the embed link

You can now see the embed code for the presentation in the “Publish to the web” dialog box. All you have to do is copy the code and paste it into the website where you want to embed the presentation. To copy the code, press the “Ctrl+C” keys on your keyboard.

Powerpoint Assist

Tips for Powerpoint by Regina Griffin

How To Embed HTML In PowerPoint

Enhance your PowerPoint presentations with interactive content by embedding HTML code into your slides.

In this article, we break down the basics of HTML, explore the benefits of how to embed HTML In PowerPoint and provide step-by-step instructions on how to do it.

Discover some tips, tricks, and common mistakes to avoid when incorporating HTML into your presentations. Learn how to take your slides to the next level with insights from Regina Griffin, a teacher from Oregon, US.

Key Takeaways:

• HTML is a markup language used to create and design web pages, and it can also be embedded in PowerPoint presentations.
• Embedding HTML in PowerPoint allows for interactive and dynamic content, enhancing the overall presentation experience for the audience.
• Follow best practices, such as using external CSS files and testing the HTML code before insertion, to ensure a smooth and error-free embedding process.

What is HTML?

HTML , which stands for Hypertext Markup Language, is the standard language used to create and design web pages on the internet.

HTML plays a crucial role in web development by providing the basic structure for web pages. It uses markup tags to define elements such as headings, paragraphs, links, images, and more, enabling the browser to interpret and display the content correctly.

For example, using HTML tags like <h1> for headings and <p> for paragraphs helps organize content hierarchically. Attributes within these tags provide further instructions, such as specifying image sources with src in the <img> tag.

Understanding the Basics of HTML

Understanding the basics of HTML involves learning how to create elements such as headings, paragraphs, and lists, and how to style them using CSS.

HTML, the backbone of web development, relies on various components like tags , which enclose different types of content, attributes that provide additional information to the elements, and elements , consisting of a start tag, content, and an end tag.

When these HTML elements are in place, CSS comes into play, enhancing the visual appeal with styles such as colors, fonts, and layouts. Incorporating CSS allows developers to achieve a polished and professional look on a website.

Why Embed HTML in PowerPoint?

Embedding HTML in PowerPoint presentations can enhance interactivity, visual appeal, and information sharing, creating dynamic and engaging content for viewers.

By incorporating HTML elements into your PowerPoint slides, you can add interactive features such as clickable buttons, image sliders, or embedded forms, allowing viewers to actively engage with the content. This not only captivates the audience but also enhances information retention and understanding.

Integrating HTML content enables seamless data presentation, making complex information more digestible through visually appealing charts, graphs, and tables. The incorporation of HTML also paves the way for multimedia integration, allowing you to seamlessly insert videos, audio clips, and interactive animations to enrich your presentations.

Benefits of Embedding HTML in PowerPoint

The benefits of embedding HTML in PowerPoint presentations include enriched multimedia content, interactive features, and seamless integration of web-based information within slides.

By incorporating HTML elements into your PowerPoint slides, you open up a whole new realm of possibilities. Not only can you enhance the visual appeal of your presentations with dynamic multimedia content like videos and animations, but you can also introduce interactive elements such as clickable buttons and hyperlinks.

The use of HTML allows for the easy integration of web-based information directly into your slides, making it effortless to showcase live websites, online surveys, and real-time data feeds. This dynamic approach keeps your audience engaged and ensures that your content remains up-to-date and relevant.

How to Embed HTML in PowerPoint?

To embed HTML in PowerPoint, you can use tools like PDFelement for Mac, which allows seamless integration of web content into your presentations.

First, open the PowerPoint presentation where you want to insert the HTML content. Next, navigate to the slide where you want to embed the HTML. Then, go to the ‘Insert’ tab in PowerPoint and select ‘Object’ from the dropdown menu. By choosing ‘Create from File’, you can then locate the HTML file on your computer and insert it into the slide.

After inserting the HTML, you may need to adjust the object properties to ensure it displays correctly. This includes resizing the object, positioning it on the slide, and testing how it interacts with other elements in your presentation.

To guarantee compatibility, make sure to save your PowerPoint presentation in a format that supports HTML embedding. Saving it as a PDF can help maintain the integrity of the embedded HTML content across different devices and platforms.

Step 1: Create a New PowerPoint Slide

The first step to embed HTML in PowerPoint is to create a new slide where you want to insert the web object.

Once you have your PowerPoint presentation open, navigate to the top menu and click on the ‘Insert’ tab. From the options that appear, select ‘New Slide’ to add a blank slide to your presentation.

• Now, choose the appropriate slide layout based on how you want to showcase your HTML content. Opt for a layout that provides enough space and arrangement for the web object you plan to insert.
• Before proceeding with the insertion of the HTML content, ensure that you have all the necessary code or content prepared and saved in a format that can be easily inserted into PowerPoint.

Step 2: Insert a Web Object

After creating the slide, the next step is to insert a web object where the HTML content will be embedded.

When inserting a web object, navigate to the ‘Insert’ tab on the PowerPoint ribbon. Click on ‘Web Object’ from the ‘Text’ group.

You will then be prompted to enter the URL of the HTML content you wish to embed. After adding the URL, choose whether you want to display the content as an icon, a clickable object, or in full view.

Adjust the properties of the web object by right-clicking on it and selecting ‘Properties’. Here, you can tweak settings such as size, position, and how the content interacts with the slide.

Step 3: Copy and Paste the HTML Code

Once the web object is inserted, you can copy the HTML code from your source and paste it into the designated area within PowerPoint.

To ensure seamless integration, make sure the HTML code you are copying is clean and free from any errors.

Open your source code editor and locate the section you want to add. Highlight the code, right-click, and select ‘Copy.’

Head back to your PowerPoint slide, right-click in the designated area, and choose ‘Paste.’

Ensure the formatting looks correct by previewing the slide slideshow. Adjust any sizing or alignment if needed.

This method guarantees your HTML content is properly displayed within your PowerPoint presentation.

Step 4: Adjust the Size and Position of the Web Object

To finalize the embedding process, adjust the size and position of the web object containing the HTML content to ensure proper display within the slide layout.

When resizing the HTML content within your PowerPoint slide, keep in mind that maintaining the aspect ratio can prevent distortion. It’s important to strike a balance between a size that is easily viewable and one that doesn’t overpower other elements on the slide.

Consider the visual hierarchy of your content. Placing the web object strategically can enhance the flow of information and guide the viewer’s focus. Remember to align it with other elements on the slide for a polished look.

In terms of responsive design, test how the HTML web object adjusts across different devices and screen sizes. Ensuring that it remains intact and readable on various platforms is crucial for an optimal user experience.

Tips and Tricks for Embedding HTML in PowerPoint

When embedding HTML in PowerPoint, consider using external CSS files for consistent formatting and styling across slides, enhancing the visual appeal and professional presentation of content.

Another important tip for embedding HTML in PowerPoint is to thoroughly test your HTML code beforehand to ensure it displays correctly and functions as intended within the presentation. This can help you identify any potential issues or errors before showcasing your content to an audience.

When incorporating HTML into your slides, it is crucial to source your code from reliable and trusted sources. This not only ensures the integrity and security of your presentation but also helps in maintaining a seamless user experience for your viewers.

Use External CSS Files for Better Formatting

External CSS files can streamline the formatting process when embedding HTML in PowerPoint, ensuring consistent styling and presentation across slides.

By utilizing external CSS files, users can separate the formatting instructions from the HTML content, allowing for easier management and updates. This separation of concerns makes styling adjustments a breeze, as modifications made to the CSS file automatically reflect across all PowerPoint slides.

The use of external CSS promotes visual consistency, ensuring that fonts, colors, and layouts remain uniform throughout the presentation. This not only enhances the overall aesthetic appeal but also saves time by eliminating the need to manually adjust each slide individually.

Test the HTML Code before Inserting it into PowerPoint

Ahead of inserting HTML code into PowerPoint, it is essential to test the code on a web browser to ensure proper functionality and appearance.

Testing HTML code before integrating it into PowerPoint slides serves as a critical step in the process. One must verify that the code behaves as expected and maintains its integrity across different browsers and screen sizes. This testing phase helps in identifying any potential issues related to compatibility and responsiveness, ensuring a seamless visual experience for viewers. By conducting thorough testing, you can rectify any errors or inconsistencies before incorporating the code into your presentation, thus saving time and avoiding surprises during the actual presentation.

Use HTML Code from a Reliable Source

When embedding HTML content in PowerPoint, always use code from trustworthy and verified sources to avoid compatibility issues and security risks.

Thus, it is essential to emphasize the importance of sourcing HTML code from well-established websites and reputable repositories. Remember that utilizing code from unverified sources may expose your presentation to vulnerabilities such as malicious scripts or phishing attempts. By ensuring the authenticity of the code, you not only safeguard your content but also mitigate potential risks of data breaches or unauthorized access to sensitive information. Verify that the HTML code complies with security standards and best practices to maintain a secure environment for your PowerPoint presentations.

Common Mistakes to Avoid

When embedding HTML in PowerPoint, common mistakes to avoid include using complex HTML code, neglecting compatibility checks with different PowerPoint versions, and skipping presentation testing before the actual event.

One of the key errors often seen in HTML embedding in PowerPoint is the inclusion of overly intricate code, which can lead to formatting issues or even malfunctioning elements during the presentation. It’s crucial to remember that varying versions of PowerPoint may interpret HTML components differently, making it essential to thoroughly check for compatibility to ensure a seamless viewing experience for all attendees. Failing to conduct comprehensive presentation testing in advance might result in unexpected glitches or rendering problems, jeopardizing the effectiveness of your message delivery.

Using Complex HTML Code

Avoid using overly complex HTML code in PowerPoint presentations , as it can lead to rendering issues, performance lags, and compatibility challenges across different platforms.

When creating PowerPoint slides, simpler HTML coding is essential for ensuring that your presentation looks consistent and functions properly on various devices and operating systems. Complex HTML structures may not translate well, causing elements to appear distorted or even break altogether.

By focusing on simplicity and efficiency in your HTML coding, you are not only enhancing the visual appeal of your slides but also ensuring a seamless viewing experience for your audience. This approach also improves the chances of your content being accessible and engaging on a wide range of platforms, ultimately boosting cross-platform compatibility.

Not Checking Compatibility with PowerPoint Versions

Ensure compatibility with various PowerPoint versions by testing HTML content across different software iterations to avoid formatting discrepancies and functionality issues.

Verifying the compatibility of your HTML content with different versions of PowerPoint is crucial to guarantee a seamless viewing experience for all users. Running cross-version tests helps identify potential discrepancies in formatting or functionality that may arise when the content is opened in older or newer PowerPoint iterations. Testing systematically across multiple versions allows you to address any issues proactively, ensuring that your presentation looks and operates as intended regardless of the software version being used.

Not Testing the Presentation Before the Actual Presentation

Before delivering a presentation, always conduct thorough testing to ensure that embedded HTML elements function correctly, display as intended, and maintain visual integrity.

Start by reviewing each slide containing embedded HTML content to check for formatting consistency and link functionality. Verify that the HTML code is error-free and compatible with the version of PowerPoint being used.

• Inspect the slides across different devices to assess the responsive design and ensure seamless rendering.
• Test interactive elements, such as buttons or forms, to confirm user interaction responsiveness.
• Conduct accessibility testing to guarantee compliance with web content accessibility guidelines .

A comprehensive pre-presentation testing process helps prevent technical glitches and enhances the overall user experience during the presentation.

Frequently Asked Questions

1. how to embed html in powerpoint.

Embedding HTML in PowerPoint is a simple process that allows you to enhance your presentation with interactive elements and dynamic content. Follow these steps to embed HTML in PowerPoint:

1. Open your PowerPoint presentation and navigate to the slide where you want to insert the HTML. 2. Click on the “Insert” tab and select “Object” from the toolbar. 3. In the “Object” window, switch to the “Create from File” tab and click on “Browse” to select the HTML file you want to embed. 4. Check the “Link” box if you want the content to be linked to the original file. 5. Click “OK” to insert the HTML in your PowerPoint slide.

2. Can I edit the embedded HTML in PowerPoint?

Yes, you can edit the embedded HTML in PowerPoint. Once the HTML is inserted, you can double-click on it to open the editing window. Make the necessary changes and click “Save” to update the embedded content in your presentation.

3. How do I resize the embedded HTML in PowerPoint?

To resize the embedded HTML in PowerPoint, click on it to select it, and then click on the corners and drag to adjust the size. You can also use the “Format” tab to specify the exact height and width of the embedded object.

4. Can I embed external HTML in my PowerPoint presentation?

Yes, you can embed external HTML in your PowerPoint presentation. Simply follow the same steps as embedding a local HTML file, but instead of browsing for the file on your computer, paste the link to the external HTML in the “File name” field.

5. How can I test the embedded HTML in my PowerPoint presentation?

To test the embedded HTML in your PowerPoint presentation, click on the “Slide Show” tab and select “From Beginning” or “From Current Slide” to view your presentation in full-screen mode. Interact with the embedded HTML to make sure it functions as intended.

6. Is it possible to embed multiple HTML files in one PowerPoint slide?

Yes, it is possible to embed multiple HTML files in one PowerPoint slide. Simply repeat the steps for embedding HTML and add each file on a separate slide. You can then use the “Transitions” tab to set the timings for each slide to create a seamless presentation of your embedded HTML elements.

Similar Posts

How to insert hyperlink in powerpoint.

Have you ever wondered what a hyperlink is and how it can enhance your PowerPoint presentations? We will explore the ins and outs of hyperlinks in PowerPoint, how they work, why they are beneficial, and how to insert them into your slides. Whether you want to create easy navigation, interactive presentations, or a professional look,…

How To Add Audio To All Slides In PowerPoint

Do you want to take your PowerPoint presentations to the next level? Adding audio can enhance audience engagement, add variety to your presentation, and make complex concepts easier to understand. In this step-by-step guide by teacher Regina Griffin from Oregon, US, you will learn how to seamlessly Add Audio To All Slides of your PowerPoint…

How To Underline In PowerPoint

Looking to enhance the impact of your PowerPoint presentations? Underlining text can be a simple yet effective way to emphasize key points and improve readability. We’ll explore why underlining is important in PowerPoint presentations and how you can easily underline text using different methods like the underline button, font dialog box, and keyboard shortcuts. We’ll…

How To Make Animation Disappear After Appearing In PowerPoint

Are you looking to enhance your PowerPoint presentations with eye-catching animations? In this tutorial by Oregon-based teacher Regina Griffin, explore the benefits of using animation in PowerPoint and learn how to add animations to your slides. Learn how to Make Animation Disappear After Appearing and get some helpful tips for using animation effectively. Let’s dive…

How To Save Video In PowerPoint

Are you looking to take your PowerPoint presentations to the next level? Adding videos can enhance the quality of your slides, allow for offline playback, and increase accessibility for your audience. This step-by-step guide by teacher Regina Griffin from Oregon, US, will show you how to save videos in PowerPoint. From inserting a video and…

How To Full Screen In PowerPoint

Want to make a lasting impact with your PowerPoint presentations? Engage your audience by utilizing the full-screen mode. In this tutorial by Regina Griffin, a teacher from Oregon, US, we will explore what full screen mode is, how it enhances presentations, and the simple steps to enter and exit full-screen mode. Discover keyboard shortcuts and…

• For Business

How to embed PowerPoint presentation in HTML?

Have you ever needed to add a slideshow to your website or blog without inserting it just as an image? In this article, we’ll show several ways on how to embed PowerPoint in HTML. Read on and select a suitable option.

Why embed a PowerPoint in HTML?

Embedding a PowerPoint presentation into HTML pages offers a convenient way to showcase, distribute and share your slides on the web.

By integrating a presentation into your site or application, you provide a more interactive and engaging experience for users since they are able to access the slideshow online and don’t need to have PowerPoint software installed on their computers or mobile devices.

Additionally, if you embed PowerPoint in HTML iframe, you can customize the appearance and functionality of the presentation, such as adding navigation controls or interactive elements.

1. Embed PPTX in HTML via ONLYOFFICE Workspace

In ONLYOFFICE Workspace , a productivity platform for managing your files, emails, projects, etc., there is an option to generate an embedding code for any file, including presentations.

• Go to the Documents module and click Share next to the required PPTX file.
• Click Add link -> Save.
• In the drop-down menu, select Embedding settings .
• If needed, adjust the settings such as width and height.
• Copy the embedding code and insert it to your HTML page.

Alternatively, you are able to do the same actions right from the opened presentation editor via the Collaboration tab.

GET ONLYOFFICE WORKSPACE

2. How to embed PowerPoint into HTML on your WordPress or Drupal site

The ONLYOFFICE Docs suite is seamlessly integrated with popular and widely-used CMS platforms like WordPress and Drupal . This way, you can easily insert presentations into your WordPress or Drupal website.

For example, when creating a new WordPress post, you can add the ONLYOFFICE block and then upload a new file or select one from the Media Library.

The added PPTX will be displayed as the ONLYOFFICE logo with the file name in the currently edited post. After the post is published, your WordPress site visitors will have access to this file for viewing in the Embedded mode.

GET ONLYOFFICE DOCS

Check our tutorials to learn more about ONLYOFFICE integration with WordPress and Drupal .

3. Embedding options for developers

For developers and integrators, a further option to embed a PowerPoint in HTML is provided via ONLYOFFICE DocSpace .

It is a room-based collaborative environment which empowers you with an extensive array of customization options, enabling you to enhance the functionality of your web applications and tailor them precisely to your requirements.

CREATE FREE ACCOUNT

So, you can seamlessly integrate specific DocSpace rooms with the needed slides into your web application.

Check the detailed guide

If you are an experienced user, you can also embed PowerPoint in HTML iframe using the basic concepts of the open API as well as a tutorial for inline editors .

ONLYOFFICE DOCS FOR DEVELOPERS

Useful links

ONLYOFFICE Presentation Editor

ONLYOFFICE Workspace

ONLYOFFICE DocSpace

ONLYOFFICE for developers

Integrations with popular services & platforms

Recent posts

How to edit .md files in ONLYOFFICE

ONLYOFFICE DocSpace turns 1: a retrospective report

ONLYOFFICE connector v7.0 for Alfresco is released with PDF filling, advanced security options and much more

How to Add HTML Embed Codes to Your Website [Quick Tip]

Published: April 03, 2024

If you want to curate others' content from social media or just make your own visual social media content work harder for your overall content strategy, you need to know how to embed HTML code onto your blog or website.

But wait a second ... before we get into the nitty-gritty of this tip, what the heck does "embed" mean? And what is HTML? If you don't know how to code at all, no worries — embedding external content is extremely easy. Let's take a second to break down the basics.

What does embed mean?

Embed means to integrate external content into another website or page. You embed something when you place a block of code — called an embed code — into the HTML editor of another website. When you hit ‘Save’ or ‘Publish,’ the media then renders on the published page.

Embedded content is referenced with HTML . HTML is one of the most basic languages used on the web to design and lay out web pages.

You often see this code when you're in the "back end" of your blog post. There’s where you’ll add your embed code.

What is an embed code?

An embed code is a block of HTML that is placed in another page and renders a visual element — a video, social media post, form, or page — from another website or source. You can embed YouTube videos, Twitter posts, GIFs, and other multimedia objects on another website.

Most social and multimedia websites have an option to generate an embed code right in each individual post. Here’s an example of an embed code for a HubSpot YouTube video:

And here’s the embedded result.

Want to do the same thing on your blog posts and pages? Let’s go over how you can generate an embed code for the top social sites.

How to Add HTML Embed Code to Your Site

• Go to the social post or webpage you’d like to embed.
• Generate the embed code using the post’s options.
• If applicable, customize the embed post, such as the height and width of the element.
• Highlight the embed code, then copy it to your clipboard.
• In your content management system, open up your HTML viewer.
• Paste the HTML snippet you just copied into your HTML viewer window. Then click 'OK' or 'Save.'
• Finished! You have now embedded content onto your website or blog.

Below, we cover these steps in more detail for each platform. In general, you’ll want to:

• Generate the embed code.
• Access your content management system and paste the embed code in your HTML viewer.
• Finished! You have embedded content into your website or blog.

Let’s dive into each step.

50 Free Coding Templates

Free code snippet templates for HTML, CSS, and JavaScript -- Plus access to GitHub.

• Navigation Menus & Breadcrumbs Templates
• Button Transition Templates
• CSS Effects Templates

You're all set!

Click this link to access this resource at any time.

Free HTML Coding Templates

Fill out the form to get the free code snippets., 1. generate the embed code..

Before embedding external content, you must first generate an embed code for the post or page you want to embed on your website.

We’ll go over how you can do that on most of the major social and content networks.

Embed a Facebook Post

To embed a Facebook post, do the following:

• Navigate to Facebook on your desktop browser and go to the post that you’d like to embed.
• Click on the three dots on the upper right-hand corner of the post.
• On the drop-down menu, click Embed .

• A pop-up will appear, where you have the option to include the full post and access advanced settings. For beginners, we recommend leaving the options as they are and simply clicking Copy Code .

• Finished! You’ve got your embed code.

Embed an Instagram Post

Want to embed an Instagram post? The process is similar to Facebook’s. Note that you can only embed posts from the desktop version and not the mobile app.

• Click the three dots in the upper right-hand corner of the post.
• A popup will come up with several options. Click Embed , the second-to-last option.

• A pop-up will come up with your embed code. You have the option of including or excluding the caption.
• After you’ve finished customizing your options, click Copy Embed Code .

• Complete! You’ve got your Instagram embed code.

Embed a YouTube Video

YouTube videos can take your blog posts to the next level, and the best part is that you can embed its wealth of content on your blog posts for free.

To do so, take the following steps:

• Navigate to the video that you’d like to embed on your website.
• Under the video, next to where the likes are located, click Share .

• A pop-up will come up with several options, including sharing the post to other social networks. Click Embed .

• YouTube will create an embed code, which you can customize. You can start the video at a certain point or hide the player controls.
• After choosing your options, click Copy on the lower right-hand corner of the pop-up.

• Complete! Your YouTube video is ready to get embedded.

Embed a Tweet

If you embed a Tweet on your website pages or blog, you can generate engagement for your Twitter profile without relying on your Twitter followers. Website visitors can engage with your Twitter content, too.

To embed a Twitter post, do the following:

• On a desktop browser, navigate to the post that you’d like to embed.
• A drop-down menu will appear. Click Embed Tweet .

• Twitter will take you to an external page on publish.twitter.com , where you can then further customize the look of the Tweet before embedding it on your site. For instance, you can set it to dark mode and change the display language of the Tweet.

• Once you’ve customized it, click Update.
• Click Copy Code.
• Finished! The Tweet is ready to embed on your site.

There’s another way to generate an embed code for Twitter. Go to publish.twitter.com and insert the URL of the post that you’d like to embed. Twitter will then generate the embed code, and you can customize it using the same process as the last method.

Embed a Pinterest Post

Embedding a Pinterest post can lead website users back to your Pinterest profile and help you grow your Pinterest following. To get started, do the following:

• Navigate to the Pinterest post you’d like to embed.
• Click on the three dots right next to the image (or under the image, if you’re using the mobile website).
• On the drop-down menu, click Get Pin embed code .

• A pop-up will appear with the embed code. You have the option of creating a small, medium, large, or extra-large embedded pin.

• Once you customize the size, highlight the code and click Command + C or CTRL + C .
• Finished! Your Pin is ready to get embedded.

Embed a SlideShare Presentation

While SlideShare presentations are not as popular these days, they can still be a handy multimedia tool for spicing up blog posts and pages. Here’s how to embed a SlideShare presentation:

• Go to the SlideShare presentation you’d like to embed.
• Click Share under the presentation.
• In the same window where the presentation appears, you’ll see the option to share it via social channels. The embed code will be underneath that.

• Choose the size of the embed window and which slide you’d like the presentation to start on.
• Highlight the embed code and click Command + C or CTRL + C .
• Ready! You can now embed the SlideShare presentation in a web page or post.

Embed an External Webpage

Don’t want to embed a social post but rather a web page? You can embed an external web page using the iframe HTML tag .

All embed codes, including the ones for social sites, use iframe tags. This is what they look like:

You can use these same tags to embed an external webpage. Here’s how:

• Navigate to the webpage you’d like to embed into your site.
• Open up the notepad app on your computer. Paste the following code into it:
• Return to the webpage and copy the URL.
• Paste the entire URL where it says url in your iframe code. Don’t forget to include https:// at the beginning of your URL and to place the link inside the quote marks. Here’s what your code should look like:
• Change the width and height of the frame if desired.
• Copy the entire line of code. After, the webpage is ready to get embedded on your website.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

2. Access your content management system and paste the embed code in your HTML viewer.

Although every CMS is different, you can probably find the HTML viewer with similar steps. We’ll go over how you can do it in Content Hub and WordPress .

Content Hub

In Content Hub, you actually don’t need to add your embed content using the HTML editor (although you have the option to). Here’s how:

• In your HubSpot dashboard, navigate to Marketing > Website > Blog . If you’re planning to add the code to a website page, navigate to Marketing > Website > Website Pages.

• Find the post or page that you’d like to add the embed code to. Hover over it, then click Edit .

• Click into the module where you’d like to add the embed code. An options bar will appear near the top of the screen. In the right-hand side, click Insert .
• Choose Embed from the drop-down menu.

• A pop-up will appear. Paste the iframe code into the text bar.

• Click Insert .
• Finished! You can edit the width and height of the embed content to customize it further.

To access the HTML editor, complete steps 1-3 above. On the top options bar, click Advanced > Source Code . You can then paste your embed code manually. Note that the end result is the same.

To paste an embed code into your WordPress website, use the following steps:

• Access your admin area and go to either Pages or Posts .
• Click the title of the post that you want to add the embed code to. This action will take you to the post editor.
• Click the Text tab on the upper right-hand corner of the text editor.

• Paste your embed code where you want the module to appear.

3. Finished! You have embedded content onto your website or blog.

Once you reload the page, your embedded social post will appear.

Add Embedded Content to Increase User Engagement

By embedding external content on your pages and posts, you can increase engagement on your website and get your site visitors to interact with the content you post on social media. The best part is that it’s easy to do — simply generate the embed code, paste it into your HTML editor, and watch your user engagement grow.

Editor's note: This post was originally published in September 2013 and has been updated for comprehensiveness.

Don't forget to share this post!

Related articles.

The 11 Best Content Management Software Tools in 2024

7 Best Free Website Builders to Check Out in 2024 [+Pros & Cons]

Does My Business Need a Website? 12 Reasons Why & 5 Reasons Why Not

12 of the Best Programming Languages to Learn in 2022

The 7 Best Leadpages Alternatives in 2022

Coding for Web Design 101: How HTML, CSS, and JavaScript Work

The 12 Best ClickFunnels Alternatives & Competitors in 2023

How to Hire a Freelance Web Developer

Do I Still Need a .com TLD For My Business?

7 of the Best Website Builders for 2020

Dozens of free coding templates you can start using right now

Marketing software that helps you drive revenue, save time and resources, and measure and optimize your investments — all on one easy-to-use platform

• PowerPoint Themes
• Latest PowerPoint Templates
• Best PowerPoint Templates
• Free PowerPoint Templates
• Simple PowerPoint Templates
• PowerPoint Backgrounds
• Project Charter
• Project Timeline
• Project Team
• Project Status
• Market Analysis
• Marketing Funnel
• Market Segmentation
• Target Customer
• Marketing Mix
• Digital Marketing Strategy
• Resource Planning
• Recruitment
• Employee Onboarding
• Company Profile
• Mission Vision
• Meet The Team
• Problem & Solution
• Business Model
• Business Case
• Business Strategy
• Business Review
• Leadership Team
• Balance Sheet
• Income Statement
• Cash Flow Statement
• Executive Summary
• 30 60 90 Day Plan
• SWOT Analysis
• Flow Charts
• Gantt Charts
• Text Tables
• Infographics
• Google Slides Templates
• Presentation Services
• Ask Us To Make Slides
• Data Visualization Services
• Business Presentation Tips
• PowerPoint Tutorials
• Google Slides Tutorials
• Presentation Resources

How To Embed PowerPoint In HTML/Website?

Ever wonder how to post a PowerPoint presentation to your website or blog without just posting an image of it? Embedding PowerPoint presentations in an HTML website can do this. You can share your beautifully designed PowerPoint presentations on your webpage, attracting many people and increasing traffic.

You can present dynamic material and attract users by integrating interactive slideshows right into web pages. Embedding PowerPoint in the website enables users to access the content without the requirement of additional software and makes them extensively utilized for business, education, and various other uses.

Let us check out how to embed PowerPoint in HTML or a website.

How to Embed PowerPoint in HTML/Website?

Using the following two methods, you can embed PowerPoint on a website or HTML. Both of these methods are compatible with Windows, Mac, and Web. Let’s check them out:

• Using PowerPoint Web
• Using OneDrive

Method 1: Using PowerPoint Web

To embed PowerPoint presentation in HTML using PowerPoint Web:

• Open “PowerPoint Web” from your browser and go to “File.” You will see the “Open option.” Select the presentation you want to embed on your website.
• Again, go to “File” and select “Share.”
• Click on” Embed” from the “drop-down menu.” Wait a few seconds for a “new menu” to show up, and hit “Generate.” Now, your presentation will be previewed in front of you.
• You can change the dimensions of your presentation according to your audience.
• Next, from the “Embed Code textbox,” copy the code.
• Paste the code into the body of your website.
• Save your site. And now you have successfully embedded a PowerPoint presentation into a website.

Method 2: Using OneDrive

To embed PowerPoint presentations in HTML using OneDrive:

• Open your Presentation. Remove any notes or personal details if you have any.
• Next, upload your “PPT” to your personal OneDrive account.
• On your OneDrive, go to recent documents and select your presentation.
• Click on the “Embed button” appearing at the top of the page.
• Copy the “HTML code” that appears in front of your screen.
• Paste the copied code on your website and save it. Your PowerPoint presentation will now be embedded in your website.

READ MORE: How To Covert Keynote To PowerPoint

However, the imbibing option is not entirely functional because you won’t be able to update or change the fonts. There are no extra features because it is only available for viewing on the web. But you can resize it, search the document for particular phrases, print the paper, download it, and use several other tools that Microsoft offers.

Embedding PPT in HTML is an effective way to increase engagement on your website. You can share the required information through an amazing slideshow. By following the steps above, you can easily embed PowerPoint in your website. You can either use PowerPoint Web or your OneDrive account at your convenience.

Stay updated on our website to keep reading such useful blogs.

Can I Change The Font Of My PowerPoint Presentation After Embedding It On A Website?

No, changing the font after embedding PowerPoint in HTML or a website is impossible as it is converted into a PDF or PPTX form. If you wish to change the font, you must do it in your original presentation and reupload the file.

Can I Embed Multiple PowerPoint Files On The Same Website?

Yes, you certainly can. You can embed as many PowerPoint presentations as you want, repeating the same procedure.

Is There Any Limitation On The Size Of The PowerPoint File To Be Uploaded To A Website?

No, there is no limitation on the size of the PowerPoint presentation. The upload time may be affected depending on the size of your PPT file.

Can I Include Videos In My PowerPoint Presentation While Embedding Them On A Website?

Yes, you can include videos within the presentation. However, it may sometimes not function properly and contain some lags. So it is always advisable to include the videos separately if you are embedding PowerPoint in website.

Can I Use The Embed Function Directly From The PowerPoint Application On My Device?

No, you cannot directly use the embed function from the PowerPoint application. You have to either use PowerPoint Web or upload it to your OneDrive account and then embed it.

Table Of Content

Related presentations.

Customer Testimonial Template

Contact Us Template

About Me Template

Related blogs.

10 Bad PowerPoint Slides Examples to Avoid

10 Best Animated PowerPoint Templates

10 Best Business PowerPoint Templates for Presentations

10 Best Free PowerPoint Templates

Tags and categories, privacy overview.

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Mr•Techie

Learning about electronics.

By CSS Templates For Free

• Programming
• Calculators

How to Embed a PowerPoint File on a Web Page using plain HTML

Related Resources

HTML Tutorial

Html graphics, html examples, html references.

The HTML <video> element is used to show a video on a web page.

Courtesy of Big Buck Bunny :

The HTML <video> Element

To show a video in HTML, use the <video> element:

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Add muted after autoplay to let your video start playing automatically (but muted):

Browser Support

The numbers in the table specify the first browser version that fully supports the <video> element.

Advertisement

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:

HTML Video - Media Types

Html video - methods, properties, and events.

The HTML DOM defines methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

There are also DOM events that can notify you when a video begins to play, is paused, etc.

Example: Using JavaScript

Video courtesy of Big Buck Bunny .

For a full DOM reference, go to our HTML Audio/Video DOM Reference .

HTML Video Tags

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

How to Embed HTML Into Google Slides

Embedding raw HTML code directly into Google Slides presentations is unfortunately not possible. However, there are a few workarounds you can use to embed rich media content like images, videos, links, and even other Google files.

Why Can’t You Embed HTML in Google Slides?

Google Slides does not allow embedding arbitrary HTML code because it focuses on simplicity and limiting potential security issues. The Google Slides editor is streamlined to only support inserting certain types of objects like images, videos, and links.

This avoids complications from rendering complex HTML and prevents malicious code injection. So for security and usability reasons, Google restricts Slides functionality compared to fully-featured web platforms.

Workaround #1: Embed YouTube and Other Videos

While you can’t paste HTML <iframe> video embeds, Google Slides does support inserting videos through its built-in video tool:

• In your presentation, select Insert > Video .
• Paste in a YouTube, Vimeo, or other video platform URL.
• Google Slides will automatically embed and host the video.

Videos play right inside the slide, support autoplay/looping, and you can resize them appropriately. This works seamlessly for YouTube and some other platforms.

So even without custom HTML, you can still embed rich video content into slides!

Workaround #2: Insert Images and Format Links

Embedding standalone images or linking out to external websites is also possible in Google Slides without HTML:

• Images : Use Insert > Image to upload images or insert ones via URL. You can size and format images once inserted.
• Links : Highlight text and use the “link” button to make it hyperlinked. Or format text with the a tag to link websites.

This allows styling content to mimic certain inline HTML formatting. You can insert images, create image galleries, and link text to other webpages.

Workaround #3: Embed Google Drive Files

Google Slides supports embedding other Google files stored in Drive, including:

• Google Docs
• Google Sheets
• Google Drawings
• Google Forms
• Other Slides presentations

The files display live within the presentation. This works seamlessly since everything runs within Google’s ecosystem.

To embed Google Files:

• Click Insert > Google Drive
• Select the Google file you want to embed
• The file will display directly in your presentation

So despite the lack of general HTML embedding, you can embed documents, spreadsheets, drawings, forms, and even other presentations!

Alternative Approaches to HTML Embedding

While the workarounds above solve some common use cases, you might still want to embed more complex HTML, CSS, JavaScript, or other web code into slides.

A few alternative approaches include:

• Screenshot web content – Take screenshots of webpages and embed the images
• Use Google Sites – Build a webpage with Google Sites to host HTML/CSS/JS and embed the page
• Embed web apps or JavaScript plugins – Embed lightweight web apps or JavaScript plugins for added interactivity

However, these may be more complex or less seamless approaches.

Summary and Key Takeaways

Unfortunately, directly embedding raw HTML into Google Slides is not possible. But here are a few key workarounds:

• Embed YouTube and other videos using the built-in video tool
• Insert images and format text links to mimic basic HTML
• Embed other Google Drive files like Docs, Sheets, and Drawings
• Explore alternative solutions like screenshots, Google Sites webpages, or JavaScript plugins

So while Google Slides lacks full featured HTML support, you still have quite a few options to embed rich media content into your presentations!

Let me know if you have any other questions!

About The Author

Vegaslide staff, related posts.

How to Check the Word Count in Google Slides

How to Check Version History in Google Slides

How to Animate Objects in Google Slides

How to Add Exponent in Google Slides

You’re using an older browser version. Update to the latest version of Google Chrome , Safari , Mozilla Firefox , or Microsoft Edge for the best site experience.

• Products iSpring Suite iSpring Learn
• Use Cases Onboarding Compliance Training Induction Training Product Training Channel Partner Training Sales Training Microlearning Mobile Learning
• Company About Us Case Studies Customers Partnership Course Development Contact Us Academy Blog Webinars Guides Experts on iSpring
• Knowledge Hub Academy Webinars Articles Guides Experts on iSpring
• Language EN English Français Deutsch Español Italiano Nederlands Português Polski 中文 日本語 العربية Indonesia
• Shopping Cart

How to embed your HTML5 presentation into a website or blog

Do you want to embed a PowerPoint presentation into your website? The best way is to convert it to HTML5 format. A great advantage of HTML5 slides is that they can be viewed on virtually any PC or mobile device, including iPads.

In this article, you'll learn how to turn a PPT presentation into HTML5 with iSpring Converter Pro and ins ert it in your website or blog. Follow this simple step-by-step guide:

Publish an HTML5 presentation for uploading to the Web

Get the presentation’s URL on the server

Ins ert your HTML5 presentation in a website

Step 1: Publish a presentation for uploading to the Web

When your PowerPoint is ready to convert to HTML5, you can publish and put the presentation on a website using the Publish button on the iSpring toolbar. 

Once the publishing process is complete, you need to upload the entire folder of the specified file name to the server.

Step 2: Get the presentation’s URL

You need to find out the HTTP URL of the uploaded HTML5 presentation and copy the URL to the clipboard. The URL of the presentation depends on the specific settings of your server.

Tip: Make sure that the selected URL starts with ‘http://’ and not ‘ftp://’

Step 3: Ins ert your HTML5 presentation into a website

To have your PowerPoint presentation logically fit into a website, you can choose one of the following ways to play it:

• play on a separate webpage;
• open in a pop-up;
• ins ert in to an iframe.

a) Play HTML5 Presentation on a Separate Webpage

One of the easiest ways to share your presentation via a website is to provide a hyperlink to the presentation somewhere in a webpage. To ins ert a hyperlink, switch to the HTML editing mode and use the following code:

You can choose to open the presentation in a new browser tab (target=”_blank”) or in the same tab (target=“_self”)

b) Open HTML5 Presentation as a pop-up

To open your presentation in a pop-up window, make sure that your website allows using JavaScript code.

You can use the following code to create an on-click pop-up:

You can customize the width and height and add different elements to your pop-up ( learn more ).

Alternatively, you can se t the pop-up window to appear as soon as the webpage is loaded:

c) Insert HTML5 presentation in to iframe

If you want to show your HTML5 presentation right within your webpage, you can ins ert it in to an iframe using the following HTML code ( learn more ):

Published on your website in one of the described ways, your HTML5 presentation can be delivered to much wider audiences using modern Web browsers, mobile devices and iPads. To make sure that your HTML5 presentation will be played back properly, check out iSpring Converter’s tech specs .

Related Articles

• Four Ways to Protect Your Content with iSpring
• Output options Flash / HTML5
• Share PPT with iSpring Cloud

We use cookies to collect info about site visits and personalize your experience. See our Cookie Policy for more details.

Manage your cookies

Essential cookies are always on. You can turn off other cookies if you wish.

Essential cookies

Analytics cookies

Social media cookies

How-To Geek

6 ways to create more interactive powerpoint presentations.

Engage your audience with cool, actionable features.

Quick Links

• Add a QR code
• Embed Microsoft Forms (Education or Business Only)
• Embed a Live Web Page
• Add Links and Menus
• Add Clickable Images to Give More Info
• Add a Countdown Timer

We've all been to a presentation where the speaker bores you to death with a mundane PowerPoint presentation. Actually, the speaker could have kept you much more engaged by adding some interactive features to their slideshow. Let's look into some of these options.

1. Add a QR code

Adding a QR code can be particularly useful if you want to direct your audience to an online form, website, or video.

Some websites have in-built ways to create a QR code. For example, on Microsoft Forms , when you click "Collect Responses," you'll see the QR code option via the icon highlighted in the screenshot below. You can either right-click the QR code to copy and paste it into your presentation, or click "Download" to add it to your device gallery to insert the QR code as a picture.

In fact, you can easily add a QR code to take your viewer to any website. On Microsoft Edge, right-click anywhere on a web page where there isn't already a link, and left-click "Create QR Code For This Page."

You can also create QR codes in other browsers, such as Chrome.

You can then copy or download the QR code to use wherever you like in your presentation.

2. Embed Microsoft Forms (Education or Business Only)

If you plan to send your PPT presentation to others—for example, if you're a trainer sending step-by-step instruction presentation, a teacher sending an independent learning task to your students, or a campaigner for your local councilor sending a persuasive PPT to constituents—you might want to embed a quiz, questionnaire, pole, or feedback survey in your presentation.

In PowerPoint, open the "Insert" tab on the ribbon, and in the Forms group, click "Forms". If you cannot see this option, you can add new buttons to the ribbon .

As at April 2024, this feature is only available for those using their work or school account. We're using a Microsoft 365 Personal account in the screenshot below, which is why the Forms icon is grayed out.

Then, a sidebar will appear on the right-hand side of your screen, where you can either choose a form you have already created or opt to craft a new form.

Now, you can share your PPT presentation with others , who can click the fields and submit their responses when they view the presentation.

3. Embed a Live Web Page

You could always screenshot a web page and paste that into your PPT, but that's not a very interactive addition to your presentation. Instead, you can embed a live web page into your PPT so that people with access to your presentation can interact actively with its contents.

To do this, we will need to add an add-in to our PPT account .

Add-ins are not always reliable or secure. Before installing an add-in to your Microsoft account, check that the author is a reputable company, and type the add-in's name into a search engine to read reviews and other users' experiences.

To embed a web page, add the Web Viewer add-in ( this is an add-in created by Microsoft ).

Go to the relevant slide and open the Web Viewer add-in. Then, copy and paste the secure URL into the field box, and remove https:// from the start of the address. In our example, we will add a selector wheel to our slide. Click "Preview" to see a sample of the web page's appearance in your presentation.

This is how ours will look.

When you or someone with access to your presentation views the slideshow, this web page will be live and interactive.

4. Add Links and Menus

As well as moving from one slide to the next through a keyboard action or mouse click, you can create links within your presentation to direct the audience to specific locations.

To create a link, right-click the outline of the clickable object, and click "Link."

In the Insert Hyperlink dialog box, click "Place In This Document," choose the landing destination, and click "OK."

What's more, to make it clear that an object is clickable, you can use action buttons. Open the "Insert" tab on the ribbon, click "Shape," and then choose an appropriate action button. Usefully, PPT will automatically prompt you to add a link to these shapes.

You might also want a menu that displays on every slide. Once you have created the menu, add the links using the method outlined above. Then, select all the items, press Ctrl+C (copy), and then use Ctrl+V to paste them in your other slides.

5. Add Clickable Images to Give More Info

Through PowerPoint's animations, you can give your viewer the power to choose what they see and when they see it. This works nicely whether you're planning to send your presentation to others to run through independently or whether you're presenting in front of a group and want your audience to decide which action they want to take.

Start by creating the objects that will be clickable (trigger) and the items that will appear (pop-up).

Then, select all the pop-ups together. When you click "Animations" on the ribbon and choose an appropriate animation for the effect you want to achieve, this will be applied to all objects you have selected.

The next step is to rename the triggers in your presentation. To do this, open the "Home" tab, and in the Editing group, click "Select", and then "Selection Pane."

With the Selection Pane open, select each trigger on your slide individually, and rename them in the Selection Pane, so that they can be easily linked to in the next step.

Finally, go back to the first pop-up. Open the "Animations" tab, and in the Advanced Animation group, click the "Trigger" drop-down arrow. Then, you can set the item to appear when a trigger is clicked in your presentation.

If you want your item to disappear when the trigger is clicked again, select the pop-up, click "Add Animation" in the Advanced Animation group, choose an Exit animation, and follow the same step to link that animation to the trigger button.

6. Add a Countdown Timer

A great way to get your audience to engage with your PPT presentation is to keep them on edge by adding a countdown timer. Whether you're leading a presentation and want to let your audience stop to discuss a topic, or running an online quiz with time-limit questions, having a countdown timer means your audience will keep their eye on your slide throughout.

To do this, you need to animate text boxes or shapes containing your countdown numbers. Choose and format a shape and type the highest number that your countdown clock will need. In our case, we're creating a 10-second timer.

Now, with your shape selected, open the "Animations" tab on the ribbon and click the animation drop-down arrow. Then, in the Exit menu, click "Disappear."

Open the Animation Pane, and click the drop-down arrow next to the animation you've just added. From there, choose "Timing."

Make sure "On Click" is selected in the Start menu, and change the Delay option to "1 second," before clicking "OK."

Then, with this shape still selected, press Ctrl+C (copy), and then Ctrl+V (paste). In the second box, type 9 . With the Animation Pane still open and this second shape selected, click the drop-down arrow and choose "Timing" again. Change the Start option to "After Previous," and make sure the Delay option is 1 second. Then, click "OK."

We can now use this second shape as our template, as when we copy and paste it again, the animations will also duplicate. With this second shape selected, press Ctrl+C and Ctrl+V, type 8 into the box, and continue to do the same until you get to 0 .

Next, remove the animations from the "0" box, as you don't want this to disappear. To do this, click the shape, and in the Animation Pane drop-down, click "Remove."

You now need to layer them in order. Right-click the box containing number 1, and click "Bring To Front." You will now see that box on the top. Do the same with the other numbers in ascending order.

Finally, you need to align the objects together. Click anywhere on your slide and press Ctrl+A. Then, in the Home tab on the ribbon, click "Arrange." First click "Align Center," and then bring the menu up again, so that you can click "Align Middle."

Press Ctrl+A again to select your timer, and you can then move your timer or copy and paste it elsewhere.

Press F5 to see the presentation in action, and when you get to the slide containing the timer, click anywhere on the slide to see your countdown timer in action!

Now that your PPT presentation is more interactive, make sure you've avoided these eight common presentational mistakes before you present your slides.

• Skip to main content
• Keyboard shortcuts for audio player

• Your Health
• Treatments & Tests
• Health Inc.
• Public Health

A woman with failing kidneys receives genetically modified pig organs

Dr. Jeffrey Stern, assistant professor in the Department of Surgery at NYU Grossman School of Medicine, and Dr. Robert Montgomery, director of the NYU Langone Transplant Institute, prepare the gene-edited pig kidney with thymus for transplantation. Joe Carrotta for NYU Langone Health hide caption

Dr. Jeffrey Stern, assistant professor in the Department of Surgery at NYU Grossman School of Medicine, and Dr. Robert Montgomery, director of the NYU Langone Transplant Institute, prepare the gene-edited pig kidney with thymus for transplantation.

NEW YORK — Lisa Pisano was lying in a hospital bed at NYU Langone Health, hooked up to beeping monitors and an array of tubes. Her surgical wounds were still healing, and she looked tired. But the 54-year-old New Jersey woman said she hasn't felt this good in years.

"I'm feeling better and better and better every day," said Pisano, 54, of Cookstown, N.J. "I got somewhat of me back. Not there yet. But I'm getting there."

Ten days earlier, Pisano became the second living person in the world to get a kidney from a genetically modified pig transplanted into her body to replace her own failing organs, her doctors announced Wednesday. A Massachusetts man was the first to get a pig kidney last month.

Pisano also got a thymus gland from the same genetically engineered pig to help prevent her body from rejecting the kidney, as well as a pump to shore up her failing heart.

"I'm amazed," said Pisano during a bedside interview two days before her kidney transplant was announced publicly. "I'm absolutely amazed that it's an option for me. Because I didn't think I even had that option."

Progress in human transplant of animal organs

Pisano's transplant is the latest development in the fast-moving effort to use genetically modified pigs to solve the persistent shortage of organs for transplants. More than 103,000 people are currently on the waiting list for organs. About 17 die every day because they can't get one.

"We're in a new universe in transplantation," said Dr. Robert Montgomery , who runs the NYU Langone Transplant Institute where the operation was performed. "This would be a sustainable, unlimited source of organs. This would be transformative."

Shots - Health News

How genetically modified pigs could end the shortage of organs for transplants.

Many transplant specialists are excited by the research. But the effort is also raising some concerns. Some doctors worry pig organs could spread viruses to people. Some critics are uncomfortable with the prospect of breeding thousands of genetically modified animals to be slaughtered for their organs. Some also are concerned about using vulnerable patients for experimentation.

"This is a real landmark procedure," said Karen Maschke , a bioethicist at The Hastings Center, a bioethics think tank in Garrison, N.Y. "But there are lot of issues that need to be discussed."

When Pisano arrived at the hospital, she was within weeks — maybe even days — of dying, Montgomery said. Years of diabetes had taken a terrible toll. She had suffered multiple heart attacks and was on dialysis to compensate for her failing kidneys.

"I didn't really have a life," she said. "I didn't do anything. I just sat around. I couldn't get up and do anything. I couldn't even cook dinner. I couldn't vacuum. I couldn't play with my grandkids because I couldn't bend down to get them. I just couldn't do anything with them. And that is the most horrible feeling in the world. That was really, really tearing me apart. I was almost at the point of giving up. It was terrible."

Pisano wasn't eligible to get a human organ transplant because she had too many other health problems, especially serious heart problems. So she jumped at the chance to get a pig kidney.

"My first thought was: 'Wow, I can't even believe that was even possible.' So when it was brought to my attention I was like, 'You know what? I'm going to try it.' I said, 'You know what? I'm going to do it. I have to do it — for myself and for the rest of my family.' "

A transplant for research — and to buy time

The hope is the pig kidney will give Pisano at least a little more time, and provide researchers with important information they could use to improve the outcome in future transplants. Pisano also needs to take anti-rejection medication.

"When we brought her into the hospital, she was in really bad shape," said Montgomery. "None of us could have imagined that it would have gone this smoothly."

"Her kidney is working better than yours or mine. So we're optimistic that she'll be able to go home and spend time with her children and grandchildren and live a comfortable life," Montgomery told NPR in an interview before the announcement.

He stressed, however, that she will probably need several months to recover in the hospital before she can go home. He also said he couldn't predict how much more time Pisano may gain from the procedure.

Beyond Pisano's case, much more research is needed before organs from genetically modified pigs could become commonly used. "It's still early," Montgomery said. "These are early days. There's still a lot we need to learn and perfect."

First human transplant of a genetically modified pig kidney performed

Surgeons had previously transplanted kidneys and livers from genetically modified cloned pigs into baboons and a handful of people whose brains had stopped functioning. Surgeons at the University of Maryland even tested hearts in two men who had run out of other options. They lived for several weeks after the procedures. The Massachusetts man who got the pig kidney left the hospital within weeks and is still doing well, according to Massachusetts General Hospital.

KPMG Personalization

• Bolivia: Guidance on requests for refunds of export taxes

Requirements and procedures for the presentation of export tax refund requests

• Home ›
• Insights ›

The tax authority ( Servicio de Impuestos Nacionales ) issued guidance—RND No. 102400000013 (19 April 2024)—establishing requirements and procedures for the presentation of export tax refund requests in accordance with Supreme decree No. 5145 (Spanish) , effective 25 April 2024.

• The exporter who makes the request must have the commercial export invoice enabled, not have the non-existent domicile mark, and have a designated person with broad and sufficient power to sign the request, its rectification, and the receipt of values.
• The exporter, in addition to presenting the traditional information (DEX, F-210, export invoice), must attach the Affidavit of Authorization for Foreign Exchange Certification (Form No. 1138) and proof of income of 100% of foreign currency to the exporter's foreign currency account certified by the financial intermediation entity.
• Once the final refund has been issued, the tax authority will request certification of the effective income of foreign currency in accordance with Form No. 1138.

Read an April 2024 report (Spanish)  prepared by the KPMG member firm in Bolivia

The KPMG name and logo are trademarks used under license by the independent member firms of the KPMG global organization. KPMG International Limited is a private English company limited by guarantee and does not provide services to clients. No member firm has any authority to obligate or bind KPMG International or any other member firm vis-à-vis third parties, nor does KPMG International have any such authority to obligate or bind any member firm. The information contained herein is of a general nature and is not intended to address the circumstances of any particular individual or entity. Although we endeavor to provide accurate and timely information, there can be no guarantee that such information is accurate as of the date it is received or that it will continue to be accurate in the future. No one should act on such information without appropriate professional advice after a thorough examination of the particular situation. For more information, contact KPMG's Federal Tax Legislative and Regulatory Services Group at: + 1 202 533 3712, 1801 K Street NW, Washington, DC 20006.

• Create an email message
• Suggested recipients
• Use @mentions
• Create a signature
• Add attachments
• Check spelling
• Add a reaction
• Out of office replies
• Delay or schedule
• Recall a message
• Automatic forwarding
• Read receipt
• Save a file or draft
• Change display name
• Create a folder
• Use inbox rules
• Conditional formatting
• Use Favorites
• Custom views
• Message font size
• Message list view
• Focused Inbox
• View as conversations
• Filter and sort messages
• Number of messages
• Chat with recipients
• Share an email
• Status in Outlook
• Phishing and suspicious behavior
• Blocked senders
• Protected messages
• Open a protected message
• More to explore

Create and add an email signature in Outlook

In Outlook, you can create one or more personalized signatures for your email messages. Your signature can include text, links, pictures, and images (such as your handwritten signature or a logo).

Note:  If the steps under this New Outlook tab don't work, you may not be using new Outlook for Windows yet. Select Classic Outlook  and follow those steps instead.

Create and add an email signature

On the View tab, select   View Settings . 

Select Accounts > Signatures .

Select    New signature , then give it a distinct name.

In the editing box below the new name, type your signature, then format it with the font, color, and styles to get the appearance you want.

Select Save when you're done.

With your new signature selected from the list above the editing box, go to  Select default signatures and choose whether to apply the signature to new messages and to replies and forwards.

Select Save again.

Note:  If you have a Microsoft account, and you use Outlook and Outlook on the web or Outlook on the web for business, you need to create a signature in both products.

Create your signature and choose when Outlook adds a signature to your messages

If you want to watch how it's done, you can go directly to  the video below .

Open a new email message.

Under Select signature to edit , choose New , and in the New Signature dialog box, type a name for the signature.

Under Edit signature , compose your signature. You can change fonts, font colors, and sizes, as well as text alignment. If you want to create a more robust signature with bullets, tables, or borders, use Word to create and format your signature text, then copy and paste it into the Edit signature box. You can also use a pre-designed template  to create your signature. Download the templates in Word, customize with your personal information, and then copy and paste into the Edit signature box. 

You can add links and images to your email signature, change fonts and colors, and justify the text using the mini formatting bar under Edit signature .

You can also add social media icons and links in your signature or customize one of our pre-designed temlates. For more information, see Create a signature from a template .

To add images to your signature, see Add a logo or image to your signature .

Under Choose default signature , set the following options. 

In the E-mail account drop-down box, choose an email account to associate with the signature. You can have different signatures for each email account.

You can have a signature automatically added to all new messages. Go to in the New messages drop-down box and select one of your signatures. If you don't want to automatically add a signature to new messages, choose (none). This option does not add a signature to any messages you reply to or forward. 

You can select to have your signature automatically appear in reply and forward messages. In the  Replies/forwards drop-down, select one of your signatures. Otherwise, accept the default option of (none). 

Choose OK to save your new signature and return to your message. Outlook doesn't add your new signature to the message you opened in Step 1, even if you chose to apply the signature to all new messages. You'll have to add the signature manually to this one message. All future messages will have the signature added automatically. To add the signature manually, select Signature from the Message menu and then pick the signature you just created.

Add a logo or image to your signature

If you have a company logo or an image to add to your signature, use the following steps.

Open a new message and then select Signature > Signatures .

In the Select signature to edit box, choose the signature you want to add a logo or image to.

To resize your image, right-click the image, then choose Picture . Select the Size tab and use the options to resize your image. To keep the image proportions, make sure to keep the Lock aspect ratio checkbox checked.

When you're done, select OK , then select OK again to save the changes to your signature.

Insert a signature manually

If you don't choose to insert a signature for all new messages or replies and forwards, you can still insert a signature manually.

In your email message, on the Message tab, select Signature .

Choose your signature from the fly-out menu that appears. If you have more than one signature, you can select any of the signatures you've created.

See how it's done

Top of page

Note:  Outlook on the web is the web version of Outlook for business users with a work or school account.

Automatically add a signature to a message

You can create an email signature that you can add automatically to all outgoing messages or add manually to specific ones.

Select Settings   at the top of the page.

Select Mail >  Compose and reply .

Under Email signature , type your signature and use the available formatting options to change its appearance.

Select the default signature for new messages and replies.

Manually add your signature to a new message

If you've created a signature but didn't choose to automatically add it to all outgoing messages, you can add it later when you write an email message.

In a new message or reply, type your message.

If you created multiple signatures, choose the signature you want to use for your new message or reply.

When your email message is ready, choose Send .

Note:  Outlook.com is the web version of Outlook for users signing in with a personal Microsoft account such as an Outlook.com or Hotmail.com account.

Related articles

Create and add an email signature in Outlook for Mac

Create an email signature from a template

Need more help?

Want more options.

Explore subscription benefits, browse training courses, learn how to secure your device, and more.

Microsoft 365 subscription benefits

Microsoft 365 training

Microsoft security

Accessibility center

Communities help you ask and answer questions, give feedback, and hear from experts with rich knowledge.

Ask the Microsoft Community

Microsoft Tech Community

Windows Insiders

Microsoft 365 Insiders

Find solutions to common problems or get help from a support agent.

Online support

Was this information helpful?

Thank you for your feedback.