How To Create Outlook Ad-In

Introduction

In this article, we will see how to create 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, and 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 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 yo office command to create an add-in project.

Step 4

When you run the above command, it will ask for 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 npm start command and it will start 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 ellipsis from 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 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 file.

Step 12

Select 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 inbox and click on ellipsis, your custom ad-in appears.

Conclusion

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