Build your first PowerPoint content add-in

In this article, you'll walk through the process of building a PowerPoint content add-in using Visual Studio.

Prerequisites

• Visual Studio 2019 or later with the Office/SharePoint development workload installed.

  Note

  If you've previously installed Visual Studio, use the Visual Studio Installer to ensure that the Office/SharePoint development workload is installed.

• Office connected to a Microsoft 365 subscription (including Office on the web).

Create the add-in project

1. In Visual Studio, choose Create a new project.

2. Using the search box, enter add-in. Choose PowerPoint Web Add-in, then select Next.

3. Name your project and select Create.

4. In the Create Office Add-in dialog window, choose Insert content into PowerPoint slides, and then choose Finish to create the project.

5. Visual Studio creates a solution and its two projects appear in Solution Explorer. The Home.html file opens in Visual Studio.

Explore the Visual Studio solution

When you've completed the wizard, Visual Studio creates a solution that contains two projects.

Update the code

1. Home.html specifies the HTML that will be rendered in the add-in's task pane. In Home.html, find the <p> element that contains the text "This example will read the current document selection." and the <button> element where the id is "get-data-from-selection". Replace these entire elements with the following markup then save the file.

   <p class="ms-font-m-plus">This example will get some details about the current slide.</p>
   
   <button class="Button Button--primary" id="get-data-from-selection">
       <span class="Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
       <span class="Button-label">Get slide details</span>
       <span class="Button-description">Gets and displays the current slide's details.</span>
   </button>
   

2. Open the file Home.js in the root of the web application project. This file specifies the script for the add-in. Find the getDataFromSelection function and replace the entire function with the following code then save the file.

   // Gets some details about the current slide and displays them in a notification.
   function getDataFromSelection() {
       if (Office.context.document.getSelectedDataAsync) {
           Office.context.document.getSelectedDataAsync(Office.CoercionType.SlideRange,
               function (result) {
                   if (result.status === Office.AsyncResultStatus.Succeeded) {
                       showNotification('Some slide details are:', '"' + JSON.stringify(result.value) + '"');
                   } else {
                       showNotification('Error:', result.error.message);
                   }
               }
           );
       } else {
           app.showNotification('Error:', 'Reading selection data is not supported by this host application.');
       }
   }
   

Update the manifest

1. Open the add-in only manifest file in the add-in project. This file defines the add-in's settings and capabilities.

2. The ProviderName element has a placeholder value. Replace it with your name.

3. The DefaultValue attribute of the DisplayName element has a placeholder. Replace it with My Office Add-in.

4. The DefaultValue attribute of the Description element has a placeholder. Replace it with A content add-in for PowerPoint..

5. Save the file. The updated lines should look like the following code sample.

   ...
   <ProviderName>John Doe</ProviderName>
   <DefaultLocale>en-US</DefaultLocale>
   <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
   <DisplayName DefaultValue="My Office Add-in" />
   <Description DefaultValue="A content add-in for PowerPoint."/>
   ...
   

Try it out

1. Using Visual Studio, test the newly created PowerPoint add-in by pressing F5 or choosing the Start button to launch PowerPoint with the content add-in displayed over the slide.

2. In PowerPoint, choose the Get slide details button in the content add-in to get details about the current slide.

   

Next steps

Congratulations, you've successfully created a PowerPoint content add-in! Next, learn more about developing Office Add-ins with Visual Studio.

Troubleshooting

• Ensure your environment is ready for Office development by following the instructions in Set up your development environment.

• Some of the sample code uses ES6 JavaScript. This isn't compatible with older versions of Office that use the Trident (Internet Explorer 11) browser engine. For information on how to support those platforms in your add-in, see Support older Microsoft webviews and Office versions. If you don't already have a Microsoft 365 subscription to use for development, you might qualify for a Microsoft 365 E5 developer subscription through the Microsoft 365 Developer Program; for details, see the FAQ. Alternatively, you can sign up for a 1-month free trial or purchase a Microsoft 365 plan.

• If your add-in shows an error (for example, "This add-in could not be started. Close this dialog to ignore the problem or click "Restart" to try again.") when you press F5 or choose Debug > Start Debugging in Visual Studio, see Debug Office Add-ins in Visual Studio for other debugging options.

See also

• Office Add-ins platform overview
• Develop Office Add-ins
• Using Visual Studio Code to publish