September 22, 2026

How to turn a PowerPoint into a dual-mode interactive HTML presentation with Copilot

Dovetail Staff · 10 minute read

This is the second in our series exploring useful HTML experiences you can create with Copilot beyond SharePoint Lists, Libraries and dashboards.

In the first guide, we showed how to turn an Excel workbook into a live HTML dashboard. This time, we’re looking at presentations: how to take a finished PowerPoint deck and turn it into one interactive HTML file with two different ways to use it:

Presenter mode and Interactive mode.

The result is a presentation when you are there and a learning experience when you are not.

What this creates

Copilot can turn a completed PowerPoint presentation into a standalone HTML application containing:

Presenter mode: The original slides displayed in the correct order, with full-screen and keyboard navigation.
Interactive mode: An explorable version of the presentation containing modules, recaps and knowledge tests.
A mode selector: A simple way for the user to move between the two experiences.
One self-contained file: All slide images, styling and functionality are embedded inside a single HTML file.

You do not need to convert every slide into an image yourself, create a website or write the HTML and JavaScript.

Finish the presentation, export it as a PDF, attach it to Copilot and use a detailed prompt to define how Presenter and Interactive modes should work.

Why esport the PowerPoint as a PDF?

Although the source starts as a PowerPoint presentation, the version given to Copilot should be a PDF.

This helps preserve the final appearance of each slide, including:

Layouts
Fonts
Images
Diagrams
Charts
Logos
Branding
Slide order

In Presenter mode, Copilot can render each PDF page as an image and embed it directly in the HTML using Base64 encoding.

This is important because asking Copilot to recreate the presentation as HTML elements can lead to formatting changes. Text may reflow, objects may move and slides may no longer look like the originals.

By embedding each completed slide as an image, Presenter mode can stay much closer to the original deck.

Interactive mode can then analyse the content separately and create recaps and questions without changing the slides themselves.

Before you start

Check these three lists before carrying on.

You will need	This works particularly well for	Before continuing, check that
You have a completed PowerPoint presentation You have access to Microsoft 365 Copilot You are using a modern web browser, such as Microsoft Edge or Google Chrome You have permission to upload the presentation content to Copilot The presentation contains enough information for Copilot to identify meaningful sections or modules	Training courses Workshops Sales presentations Product demonstrations Conference sessions Employee onboarding Internal process training Client education	Slides are in their final order Section or module titles are clear Branding is consistent Hidden or unused slides have been removed Important diagrams and images display correctly The content contains enough detail to support useful recaps and questions

Copilot will use the material in the PDF to generate the Interactive mode. A clear presentation structure will help it identify where one module ends and another begins.

Creating the dual-mode HTML presentation

Step 1: Export the PowerPoint as a PDF

Open your completed presentation in PowerPoint.

Depending on the version you are using, select:

File > Export > Download as PDF

or:

File > Save As > PDF

Save the PDF somewhere you can easily find it.

Open the exported PDF before proceeding and check that:

Every required slide is included
The slides are in the correct order
Fonts and images display properly
Nothing has been cropped
There are no unwanted blank pages
Hidden or unused slides have not been included
The aspect ratio still looks correct

You do not need to convert each page into an image. The prompt will instruct Copilot to do this when creating the HTML file.

Step 2: Open a new Copilot conversation

Open Microsoft 365 Copilot and start a new conversation.

Using a new conversation reduces the chance that earlier messages or unrelated instructions influence the result.

Attach the PDF you exported from PowerPoint. Wait until the file appears in the conversation before entering the prompt.

If the presentation contains confidential, personal or commercially sensitive information, make sure you have permission to process and share it through your organisation’s approved Copilot environment.

Step 3: Adapt the prompt

Before pasting the complete prompt, replace the following placeholders:

[PRESENTATION NAME]
[AUDIENCE]
[SHORT DESCRIPTION OF SUBJECT]
Presentation name: Copilot Adoption Essentials
Audience: Department managers and team leaders
Subject: How managers can introduce Copilot safely and help their teams build effective working habits

For example:

These details give Copilot useful context about the purpose of the presentation. However, the prompt should also make it clear that generated recaps and questions must remain grounded in the attached PDF.

Step 4: Use the complete prompt

The Copilot Prompt

Create a polished, dual-mode HTML application from the attached PDF presentation.

The presentation is called “[PRESENTATION NAME]”. It is intended for [AUDIENCE] and covers [SHORT DESCRIPTION OF SUBJECT].

Create one downloadable HTML file containing both Presenter mode and Interactive mode. Include a clearly visible selector that allows users to switch between the two modes.

PRESENTER MODE

Use every page of the PDF as a presentation slide.

Render each PDF page as a high-quality image and embed it directly in the HTML using Base64 encoding. The slides must look the same as the original PDF.

Preserve:

• Every slide

• The original slide order

• The original aspect ratio

• All branding, text, figures, diagrams and images

Do not recreate, reflow, redesign, rewrite or summarise the slides in Presenter mode.

Include:

• Previous and Next buttons

• The current slide number and total number of slides

• Full-screen presentation mode

• Keyboard navigation

• Right Arrow, Page Down and Space to move forwards

• Left Arrow and Page Up to move backwards

• Navigation that allows the user to jump to the beginning of each identified module

INTERACTIVE MODE

Analyse the content of the PDF and identify its course overview, modules and key learning points.

Use only information contained in the PDF. Do not introduce external information, invent learning points or change the meaning of the source content.

Create:

• A course overview page

• A clearly labelled card for each module

• A short description of each module

• Five expandable recap topics for each module

• A five-question multiple-choice knowledge test for each module

• Four answer options for every question

• One clearly correct answer for every question

• A short explanation displayed after each test is submitted

• A score out of five

• A Retake Test option

• A progress indicator showing how many module tests have been completed

• Clear navigation between the course overview, module recap and module test

The questions must test important points from the relevant module. Each question must have only one defensible correct answer, supported by the PDF.

Store the user’s latest test results locally in their browser. Do not send or store the results anywhere else.

DESIGN

Use the colours, logos and visual identity found in the presentation to create a consistent interface around the content.

Include:

• A navigation panel showing the course overview and modules

• A visible Presenter and Interactive mode selector

• Responsive layouts for desktop, tablet and mobile

• Clearly visible buttons and selected states

• Visible keyboard focus

• Accessible labels and semantic HTML

TECHNICAL REQUIREMENTS

Return one complete, standalone HTML file.

Embed all slide images, logos and other visual assets directly in the HTML using Base64 data URLs.

Place all CSS and JavaScript within the HTML file.

Do not create or require:

• A separate images folder

• External CSS or JavaScript files

• External websites, APIs or libraries

• Content delivery networks

• Internet-hosted fonts

• Authentication keys

• The original PowerPoint or PDF after creation

The completed HTML must work locally in a browser without an internet connection.

Before finishing, verify that:

1. Every PDF page is included in Presenter mode.

2. The slides remain in their original order.

3. Presenter mode navigation and full-screen mode work.

4. The identified modules match the PDF.

5. Every recap and test question is supported by the PDF.

6. Test scoring, explanations, retakes and progress tracking work.

7. Users can switch between Presenter and Interactive modes.

8. All required assets are embedded in the HTML.

9. The application works as one standalone file.

Create and attach the completed downloadable HTML file now.

Do not return source code in the conversation, sample code, instructions, a mock-up or pseudocode.

newsletter_notebook_image1-2

Image 1 - Example f what the prompt should look like

The final instruction is particularly important. Without it, Copilot may explain how to create the application or return a block of HTML code instead of producing a downloadable file.

Step 5: Download and open the HTML file

Once Copilot has finished, download the .html file and save it locally.

The output should be one file, not an HTML file accompanied by separate folders for images, scripts or styling.

Open the file in Microsoft Edge or Google Chrome.

You should see a clear option to switch between:

Presenter mode
Interactive mode

Test both options before sharing the file.

newsletter_notebook_image2

What to check for after:

Checking Presenter mode

elect Presenter mode and move through the presentation from beginning to end.

The slides should appear as faithful images of the original PDF pages. They should not look like Copilot has attempted to rebuild their layouts using editable HTML text and objects.

Check that:

Every slide is present
The original slide order has been preserved
Text remains readable
Images and diagrams display correctly
Slide proportions have not changed
Previous and Next buttons work
The slide counter is correct
Full-screen mode works
Keyboard navigation works
Module navigation opens the correct slide
Right Arrow, Page Down or Space: Move forwards
Left Arrow or Page Up: Move backwards

Try the keyboard controls as well as the visible buttons.

The expected controls are:

If the deck contains clear modules or sections, test any links that jump directly to the start of those sections.

Check Interactive mode

Switch to Interactive mode and review the material as if you had not attended the original presentation.

You are checking whether the application works, but you are also checking Copilot’s interpretation of the content.

Confirm that:

The course overview accurately describes the presentation
Module names match the source
Module boundaries make sense
Recaps focus on the important points
Questions are based on the relevant module
Each question has four answer options
Only one answer is clearly correct
Explanations are accurate
Scores are calculated correctly
The Retake Test option works
The progress indicator updates
Navigation between the overview, recaps and tests works

Copilot is generating this part of the experience from the information in the PDF. It may identify the wrong module structure, oversimplify an important point or write a question with more than one reasonable answer.

Every recap, answer and explanation should therefore be checked against the original presentation before the application is shared.

Prove that the file is self contained

A file may appear to work while it still has an internet connection or access to the original assets.

To prove that the HTML is genuinely self-contained:

Save the HTML file locally.
Close Copilot, PowerPoint and the original PDF.
Disconnect the computer from the internet.
Open the HTML file again.
Test Presenter mode.
Switch to Interactive mode.
Complete at least one knowledge test.
Close the browser.
Reopen the HTML file.
Check whether the application and locally stored progress still work.

The file should not require:

The original PowerPoint
The exported PDF
A separate image folder
An external stylesheet
A JavaScript library
An internet connection
An external font service
An API or authentication key

Embedding the slide images as Base64 data means the images are stored inside the HTML itself. This makes the file larger, but it also makes it much easier to download, move and share as one complete resource.

Making corrections

If something is wrong, avoid asking Copilot to start the entire application again. Identify the exact problem and tell it what must remain unchanged.

Use this follow-up prompt:

Update the HTML file you created.

Make the following corrections:

• [SPECIFIC CORRECTION]

Do not change any part of the application that is not listed above.

Preserve both Presenter mode and Interactive mode.

Return the complete revised downloadable standalone HTML file, with all assets still embedded using Base64.

Do not return a code extract, instructions or pseudocode.

Troubleshooting

Copilot returns instructions or source

Copilot may explain how to build the HTML application rather than creating the file.

Reply with:

Create and attach the completed downloadable HTML file now. Do not return source code, sample code, a mock-up, instructions or pseudocode.

The slides have been reformatted

If Presenter mode contains recreated text, changed layouts or moved objects, Copilot has probably reconstructed the slides instead of embedding each PDF page as an image.

Reply with:

Rebuild Presenter mode so that every PDF page is rendered as a high-quality image and embedded directly in the HTML using Base64 encoding.

Do not recreate, reflow, redesign or rewrite the slide content.

Preserve the original slide order and aspect ratio. Keep Interactive mode unchanged.

Some slides are missing

Compare the slide total in Presenter mode with the number of pages in the PDF.

If slides are missing, tell Copilot which pages are affected:

Presenter mode must contain all [NUMBER] pages from the attached PDF in their original order.

Pages [NUMBERS] are currently missing. Add those pages without changing the other slides or Interactive mode.

The module structure is wrong

This usually happens when the presentation does not have obvious section headings, or when Copilot mistakes a topic change for a new module.

Give Copilot the correct structure explicitly:

Update the Interactive mode module structure to use the following sections:

• Module 1: [NAME], slides [RANGE]

• Module 2: [NAME], slides [RANGE]

• Module 3: [NAME], slides [RANGE]

Regenerate only the affected module recaps and questions. Do not change Presenter mode.

Questions contain unsupported information

If a question introduces information that does not appear in the presentation, identify it directly.

Ask Copilot to replace the affected question with one that can be answered using the source:

Replace question [NUMBER] in module [NAME].

The current question is not fully supported by the attached PDF.

Create a replacement question based only on information stated in that module. Include four answer options, one defensible correct answer and a short source-grounded explanation.

Do not change the other questions.

Progress is not saved

The prompt asks Copilot to store the latest results locally in the browser.

If this does not work, request a targeted correction:

Repair the local progress storage.

The user’s latest module test results and completion progress should be stored locally in the browser and restored when the HTML file is reopened.

Do not send or store results externally. Keep all other content and functionality unchanged.

Be aware that browser security settings and the way a local HTML file is opened may affect whether local progress can be retained. Test the finished file in the browser your audience is expected to use.

The file does not work offline

An offline failure usually means part of the application depends on an external resource.

Ask Copilot to inspect the entire file for:

External image URLs
External fonts
JavaScript libraries
CSS files
Content delivery networks
APIs
Authentication services

Use this correction:

Remove every external dependency from the HTML application.

Embed all slide images, logos and visual assets using Base64 data URLs. Place all required CSS and JavaScript inside the HTML file.

The application must work locally without an internet connection, the original PDF or any separate files.

Do not change the presentation content, module structure, recaps or questions.

Before sharing the presentation

Complete a final review before sending the HTML file to colleagues, customers or learners.

Presenter mode checklist	Interactive mode checklist	Final file checklist
Every slide is included The slide order is correct Each slide looks the same as the PDF Previous and Next work The slide counter is correct Full-screen mode works Keyboard navigation works Module navigation opens the correct section	The course overview matches the presentation The module structure is accurate Module names reflect the source material Each module has relevant recap topics Each module has five multiple-choice questions Every question has four answer options Each question has one defensible correct answer Explanations are accurate and source-grounded Scoring works Retake Test works The progress indicator updates Navigation works throughout the application	There is one HTML file Both modes are present Presenter mode remains faithful to the original Interactive content has been checked against the PDF All assets are embedded No external files are required The application works offline No confidential information is included unintentionally The finished file has been tested in the audience’s expected browser

What to take away

A PowerPoint presentation usually depends on the presenter to provide the context, control the sequence and explain why each point matters.

A dual-mode HTML presentation gives the same material two jobs.

Presenter mode preserves the original deck for delivering the session live. Interactive mode gives the audience a structured way to revisit the material, check their understanding and move through it without the presenter.

You need to explain what must remain faithful to the original, what users should be able to do afterwards and how the final file should behave.

The result is more than PowerPoint in a browser. It is a presentation when you are there and a learning experience when you are not.

Try it for yourself

If you’re exploring how Copilot, agents and interactive experiences could improve training, communication or business processes, get in touch using the form below.

We’ll be sharing more step-by-step guides showing how to use Copilot to turn familiar business content into useful HTML experiences.