Pular para o conteúdo principal

Integração do componente

A integração é extremamente simples, pode ser incluído no Help Center, Docusaurus entre outros portais.

Atenção

Por motivos de segurança, o componente funcionará apenas em origens autorizadas. Qualquer outra origem será automaticamente bloqueada, exibindo a seguinte mensagem de erro: "Erro ao buscar as notificações. Tente novamente mais tarde."

Em caso de dúvidas, entre em contato pelo e-mail: paulo.henrique@ndd.tech

Integrar com o Help Center​

  1. Na barra lateral do Confluence, clique na aba Aplicativos
  2. Clique em Scroll Viewport
  3. Na lista, selecione o Help Center que deseja integrar o componente
  4. Clique no botão Edit theme
  5. Clique em Templates
  6. Clique em Custom Javascript
  7. Copie e cole o script abaixo:
vp.loadScript("https://storageengprodeastus2.z20.web.core.windows.net/components/ndl-notification-component/index.js")
  .then(() => {
      window.notificationMetadata = {
          databaseId: "1f9e97bcwedc700fb35ae76b222e3a62", //ID do board do notion
          truncateTitleConfig: { //configuração para limitar o titulo das notificações
              type: "chars",
              limit: 15,
          },
          truncateTextConfig: { //configuração para limitar o texto das notificações
              type: "words",
              limit: 25,
          },
          primaryBgColor: "#272D3D", // Cor primária do background
          primaryTextColor: "#ffffff", // Cor primária do texto
          positionBottom: "150px", // Distância do fundo
          positionRight: "30px", // Distância da direita
      };
  })
  .catch((error) => {
    console.error("Erro ao carregar o componente de notificações:", error);
  });

Customizar o componente​

É possível alterar algumas configurações do componente afim de customizar o seu visual.

  1. Ainda em Custom Javascript, altere as configurações a seguir:
    1. primaryBgColor - Cor de fundo do botão
    2. primaryTextColor - Cor do ícone do botão
    3. positionBottom - Posição em relação a borda inferior
    4. positionRight - Posição em relação a borda direita
    5. truncateTitleConfig.type e truncateTextConfig.type - Permite configurar o tipo de truncamento que será usado para o Título e para o Texto das notificações. Tipos disoníveis (chars e words)
    6. truncateTitleConfig.limit e truncateTextConfig.limit - Permite configurar o limite de truncamento que será usado para o Título e para o Texto das notificações. O limite pode ser qualquer número inteiro positivo.

Configurar o Banco de dados do Notion​

Após customizar o seu componente, vamos incluir o ID do banco de dados do Notion para buscar as notificações.

  1. Acesse o board do notion
  2. Copie o ID da URL
Por exemplo

https://www.notion.so/ 1d266175kp895642rr2c215a2e5cfd4 ?v=1f3d97bcdedc80a5b6ae888c65740d8d&pvs=11

  1. Em Custom Javascript no Confluence, altere a configuração a seguir:
    1. databaseId - ID do board do notion

Finalizar a integração​

  1. Clique no botão Save
  2. Aguarde os ajustes serem finalizados e clique no botão ✖
  3. Clique em Update site
  4. Aguarde a atualização
  5. Clique em Go live

Integrar com o Docusaurus​

  1. Abra o arquivo custom-config.json
  2. Procure pela configuração scripts
  3. Copie e cole o script abaixo dentro dos colchetes []:
custom-config.json
{
  "src": "/js/notificationMetadata.js"
},
{
  "src": "https://storageengprodeastus2.z20.web.core.windows.net/components/ndl-notification-component/index.js"
}
Seu arquivo ficará assim:
custom-config.json
"scripts": [
    {
      "src": "/js/notificationMetadata.js"
    },
    {
      "src": "https://storageengprodeastus2.z20.web.core.windows.net/components/ndl-notification-component/index.js"
    }
]
  1. Salve o arquivo

Customizar o componente​

É possível alterar algumas configurações do componente afim de customizar o seu visual.

  1. Dentro da pasta static, abra o arquivo notificationMetadata.js
  2. Altere as configurações a seguir:
    1. primaryBgColor - Cor de fundo do botão
    2. primaryTextColor - Cor do ícone do botão
    3. positionBottom - Posição em relação a borda inferior
    4. positionRight - Posição em relação a borda direita
    5. truncateTitleConfig.type e truncateTextConfig.type - Permite configurar o tipo de que truncamento será usado para o Título e para o Texto das notificações. Tipos disoníveis (chars e words)
    6. truncateTitleConfig.limit e truncateTextConfig.limit - Permite configurar o limite de truncamento que será usado para o Título e para o Texto das notificações. O limite pode ser qualquer número inteiro positivo.
  3. Salve o arquivo

Configurar o banco de dados do Notion​

Após customizar o seu componente, vamos incluir o ID do banco de dados do Notion para buscar as notificações.

  1. Acesse o board do notion
  2. Copie o ID da URL
Por exemplo

https://www.notion.so/ 1d266175kp895642rr2c215a2e5cfd4 ?v=1f3d97bcdedc80a5b6ae888c65740d8d&pvs=11

  1. Dentro da pasta static, abra o arquivo notificationMetadata.js
  2. Altere a configuração a seguir:
    1. databaseId - ID do board do notion
  3. Salve o arquivo
dica

Você pode executar o comando npm run start para testar o componente.

Múltiplos idiomas​

Sabemos da importância da globalização, por isso, disponibilizamos o componente em Português, Inglês e Espanhol. A alteração do idioma depende da maneira como o seu portal se comporta. Atualmente a mudança se dá de duas maneiras:

  1. Help Center: Através do parâmetro da URL ?l=pt e /pt/.
Por exemplo

https://helpcenter-testes.ndd.tech/?l=en e https://helpcenter-testes.ndd.tech/en/conheca-o-ndd-orbix/Current/

  1. Docusaurus: Através do parâmetro language, presente nos parâmetros de metadata
Por exemplo
notificationMetadata.js
window.notificationMetadata = {
  databaseId: "1d266175kp123452rr2c215a2e5cfd4",
  truncateTitleConfig: {
    type: "chars",
    limit: 15,
  },
  truncateTextConfig: {
    type: "words",
    limit: 25,
  },
  language: "en",
  primaryBgColor: "#7600FF",
  primaryTextColor: "#ffffff",
  positionBottom: "50px",
  positionRight: "50px",
};

Para configurar no Help Center:​

No Help Center basta ativar os idiomas para os documentos.

Para configurar no Docusaurus:​

  1. Dentro da pasta static, abra o arquivo notificationMetadata.js
  2. Altere a configuração a seguir:
    1. language - Linguagem principal do portal

Próximo passo​