Criar um suplemento do Outlook para um provedor de reunião online

Configurar uma reunião online é uma experiência fundamental para um usuário do Outlook e é fácil criar uma reunião do Teams com o Outlook. No entanto, criar uma reunião online no Outlook com um serviço que não seja da Microsoft pode ser complicado. Ao implementar esse recurso, os provedores de serviços podem simplificar a criação de reuniões online e a experiência de junção para seus usuários de suplemento do Outlook.

Importante

Esse recurso tem suporte em Outlook na Web, Windows (clássico e novo (versão prévia)), Mac, Android e iOS com uma assinatura do Microsoft 365.

Neste artigo, você aprenderá a configurar seu suplemento do Outlook para permitir que os usuários organizem e participem de uma reunião usando seu serviço de reunião online. Ao longo deste artigo, usaremos um provedor de serviços de reunião online fictício, "Contoso".

Configurar seu ambiente

Conclua o início rápido do Outlook que cria um projeto de suplemento com o gerador Yeoman para Suplementos do Office.

Configurar o manifesto

Para permitir que os usuários criem reuniões online com seu suplemento, você deve configurar o manifesto. A marcação é diferente dependendo de duas variáveis:

Se o suplemento usar um manifesto XML e o suplemento só tiver suporte em Outlook na Web, Windows (clássico e novo (versão prévia)) e Mac, selecione a guia Windows, Mac e Web para obter diretrizes. No entanto, se o suplemento também tiver suporte no Outlook no Android e no iOS, selecione a guia Móvel .

Se o suplemento usar o manifesto unificado (versão prévia), selecione a guia Manifesto Unificado para Microsoft 365 (versão prévia do desenvolvedor ).

Importante

Os provedores de reunião online ainda não têm suporte para o manifesto unificado (versão prévia). Estamos trabalhando para fornecer esse suporte em breve.

  1. No editor de código, abra o projeto de início rápido do Outlook que você criou.

  2. Abra o arquivo manifest.xml localizado na raiz do projeto.

  3. Selecione o nó VersionOverrides> inteiro< (incluindo marcas abertas e fechadas) e substitua-o pelo XML a seguir.

<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
    <Description resid="residDescription"></Description>
    <Requirements>
      <bt:Sets>
        <bt:Set Name="Mailbox" MinVersion="1.3"/>
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">
        <DesktopFormFactor>
          <FunctionFile resid="residFunctionFile"/>
          <ExtensionPoint xsi:type="AppointmentOrganizerCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="apptComposeGroup">
                <Label resid="residDescription"/>
                <Control xsi:type="Button" id="insertMeetingButton">
                  <Label resid="residLabel"/>
                  <Supertip>
                    <Title resid="residLabel"/>
                    <Description resid="residTooltip"/>
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="icon-16"/>
                    <bt:Image size="32" resid="icon-32"/>
                    <bt:Image size="64" resid="icon-64"/>
                    <bt:Image size="80" resid="icon-80"/>
                  </Icon>
                  <Action xsi:type="ExecuteFunction">
                    <FunctionName>insertContosoMeeting</FunctionName>
                  </Action>
                </Control>
              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="icon-16" DefaultValue="https://contoso.com/assets/icon-16.png"/>
        <bt:Image id="icon-32" DefaultValue="https://contoso.com/assets/icon-32.png"/>
        <bt:Image id="icon-48" DefaultValue="https://contoso.com/assets/icon-48.png"/>
        <bt:Image id="icon-64" DefaultValue="https://contoso.com/assets/icon-64.png"/>
        <bt:Image id="icon-80" DefaultValue="https://contoso.com/assets/icon-80.png"/>
      </bt:Images>
      <bt:Urls>
        <bt:Url id="residFunctionFile" DefaultValue="https://contoso.com/commands.html"/>
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="residDescription" DefaultValue="Contoso meeting"/>
        <bt:String id="residLabel" DefaultValue="Add a contoso meeting"/>
      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="residTooltip" DefaultValue="Add a contoso meeting to this appointment."/>
      </bt:LongStrings>
    </Resources>
  </VersionOverrides>
</VersionOverrides>

Dica

Para saber mais sobre manifestos para suplementos do Outlook, confira Manifestos de suplementos do Office e Adicionar suporte para comandos de suplemento no Outlook em dispositivos móveis.

Implementar a adição de detalhes da reunião online

Nesta seção, saiba como seu script de suplemento pode atualizar a reunião de um usuário para incluir detalhes da reunião online. O seguinte se aplica a todas as plataformas com suporte.

  1. No mesmo projeto de início rápido, abra o arquivo ./src/commands/commands.js no editor de código.

  2. Substitua todo o conteúdo do arquivocommands.js pelo JavaScript a seguir.

    // 1. How to construct online meeting details.
    // Not shown: How to get the meeting organizer's ID and other details from your service.
    const newBody = '<br>' +
        '<a href="https://contoso.com/meeting?id=123456789" target="_blank">Join Contoso meeting</a>' +
        '<br><br>' +
        'Phone Dial-in: +1(123)456-7890' +
        '<br><br>' +
        'Meeting ID: 123 456 789' +
        '<br><br>' +
        'Want to test your video connection?' +
        '<br><br>' +
        '<a href="https://contoso.com/testmeeting" target="_blank">Join test meeting</a>' +
        '<br><br>';
    
    let mailboxItem;
    
    // Office is ready.
    Office.onReady(function () {
            mailboxItem = Office.context.mailbox.item;
        }
    );
    
    // 2. How to define and register a function command named `insertContosoMeeting` (referenced in the manifest)
    //    to update the meeting body with the online meeting details.
    function insertContosoMeeting(event) {
        // Get HTML body from the client.
        mailboxItem.body.getAsync("html",
            { asyncContext: event },
            function (getBodyResult) {
                if (getBodyResult.status === Office.AsyncResultStatus.Succeeded) {
                    updateBody(getBodyResult.asyncContext, getBodyResult.value);
                } else {
                    console.error("Failed to get HTML body.");
                    getBodyResult.asyncContext.completed({ allowEvent: false });
                }
            }
        );
    }
    // Register the function.
    Office.actions.associate("insertContosoMeeting", insertContosoMeeting);
    
    // 3. How to implement a supporting function `updateBody`
    //    that appends the online meeting details to the current body of the meeting.
    function updateBody(event, existingBody) {
        // Append new body to the existing body.
        mailboxItem.body.setAsync(existingBody + newBody,
            { asyncContext: event, coercionType: "html" },
            function (setBodyResult) {
                if (setBodyResult.status === Office.AsyncResultStatus.Succeeded) {
                    setBodyResult.asyncContext.completed({ allowEvent: true });
                } else {
                    console.error("Failed to set HTML body.");
                    setBodyResult.asyncContext.completed({ allowEvent: false });
                }
            }
        );
    }
    

Teste e validação

Siga as diretrizes habituais para testar e validar seu suplemento e, em seguida, carregar o manifesto em Outlook na Web, no Windows (clássico ou novo (versão prévia)) ou no Mac. Se o suplemento também for compatível com dispositivos móveis, reinicie o Outlook em seu dispositivo Android ou iOS após o sideload. Depois que o suplemento estiver sideload, crie uma nova reunião e verifique se o alternância do Microsoft Teams ou do Skype é substituído pelo seu.

Criar interface do usuário da reunião

Como organizador da reunião, você deve ver telas semelhantes às três imagens a seguir ao criar uma reunião.

A tela criar reunião no Android com o alternância contoso.A tela criar reunião no Android com um alternância contoso de carregamento.A tela criar reunião no Android com o alternância Contoso.

Ingressar na interface do usuário da reunião

Como participante da reunião, você deve ver uma tela semelhante à imagem a seguir ao exibir a reunião.

A tela de reunião de junção no Android.

Importante

O botão Ingressar só tem suporte no Outlook na Web, no Mac, no Android, no iOS e no novo Outlook no Windows (versão prévia). Se você vir apenas um link de reunião, mas não vir o botão Ingressar em um cliente com suporte, pode ser que o modelo de reunião online para seu serviço não esteja registrado em nossos servidores. Consulte a seção Registrar seu modelo de reunião online para obter detalhes.

Registrar seu modelo de reunião online

Registrar seu suplemento de reunião online é opcional. Ela só se aplica se você quiser exibir o botão Ingressar em reuniões, além do link de reunião. Depois de desenvolver seu suplemento de reunião online e desejar registrá-lo, crie um problema do GitHub usando as diretrizes a seguir. Entraremos em contato com você para coordenar um linha do tempo de registro.

Importante

O botão Ingressar só tem suporte no Outlook na Web, no Mac, no Android, no iOS e no novo Outlook no Windows (versão prévia).

  1. Crie um novo problema do GitHub.
  2. Defina o título do novo problema como "Outlook: Registre o modelo de reunião online para meu serviço", substituindo my-service pelo nome do serviço.
  3. No corpo do problema, substitua o texto existente pela cadeia de caracteres definida na newBody variável ou semelhante da seção Implementar a adição de detalhes da reunião online anteriormente neste artigo.
  4. Clique em Enviar novo problema.

Uma nova tela de problemas do GitHub com o conteúdo de exemplo da Contoso.

APIs disponíveis

As APIs a seguir estão disponíveis para esse recurso.

Restrições

Várias restrições se aplicam.

  • Aplicável somente a provedores de serviços de reunião online.
  • Somente os suplementos instalados pelo administrador serão exibidos na tela de composição da reunião, substituindo a opção padrão teams ou Skype. Os suplementos instalados pelo usuário não serão ativados.
  • O ícone de suplemento deve estar em escala de cinza usando o código #919191 hex ou o equivalente em outros formatos de cor.
  • Há suporte para apenas um comando de função no modo Organizador de Compromissos (compose).
  • O suplemento deve atualizar os detalhes da reunião no formulário de compromisso dentro do período limite de um minuto. No entanto, qualquer tempo gasto em uma caixa de diálogo, o suplemento aberto para autenticação, por exemplo, é excluído do período limite.

Confira também