Este artigo ajuda você a integrar funcionalidade personalizada e exclusiva à central de ajuda do Zendesk. Ele orienta você pelo processo de adição de páginas personalizadas ao seu plano Knowledge Enterprise e explica como você pode desenvolver, agrupar e incorporar páginas personalizadas usando tecnologias como React.js e Node.js.
Por exemplo, você pode criar uma página de cadastro personalizada do VIP soporte que se encaixa perfeitamente no design da central de ajuda existente, proporcionando uma experiência de usuário coesa e personalizada.
Este exemplo de aplicativo de uma única página usa React com TypeScript para o frontend e Node.js para o backend. O Tailwind CSS estiliza o aplicativo e o Nodemailer gerencia as confirmações por e-mail para novos usuários que se cadastrarem com êxito.
Como você trabalha com um aplicativo React, o exemplo abrange as etapas do Webpack para compilá-lo em um único arquivo. Você insere o arquivo no tema da central de ajuda e carrega-o. Siga as seções abaixo para cada conjunto de etapas:
- Etapa 1: Desenvolver a página personalizada usando React com TypeScript e Node.js
- Etapa 2: Configurar o Webpack para agrupar a página personalizada
- Etapa 3: Incorpore e integre o projeto ao seu tema e publique-o na central de ajuda
Se você não quiser integrar com um back-end ou usar o TypeScript, confira o boilerplate para iniciar seu próprio aplicativo de página única.
Etapa 1: Desenvolvimento da página personalizada usando React com TypeScript e Node.js
As páginas personalizadas permitem que você desenvolva usando qualquer pilha de tecnologia da web preferida. Muitos desenvolvedores preferem React.js com Node.js para desenvolvimento de back-end. Cada tecnologia tem suas próprias nuances e especificações. Considere os seguintes pontos técnicos:
Reagir
Use o Create React App para páginas personalizadas, pois essa estrutura oferece suporte a aplicativos de página única. A página de cadastro do VIP soporte acima faz duas solicitações: uma gera um token seguro para autenticação de back-end e a outra envia dados reais.
A página de exemplo personalizada altera os perfis de usuários e organizações no Zendesk. Se sua página fizer solicitações semelhantes, valide os dados do frontend antes de enviar a solicitação. A validação de back-end desempenha um papel crucial, mas a validação front-end assegura que os dados sejam limpos, especialmente das entradas do usuário.
Lembre-se de que uma página personalizada forma apenas uma parte da central de ajuda. Certifique-se de que qualquer funcionalidade, marca ou estilo se alinhe à central de ajuda como um todo.
Considere estes aspectos de design:
-
Autenticação: Especifique quem pode acessar essa página: agentes, todos os usuários autenticados ou todos os usuários.
-
Navegação:
-
Evite desenvolver um cabeçalho ou navegação em sua página personalizada. A equipe de conhecimento da sua conta define esses recursos. A página personalizada herda o cabeçalho e a navegação do tema atual.
-
Posicione esta página adequadamente na central de ajuda. Assim como a funcionalidade, a página personalizada existe fora do esquema central de ajuda padrão. Os usuários Reach essas páginas por meio de links em qualquer modelo da central de ajuda ou páginas predefinidas como a sua página inicial. As URLs de página personalizadas têm esta aparência:
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
Estilo da página: Selecione as bibliotecas de estilo que se encaixam no tema central de ajuda. Certifique-se de que a fonte e a paleta de cores correspondam ao tema existente.
-
Gerenciamento de imagens: Como você configura e agrupa manualmente sua página personalizada, o armazenamento local de imagens ou ativos não funciona. Carregue-os no tema central de ajuda antes de inserir. Para obter instruções passo a passo, consulte o artigo: Uso de ativos de tema próprios para a central de ajuda.
Node.js
As páginas personalizadas fornecem uma tela em branco para criar uma experiência personalizada para os visitantes. Com ferramentas como Node.js e Express, você pode se conectar diretamente a sistemas e bancos de dados existentes. Você também pode criar novos serviços com sua pilha de tecnologia preferida e integrá-los à central de ajuda para uma experiência de usuário otimizada.
O aplicativo de exemplo usa as funções abaixo.
-
Os desenvolvedores criaram uma API Express que recebe as informações do usuário e da organização enviadas pelo formulário frontend.
-
O aplicativo envia solicitações de API para o Zendesk Support para criar e atualizar usuários e organizações relevantes usando o recurso node-fetch.
-
Ele valida os dados de envio do formulário usando validator.js.
-
O aplicativo envia uma notificação por email de confirmação ao usuário no envio bem-sucedido do formulário usando o Nodemailer.
Proteja seus encaminhamentos de API com cuidado ao criar serviços de página personalizados do lado do servidor. Use ferramentas como JWT para proteger seu aplicativo criando a autenticação de solicitação. Para obter mais detalhes sobre o JWT, consulte este artigo do website do JWT: Introdução ao token da web JSON.
O aplicativo de exemplo usa a autenticação descrita abaixo.
-
Os desenvolvedores criaram um ponto de extremidade de autenticação que o frontend usa para solicitar um token JWT e autorizar solicitações para a API de envio de formulário.
-
Os módulos de autenticação geram e verificam tokens JWT usando jsonwebtoken.
Dependendo do aplicativo que você criar, considere sua política de CORS (Compartilhamento de recursos entre origens). Certifique-se de que os encaminhamentos que recebem solicitações do lado do cliente tenham o CORS ativado. Se você conhece os domínios que enviam as solicitações, especifique-os explicitamente. Caso contrário, configure o * curinga. Para obter mais informações sobre CORS, consulte este artigo do site da Mozilla: Compartilhamento de recursos de origem cruzada (CORS).
Etapa 3: Configurar o Webpack para agrupar a página personalizada
Após concluir o desenvolvimento de sua página personalizada, agrupe seu aplicativo React usando o Webpack. Como seu tema precisa incorporar todas as páginas personalizadas, compile a página personalizada em um único arquivo HTML. O Create React App inclui seu próprio pacote e otimização. No entanto, como você pretende retornar um único arquivo index.html, o exemplo usa sua própria configuração de webpack para simplificar esse processo.
Etapa 4: Incorpore e integre o projeto ao seu tema e publique-o na central de ajuda
Depois de criar seu aplicativo, insira-o na central de ajuda. Navegue até o diretório de compilação recém-criado. Você encontrará alguns arquivos necessários para criar a nova página personalizada.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
O arquivo index.html contém o código que você inseriu na página personalizada. Acesse o JavaScript e o CSS criados para o projeto. Primeiro, carregue os arquivos JavaScript e CSS como ativos em sua central de ajuda. Em seguida, copie o código do seu arquivo index.html para a página personalizada e ajuste os caminhos de arquivo para apontar para os ativos.
Veja um exemplo abaixo de como isso aparece no editor de código.
Ao terminar, publique sua página personalizada. Para obter mais recursos sobre o gerenciamento de conteúdo em sua central de ajuda, consulte o artigo: Recursos do Conhecimento.
Aviso sobre a tradução: este artigo foi traduzido por um software de tradução automática para oferecer a você uma compreensão básica do conteúdo. Medidas razoáveis foram tomadas para fornecer uma tradução precisa, no entanto, a Zendesk não garante a precisão da tradução.
Em caso de dúvidas relacionadas à precisão das informações contidas no artigo traduzido, consulte a versão oficial do artigo em inglês.