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.

Project	Description
Add-in project	Contains only an XML-formatted add-in only manifest file, which contains all the settings that describe your add-in. These settings help the Office application determine when your add-in should be activated and where the add-in should appear. Visual Studio generates the contents of this file for you so that you can run the project and use your add-in immediately. Change these settings any time by modifying the XML file.
Web application project	Contains the content pages of your add-in, including all the files and file references that you need to develop Office-aware HTML and JavaScript pages. While you develop your add-in, Visual Studio hosts the web application on your local IIS server. When you're ready to publish the add-in, you'll need to deploy this web application project to a web server.

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.

   

Note

To see the console.log output, you'll need a separate set of developer tools for a JavaScript console. To learn more about F12 tools and the Microsoft Edge DevTools, see Debug add-ins using developer tools in Microsoft Edge.

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.

• 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