Sample code for the Web Widget that promote the Office add-in.

The webpage will show the add-in name, a few details about the add-in functionality for highlight, a dropdown button to install and use the add-in and an image to demo the add-in. This is what the UI looks like.

Important

To use this sample code, please follow the Partner-Led Marketing Guidelines.

Tip

If you want a simple trial on the dropdown button link that enables user to install and use add-in, please clone https://github.com/OfficeDev/OfficeJSAddinWidget/blob/main/LinkGenerator.html to your local, open with browser app and input the information as the UI shows.

Usage

1. Download the Example-ScriptLab.html file and go to <script> at line 62.

2. Config the paramenters under "Paramenters that need to config" part.
   a. addinId
   This is the unique add-in ID. You can get the correct value by following below steps.
    1) Go to https://appsource.microsoft.com/en-US/ from your browser.
    2) Input your Office add-in name in the search bar on top center of AppSource homepage.
    3) Click your add-in in the seach results.
    4) The add-in information page will be automatically displayed in current tab.
    5) The add-in ID is in the URL.
   For example, if the URL is https://appsource.microsoft.com/en-US/product/office/WA104380862?tab=Overview, then "WA104380862" is the add-in ID that you should input for this parameter in sample code.

   b. addinName
   This is the add-in name. You can get the correct value by following below steps.
    1) Go to the webpage in 2.a.4).
    2) The add-in name is displayed as the title on right of the add-in icon.
   For example, if the webpage is https://appsource.microsoft.com/en-US/product/office/WA104380862?tab=Overview, then "Script Lab, a Microsoft Garage project" is the add-in ID that you should input for this parameter in sample code.

   c. wordOnlineSupported, excelOnlineSupported, powerpointOnlineSupported
   This is the Office products that this add-in supports. You can get the correct value by following below steps.
    1) Go to the webpage in 2.a.4).
    2) Click "details + support" tab on the webpage.
    3) Scroll down to "Products supported" section.
     - If "Word on the web" is in the list, then set wordOnlineSupported to true. Otherwise, set it to false.
     - If "Excel on the web" is in the list, then set excelOnlineSupported to true. Otherwise, set it to false.
     - If "PowerPoint on the web" is in the list, then set powerpointOnlineSupported to true. Otherwise, set it to false.
   

   d. linkAddInAppSource
   If you would like to show the link to Office AppSource, then set linkAddInAppSource to true. Otherwise, set it to false.

   e. addinDetails
   This is for descriptions about the add-in functionalities displayed on the webpage.

   f. demoImage
   This is the image for the add-in that display on the webpage.

3. Save the html file and open by browser. Verify the UI and dropdown links works for your scenario.

4. Make any additional changes to the sample code as you need, and integrete it into your website.

Special Notice

The deeplink can successfully open an Office document with your add-in and the end users can use your add-in for below scenarios only.

1. The add-in is public published, so that it can be found from Office AppSource https://appsource.microsoft.com/.

2. The Office store is enabled for the end user.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.