Error Loading Word Add-in Eventually Works After Retry & Start - office-addins

Question

My add-in loads properly with Word on Windows, but shows loading errors through Word Online (tested with Chrome, Firefox & Edge) even though clicking through the prompt buttons eventually loads the add-in and everything works as expected. This is what I am seeing in the add-in just loading a usage page (https://office.flexxlegal.com/Home/Usage):
Page loads in the taskpane with a grey overlay & loading animation
Receive Add-in Error message - Something went wrong and we couldn't start this add-in. Please try again later or contact your system administrator.
Click the Retry button
Page is displayed again in the taskpane with the overlay and loading animation
Receive Add-in Error message - This add-in may not load properly, but you can still try to start it.
Click the Start button
The page loads and everything works as expected
Here are the parts of the app manifest related to his control:
<Control xsi:type="Button" id="Flexx.Help">
<Label resid="Flexx.Help.Label" />
<Supertip>
<!-- ToolTip title. resid must point to a ShortString resource. -->
<Title resid="Flexx.Help.Label" />
<!-- ToolTip description. resid must point to a LongString resource. -->
<Description resid="Flexx.Help.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Flexx.qicon_16x16" />
<bt:Image size="32" resid="Flexx.qicon_32x32" />
<bt:Image size="80" resid="Flexx.qicon_80x80" />
</Icon>
<!-- This is what happens when the command is triggered (E.g. click on the Ribbon). Supported actions are ExecuteFunction or ShowTaskpane. -->
<Action xsi:type="ShowTaskpane">
<TaskpaneId>FLTaskPane</TaskpaneId>
<!-- Provide a url resource id for the location that will be displayed on the task pane. -->
<SourceLocation resid="Flexx.Help.Url" />
</Action>
</Control>
<Resources>
<bt:Images>
<bt:Image id="Flexx.qicon_16x16" DefaultValue="https://office.flexxlegal.com/assets/img/Q16.png" />
<bt:Image id="Flexx.qicon_32x32" DefaultValue="https://office.flexxlegal.com/assets/img/Q32.png" />
<bt:Image id="Flexx.qicon_80x80" DefaultValue="https://office.flexxlegal.com/assets/img/Q80.png" />
</bt:Images>
<bt:Urls>
<bt:Url id="Flexx.Help.Url" DefaultValue="https://office.flexxlegal.com/Home/Usage" />
</bt:Urls>
<!-- ShortStrings max characters==125. -->
<bt:ShortStrings>
<bt:String id="Flexx.Help.Label" DefaultValue="Getting Started" />
</bt:ShortStrings>
<!-- LongStrings max characters==250. -->
<bt:LongStrings>
<bt:String id="Flexx.Help.Tooltip" DefaultValue="Click to view usage information to get started with this FlexxLegal add-in." />
</bt:LongStrings>
</Resources>
With the webpage being loaded there is no code-behind, no javascript, just a static HTML page. Any insight into what the issue might be, or how I would go about determining the issue?
Thanks,
Ryan

Answer 1

With the webpage being loaded there is no code-behind, no javascript, just a static HTML page
This is your issue. Your add-in's pages must reference the office.js library and include an Office.initialize handler.
I suggest reviewing the documentation for instructions on how Office Web Add-ins work: Understanding the JavaScript API for Office.