Como personalizar as configurações de marca para seu URL intuitivo


Visão geral

Observação: é altamente recomendável que você tenha experiência com Web design (HTML e CSS) antes de personalizar as configurações de marca. Se você entrar em contato com o Suporte Zoom para obter ajuda, nós nos esforçaremos ao máximo para responder às suas perguntas, mas não podemos garantir nenhuma solução. Consulte um desenvolvedor Web se estiver tendo problemas com seu HTML/CSS.

Após um URL intuitivo ter sido aprovado, você poderá personalizá-lo com a marca da sua organização. Consulte nossas diretrizes de marca antes de personalizar sua página com o logotipo Zoom ou outros materiais de marketing.

Todas as alterações feitas na marca só se aplicarão ao acessar o Zoom Web Portal a partir do seu URL intuitivo (por exemplo, suaempresa.zoom.us) A marca não se aplica ao acessar o Zoom Web Portal via zoom.us.

Observação: no momento, JavaScript não é compatível com marcas personalizadas.

Pré-requisitos

Este artigo abrange:

Como acessar as configurações de marca

  1. Inicie sessão no Zoom Web Portal.
  2. No menu de navegação, clique em Avançado e depois em Branding.

Como fazer upload de imagens

Antes de personalizar a marca, faça upload do logotipo da sua organização e das imagens que você usará como a imagem de fundo.

  1. Inicie sessão no Zoom Web Portal.
  2. No menu de navegação, clique em Avançado e depois em Branding.
  3. Clique na aba Imagens.
  4. Navegue no seu computador e selecione a imagem que deseja enviar.
  5. Quando o upload for concluído, os arquivos serão exibidos na lista. O URL da imagem é exibido na coluna Caminho.

Como personalizar a página de destino

A página de destino é a página principal do URL intuitivo da sua organização.Por padrão, a página de destino tem a seguinte aparência:

Para personalizar o HTML da página de destino e a CSS embutida:

  1. Inicie sessão no Zoom Web Portal.
  2. No menu de navegação, clique em Avançado e depois em Branding.
  3. Clique na aba Página de destino.
  4. Siga as seções abaixo para fazer alterações básicas na página de destino de forma que ela corresponda à marca da sua organização.
    Observação: para encontrar os atributos abaixo mais rapidamente, pressione Ctrl + F e digite o nome do atributo. Em seguida, siga as instruções para atualizar o atributo.

Imagem de fundo

Nome do atributo: background-image

Para alterar a imagem de fundo, atualize o URL entre aspas com o URL da imagem de fundo carregada. Para encontrar esse URL, vá até a aba Imagens e copie o link na coluna Caminho.

Exemplo:

background-image: url("https://yourorganization.zoom.us/account/branding/p/backgroundimage.jpg");

Cor do texto do conteúdo

Para alterar a cor do texto do conteúdo da página de destino (sem incluir os botões), adicione o atributo de cor (color) a .content-body { }. Use uma cor mais clara se o fundo for escuro.

Exemplo:

.content-body {
 display: table-cell;
 vertical-align: middle;
 color: white;
}

Título da página

Nome do atributo: title

O título da página mudará o que será visto em uma aba do navegador para o nome da página. Insira o título da sua página entre <title> e </title>.

Exemplo:

<title>Videoconferência, Webconferência, Reuniões On-line, Compartilhamento de Tela</title> <!--customize landing page title-->

branding-edittitle.gif

 

Cor de fundo do botão

Nome do atributo: background-color (procure o atributo background-color aninhado em .button)

Para alterar a cor de fundo dos três botões (Acessar, Organizar e Iniciar sessão), você precisa especificar as cores usando valores hexadecimais de cor, por exemplo, #FFFFFF é branco. Use o site Colorpicker para identificar e selecionar cores por valor hexadecimal.

.button {
 width: 80px;
 background-color: #000000; /*customize button color */
 border-color: #2D8CFF;
 padding: 12px 20px;
 display: inline-block;
 text-align: center;
 margin: 10px 0;
 transition: .3s ease;
}

Cor de fundo do botão ao passar o mouse

Nome do atributo: background-color (aninhado em .button.hover)

Para alterar a cor do botão ao passar o ponteiro do mouse sobre ele, especifique as cores usando valores hexadecimais de cor, por exemplo, #FFFFFF é branco. Use o site Colorpicker para identificar e selecionar cores por valor hexadecimal.

Exemplo:

.button:hover {
  background-color: #eb9834; /*customize button color */
 }

Cor do texto do botão

Nome do atributo: color (aninhado em .btn-text)

Altere a cor do texto dentro do botão. Se você usou uma cor mais escura como fundo do botão, defina o atributo como branco. Se você tiver uma cor de fundo mais clara, defina o atributo como preto.Você também pode especificar um valor hexadecimal personalizado.Use o site Colorpicker para identificar e selecionar cores por valor hexadecimal.

Exemplo:

.btn-text {
 color: #008BFF; /*personalizar cor de fonte do botão */
 font-size: 17px;
}

Logotipo

Altere o logotipo que aparece acima dos três botões.Para encontrar o URL do logotipo, vá até a aba Imagens e copie o link na coluna Caminho.

Observação: por padrão, o logotipo é redimensionado para 140 x 31,5 px. Isso provavelmente distorcerá seu logotipo personalizado. Para remover esse recurso, remova class="zoom-logo" após o URL da imagem no HTML da página de destino.

Exemplo:

<div class="row">
  <img src="https://zoom.us/account/branding/p/1c7dfaf5-2646-4224-92e0-5abef82036b1.png" alt="Zoom Logo"> <!--customize company logo-->
<div class="row">

 

Como personalizar o cabeçalho, rodapé e barra lateral do Web Portal

Você pode personalizar o cabeçalho e o rodapé que aparecem em todo o Web Portal quando acessado a partir do seu URL intuitivo.

Observação: essas configurações não afetam sua página de destino.

  1. Inicie sessão no Zoom Web Portal.
  2. No menu de navegação, clique em Avançado e depois em Branding.
  3. Clique na aba Cabeçalho/Rodapé/Barra lateral.
  4. Siga as seções abaixo:
<div id="footer" class="container">
</div>

Como usar CSS personalizada

Você pode personalizar a CSS usada no Web Portal.

Observação: a CSS personalizada não se aplica à página de destino. Você pode personalizar a CSS embutida para sua página de destino.

  1. Inicie sessão no Zoom Web Portal.
  2. No menu de navegação, clique em Avançado e depois em Branding.
  3. Clique na aba CSS personalizada.
  4. Clique em Editar para selecionar a CSS que deseja personalizar.
  5. Use a CSS personalizada para definir outros seletores de CSS.

Como personalizar modelos de e-mail

Você pode personalizar modelos de e-mails administrativos gerais, por exemplo, e-mails enviados quando um usuário redefine a senha ou se inscreve.

  1. Inicie sessão no Zoom Web Portal.
  2. No menu de navegação, clique em Avançado e depois em Branding.
  3. Clique na aba E-mails.
  4. Clique em Editar ao lado do modelo que deseja editar.
    Observação: você pode usar variáveis de e-mail personalizadas no modelo.

Como personalizar modelos de e-mail de convite para reunião

Você também pode personalizar os modelos de e-mail de convite para reunião no nível da conta ou do grupo.

  1. Inicie sessão no Zoom Web Portal.
  2. No menu de navegação, acesse as configurações de conta ou grupo:
  3. Clique na aba Reunião.
  4. Na seção Branding de e-mail de convite,
  5. clique em Editar no modelo de e-mail que deseja atualizar.Saiba mais sobre o modelo de e-mail de agendamento de reunião.
  6. Clique em Aplicar alterações e depois em Concluído.