How To Create Outlook Add-ins

Introduction

In this article, we will see how to create an Outlook add-in and how to run it.

Outlook add-in is an application that we can run inside of the outlook to increase the functionality. We can build Outlook add-in by using HTML, CSS, JavaScript, C#, or any other technology. It does not matter what platform we are using it will work (outlook for Windows, mac, web- office 365 account).

Steps to Create Outlook Add-in

Step 1. We need to install the Yeoman generator (yo) and generator office globally using npm.

Step 2. Run npm install -g yo generator-office to install yo and office project template generator globally.

Step 3. Run your office command to create an add-in project.

Step 4. When you run the above command, it will ask for the below information.

1. Choose a project type: Office Add-in Task Pane project
2. Choose a script type: JavaScript
3. What do you want to name your add-in?: My Office Add-in
4. Which Office client application would you like to support?: Outlook

Once you complete the wizard, the generator will create the project and install supporting Node components.

Step 5. Once the project is successfully created, run the npm start command and it will start the local web server and your add-in will be side-loaded.

Step 6. Go to your Outlook. You can open Outlook Direct using this link https://outlook.office.com/mail/inbox

Step 7. Create a new message.

Step 8. Click on the ellipsis from the bottom of the new message.

Step 9. Then select Get Add-ins from the menu.

Step 10. Select My Add-ins from the dialog box.

Step 11. Then go to the Custom add-ins section at the bottom of the dialog box. Then select the Add a custom add-in link, and then select Add from the file.

Step 12. Select a manifest file from your custom ad-in. When the file is successfully uploaded the below dialog will open then select the install button.

Step 13. Once installation is done open any mail from the inbox and click on the ellipsis, and your custom ad-in appears.

Conclusion

This is how we can easily create an Outlook add-in and test it from your local browser