MS Office 2016 Build a ribbon using office-js

Question

I know you can build a full on ribbon using VSTO and COMM plugins. Are you able to build these using the new office-js for MS Word 2016?

I could not find any way to do so. Alternatively, I was wondering if we could build a VSTO plugin ribbon which opens up our office-js plugin?

We just want the ribbon to look nice rather than being in the Insert -> My Add-ins -> as follows:

Below is what I have following the instructions on https://learn.microsoft.com/en-us/office/dev/add-ins/design/contextual-tabs:

<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="TaskPaneApp">
  <Id>260eddsdd5</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Contoso</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue=" Local"/>
  <Description DefaultValue=" Add-in"/>
  <IconUrl DefaultValue="https://localhost/dw/assets/icon-80.png"> </IconUrl>
  <HighResolutionIconUrl DefaultValue="https://localhost/dw/assets/icon-80.png"/>
  <SupportUrl DefaultValue="https://help"/>
  <AppDomains>
    <AppDomain>localhost/dw</AppDomain>
  </AppDomains>
  <Hosts>
    <Host Name="Document"/>
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://localhost/dw/taskpane.html"/>
  </DefaultSettings>
  <Permissions>ReadWriteDocument</Permissions>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Hosts>
      <Host xsi:type="Document">
        <DesktopFormFactor>
          <GetStarted>
            <Title resid="GetStarted.Title"/>
            <Description resid="GetStarted.Description"/>
            <LearnMoreUrl resid="GetStarted.LearnMoreUrl"/>
          </GetStarted>
          <FunctionFile resid="Commands.Url"/>
          <ExtensionPoint xsi:type="PrimaryCommandSurface">
            <CustomTab id="TabCustom1">
              <Group id="myCustomTab.grp1">
                <Label resid="residCustomTabGroupLabel"/>
                <Icon>
                  <bt:Image size="16" resid="Icon.16x16"/>
                  <bt:Image size="32" resid="Icon.32x32"/>
                  <bt:Image size="80" resid="Icon.80x80"/>
                </Icon>
                <Control xsi:type="Button" id="TaskpaneButton">
                  <Label resid="TaskpaneButton.Label"/>
                  <Supertip>
                    <Title resid="TaskpaneButton.Label"/>
                    <Description resid="TaskpaneButton.Tooltip"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16"/>
                    <bt:Image size="32" resid="Icon.32x32"/>
                    <bt:Image size="80" resid="Icon.80x80"/>
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <TaskpaneId>ButtonId1</TaskpaneId>
                    <SourceLocation resid="Taskpane.Url"/>
                  </Action>
                </Control>
                <OfficeControl id="Superscript" />
              </Group>
              <OfficeGroup id="Paragraph" />
              <Label resid="customTabLabel1" />
            </CustomTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https:///icon-16.png"/>
        <bt:Image id="Icon.32x32" DefaultValue="https://icon-32.png"/>
        <bt:Image id="Icon.80x80" DefaultValue="https://icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812"/>
        <bt:Url id="Commands.Url" DefaultValue="https://localhost/dw/commands.html"/>
        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost/dw/taskpane.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="GetStarted.Title" DefaultValue="Get started !"/>
        <bt:String id="CommandsGroup.Label" DefaultValue="Click"/>
        <bt:String id="TaskpaneButton.Label" DefaultValue="Click"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="GetStarted.Description" DefaultValue=" add-in loaded succesfully. Go to the HOME tab and click the button to get started."/>
        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane"/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</OfficeApp>

Answer 1

Yes. You can customize the ribbon with an Office Web Add-in. Custom buttons and menus on the ribbon are called Add-in Commands and you configure them in the add-in's manifest. For details, start with Add-in Commands and Create Add-in Commands.