Gerenciar Múltiplos Perfis de Usuário

​

Usando o Dashboard

​

Criar um Novo Perfil

​

Alternar para o Novo Perfil

​

Obter a Profile Key

​

Convidar um Membro da Equipe

​

Status do Membro da Equipe

​

Membros da Equipe Entrando em Contato com o Suporte

​

Reativar um Perfil de Usuário Suspenso

​

Motivo da Suspensão

1. Pesquise em sua caixa de entrada usando o RefId do Perfil de Usuário suspenso
2. O assunto do e-mail indicará claramente que uma suspensão ocorreu

​

Reativar um Perfil de Usuário Suspenso

1. Fazendo login no Dashboard e indo para a página User Profiles.
2. Encontrando os Perfis de Usuário suspensos clicando na aba “Suspended” ou pesquisando pelo RefId do Perfil de Usuário, incluído no e-mail.
3. Cancelando a suspensão do Perfil de Usuário clicando no botão “Unsuspended”.
4. Revisando e aceitando a certificação de conformidade.

​

Gerenciando Perfis de Usuário Ativos

​

White-Label da Página de Conexão de Contas

• Adicionar ou remover o logotipo da sua empresa e definir sua altura.
• Escolher quais redes sociais seus usuários podem conectar.
• Definir o idioma da página.
• Exibir seus próprios links de ajuda ou ocultar os da Ayrshare.
• Definir os cabeçalhos superior e sub por Perfil de Usuário (por exemplo, o nome do cliente ou empresa).
• Controlar o redirecionamento do botão Fechar de volta para seu app.
• Personalizar os modais do Instagram e Telegram com seu próprio HTML.

• Aplicar um arquivo CSS personalizado para controlar cores, fontes e quais recursos aparecem, usando class hooks documentados para reestilizar os próprios botões de conexão.
• Colorir os diálogos de vinculação — seletores de página, formulários de credenciais e confirmações — para combinar com sua página.
• Definir seu próprio título de página, texto do botão Fechar e favicon.
• Adicionar texto ou HTML de rodapé personalizado.

​

Configurações

​

Demo em Vídeo das Opções de Personalização da Página de Vinculação

​

Restringir Acesso ao Perfil de Usuário

​

Restringir Acesso ao Perfil Primário

​

Restringir Acesso do Membro da Equipe

​

Atualizar Logotipo na Página de Vinculação Social

​

Definir Acesso às Redes Sociais

​

Definir Idioma para a Vinculação Social

• Inglês
• Árabe
• Chinês (Simplificado)
• Francês
• Alemão
• Italiano
• Japonês
• Português
• Espanhol

• Traduzir Respostas de Mensagens de Erro da API
• Traduzir um Post

​

Exibir Localização da Página

​

Visibilidade dos Links de Ajuda

​

E-mails Alternativos para Alertas

​

Login do Instagram

​

Login Direto do Instagram vs Autenticação via Página do Facebook

​

Limitações de Recursos com o Login Direto do Instagram

• Dados de Marca/Usuário - Não é possível recuperar informações da conta do Instagram por meio dos endpoints de marca.
• Busca de Hashtags - Não é possível buscar hashtags no Instagram.
• Colaborações - Não é possível convidar colaboradores para posts do Instagram.
• Marcação de Localização - Não é possível adicionar tags de localização aos posts do Instagram.
• idId- ID Legado de Usuário do Instagram - campo não retornado nas análises sociais do Instagram.

​

Qual Método Você Deve Escolher?

• Habilite o Login Direto do Instagram se você precisar apenas da funcionalidade básica de publicação e não precisar dos recursos avançados listados acima.
• Desabilite o Login Direto do Instagram (use autenticação via Página do Facebook) se precisar acessar todos os recursos do Instagram, incluindo busca de hashtags, colaborações, marcação de localização ou recuperação de dados de marca.

​

Modais Personalizados

<div>
  <span class="underline">
    Everyone agrees that
    <a target="_blank" href="https://www.ayrshare.com">Ayrshare Rocks!</a>
  </span>
</div>

span.underline {
  color: blue;
  text-decoration: underline;
}
span.underline a {
  color: blue;
  text-decoration: none;
}

​

Usando a API

​

Criar e Gerenciar Perfis

​

Obter a Profile Key

​

Habilitar Mensagens

​

Personalização Max Pack

​

Personalizar CSS

​

CSS Class Hooks

.social-linking-page-column {
  max-width: none !important;
}

.social-account-icon {
  width: 24px !important;
  height: 24px !important;
}
.social-account-icon :is(svg, img) {
  width: 21px !important;
  height: 21px !important;
}

.social-account-card {
  --ayr-pill-bg: #1b3a2b;
  --ayr-pill-fg: #79bd96;
}

<div class="main-content">
  <div class="social-linking-page-column">
    <div class="social-linking-header">
      <div><img class="company-logo" /></div>
      <div>
        <h1 class="heading-social-accounts">…</h1>
        <div class="additional-info additional-info__body">…</div>
      </div>
    </div>
    <div class="social-accounts-grid">
      <div class="social-account-card-wrapper">
        <div>
          <!-- unnamed clickable wrapper, always the full width of the cell -->
          <div class="social-account-card unlinked-card" data-platform="tiktok">
            <div>
              <div class="social-account-icon">…</div>
              <div>
                <p class="social-account-name">TikTok</p>
                <p class="click-to-link">…</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      …
    </div>
    <div><button class="close-button">…</button></div>
  </div>
</div>

.social-linking-page-column {
  display: flex !important;
  flex-direction: column !important;
}
.social-linking-header {
  display: contents !important;
}
/* Your logo, the instruction block and the Close button each sit inside a
   further wrapper that has no name of its own. Flatten those too, or `order`
   below has nothing to compare. */
.social-linking-header > div,
.social-linking-page-column > div:has(> .close-button) {
  display: contents !important;
}

.company-logo {
  order: 0 !important;
}
.social-accounts-grid {
  order: 1 !important;
}
.close-button {
  order: 2 !important;
}
.additional-info {
  order: 3 !important;
}

​

Linking Dialog Colors

:root {
  --ayr-dialog-backdrop: rgba(10, 10, 10, 0.66);
  --ayr-dialog-bg: #161616;
  --ayr-dialog-fg: #e7eae6;
  --ayr-dialog-muted-fg: #9aa0a6;
  --ayr-dialog-border: #262626;
  --ayr-dialog-radius: 22px;
  --ayr-dialog-accent: #79bd96;
  --ayr-dialog-input-bg: #0f0f0f;
  --ayr-dialog-input-fg: #e7eae6;
  --ayr-dialog-input-border: #3a3a3a;
}

​

Atualizando uma Folha de Estilos Antiga

• Os nomes de classe gerados internamente da página. Nomes de classe que você pode ter copiado das ferramentas de desenvolvedor do navegador (por exemplo, qualquer coisa começando com chakra-) pertencem ao framework com o qual a página é construída, não a um contrato público. Esses nomes de classe não existem mais e não há equivalente para substituir. Reescreva a regra usando os seletores das tabelas acima.
• Seletores de elemento ou atributo simples como div > div ou button[type="button"]. A estrutura da página não é um contrato e mudou, então uma regra que conta níveis a partir de .main-content agora atinge um elemento diferente do que atingia antes. Este é o motivo mais comum de uma regra de layout parecer não fazer nada ou fazer algo inesperado.
• Regras posicionais que contavam elementos para alcançar a grade de cards. Antes de a grade e as células terem nomes, a única maneira de alcançá-las era contar níveis a partir de .main-content, usando regras no formato .main-content > div, .main-content > div > div, .main-content > div > div > div ou .main-content > div:not(.additional-info). Essas regras ainda correspondem a algo, e é por isso que são fáceis de não perceber: .main-content ainda está lá, mas um card agora fica cinco níveis abaixo dela, então cada regra cai um ou dois níveis fora do alvo. Uma regra voltada para a grade pode acabar no wrapper que contém o cabeçalho da página, e uma regra voltada para um card pode acabar redimensionando todos os cards de uma vez. Substitua-as pelos dois nomes que agora existem para isso: .social-accounts-grid para a grade e .social-account-card-wrapper para a célula que contém um card. Veja Alterar o Layout dos Cards.
• Regras que só funcionam em um item flex: z-index, order, align-self, flex. Estas são as mais difíceis de identificar, porque o seletor ainda corresponde e a declaração ainda é válida — ela simplesmente não tem efeito. Na página antiga, seu logo, título, bloco de instruções e botão Close eram filhos diretos de .main-content, que sua folha de estilos transformava em um contêiner flex, então cada um deles era um item flex. Um item flex respeita z-index mesmo sem position, e respeita order e align-self. Na página reconstruída, esses quatro ficam dentro de wrappers, então não são mais itens flex e todas as quatro propriedades deixam de se aplicar a eles. O sintoma geralmente é algo desaparecendo em vez de se mover. Um z-index no seu logo, por exemplo, é o que costumava elevá-lo acima de uma barra de cabeçalho fixa desenhada com .main-content::before — sem ele, a barra é pintada diretamente sobre o logo e o logo parece estar totalmente ausente, mesmo tendo sido carregado corretamente e no tamanho certo. Duas correções, qualquer uma serve:
  /* 1. Give the element a position, so z-index applies on its own. */
  .company-logo {
    position: relative;
    z-index: 2;
  }
  
  /* 2. Or flatten the wrappers, which makes these elements flex items again
        and restores z-index, order and align-self together. This is the same
        recipe as Change the order of the page, above. */
  .social-linking-page-column {
    display: flex !important;
    flex-direction: column !important;
  }
  .social-linking-header {
    display: contents !important;
  }
  .social-linking-header > div,
  .social-linking-page-column > div:has(> .close-button) {
    display: contents !important;
  }
  
• .linked-tag. A página antiga colocava isso nos badges de status de um card conectado. Ele não faz parte do contrato acima, deliberadamente: um card conectado agora também pode exibir “Relink required” ou “Identity check”, então uma regra ocultando .linked-tag ocultaria um aviso ao qual seu usuário precisa reagir. Se sua folha de estilos oculta .linked-tag e desenha um badge substituto próprio, o substituto não aparecerá. Em vez disso, estilize o próprio .connected-card e deixe os badges de status visíveis.

​

Direcionar uma Única Rede

.social-account-card[data-platform="tiktok"] {
  /* ... */
}

​

Alterar o Layout dos Cards

• .social-accounts-grid é a grade em si. É uma linha flex que quebra, e o espaço entre os cards é seu gap. Use-o para alterar esse espaçamento, ou para substituir o layout por completo.
• .social-account-card-wrapper é a célula que contém um card. Sua width é o que decide quantos cards cabem por linha, e a página define essa largura por tamanho de tela.

.social-accounts-grid {
  gap: 24px !important;
}

.social-account-card-wrapper {
  width: 100% !important;
}

.social-accounts-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

.social-accounts-grid .social-account-card-wrapper {
  width: auto !important;
}

​

Exemplo: Ocultar o Cabeçalho da Página

h1.heading-social-accounts {
  display: none !important;
}

​

Exemplo: Reestilizar Cards Não Conectados como Botões

/* Unconnected cards become outlined buttons. */
.social-account-card.unlinked-card {
  background-color: #ffffff !important;
  border-color: #4f46e5 !important;
  border-width: 2px !important;
  border-radius: 8px !important;
}

/* An !important rule also wins over the page's own hover styles,
   so restate the hover state you want. */
.social-account-card.unlinked-card:hover {
  background-color: #eef2ff !important;
  border-color: #4338ca !important;
}

/* The muted call to action becomes the button label. */
.social-account-card.unlinked-card .click-to-link {
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

.social-account-card.unlinked-card {
  background-color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

.social-account-card.unlinked-card p {
  color: #ffffff !important;
}

​

Alterar Título da Página, Botão Fechar e Favicon

​

Texto do Rodapé

​

Recursos Enterprise

​

Max Pack

​

Ressincronização Automática de Páginas do Facebook e Instagram

• A opção “Resync” está disponível ao conectar páginas do Facebook ou Instagram.
• Ao habilitar esse recurso, todas as páginas conectadas anteriormente serão automaticamente revinculadas ao perfil de usuário.
• Observação: Apenas páginas previamente vinculadas serão reconectadas; novas páginas não serão adicionadas automaticamente.
• Esse recurso suporta contas do Facebook com até 400 páginas.
• Para contas que excedem 400 páginas, recomenda-se distribuir as páginas em várias contas do Facebook.
• Melhor Prática: Só use a opção “Resync” quando necessário para reconectar todas as páginas. Para operações rotineiras, geralmente não é necessário.

​

Lista Branca de IP

​

Revisões Técnicas e de Segurança

​

Gerenciamento de Conta Dedicado com Suporte Prioritário

​

Endpoints de API Personalizados