Este artigo ajuda você a resolver o desafio de integrar funcionalidades personalizadas e exclusivas à sua central de ajuda do Zendesk. Ao guiar você pelo processo de adição de páginas personalizadas ao seu plano Guide Enterprise, ele explica como 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 Support que se encaixe perfeitamente no design da sua central de ajuda existente, fornecendo uma experiência de usuário coesa e personalizada.
Este exemplo de aplicativo de página única usa React com TypeScript para o front-end e Node.js para o back-end. O CSS do Tailwind estiliza o aplicativo e o Nodemailer lida com as confirmações por email para novos usuários que se cadastram com êxito.
Como este é um aplicativo React, o exemplo aborda as etapas do Webpack para compilá-lo em um único arquivo. Insira o arquivo no tema da central de ajuda e carregue-o. Siga as seções abaixo para cada conjunto de etapas:
- Desenvolver: Crie a página personalizada usando React com TypeScript e Node.js.
- Pacote: Configure o Webpack para agrupar a página personalizada
- Inserir: Integre o projeto ao seu tema e publique-o na central de ajuda
Desenvolver: Crie a 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 de sua preferência. Muitos preferem usar o React.js com o Node.js para o desenvolvimento de back-end. Cada tecnologia tem suas próprias nuances e especificações. Veja algumas considerações técnicas:
Reagir
Use Criar aplicativo do React para páginas personalizadas, pois ele é uma estrutura de aplicativo de página única. A página de cadastro do VIP Support acima faz duas solicitações. Um gera um token seguro para autenticação de back-end. O outro envia dados reais.
A página personalizada de exemplo altera perfis de usuário e organizações no Zendesk. Se sua página fizer solicitações semelhantes, valide os dados do frontend antes da solicitação. A validação de back-end é essencial, mas a validação de front-end garante dados limpos, especialmente de entradas do usuário.
Lembre-se de que uma página personalizada é apenas uma parte da sua central de ajuda. Certifique-se de que qualquer funcionalidade, marca ou estilo esteja alinhado com sua central de ajuda como um todo.
Considere estes aspectos de design:
-
Autenticação: Determine quem pode acessar essa página: agentes, todos os usuários autenticados ou todos os usuários
-
Navegação:
-
Não desenvolva um cabeçalho ou navegação em sua página personalizada. A equipe do Guide da sua conta as define. A página personalizada herda o cabeçalho e a navegação do tema atual.
-
Posicione essa página adequadamente na central de ajuda. Como a funcionalidade, a página personalizada existe fora do esquema padrão da central de ajuda. Os usuários acessam essas páginas por meio de links em qualquer modelo de central de ajuda ou página predefinida, como sua página inicial. As URLs de páginas personalizadas seguem este formato:
https://{domain_name}/hc[/{locale}]/p/{page_name}
-
-
Estilo da página: Selecione bibliotecas de estilo que se alinhem com o tema da central de ajuda. Certifique-se de que sua fonte e paleta de cores correspondam ao tema existente.
-
Tratamento de imagens: Como você configurará e agrupará sua página personalizada manualmente, o armazenamento local de imagens ou ativos não funcionará. Carregue-os no tema da central de ajuda antes de incorporá-los. Para obter um guia passo a passo, consulte o artigo: Uso de seus próprios ativos de tema para a central de ajuda.
Node.js
As páginas personalizadas fornecem uma tela em branco para criar uma experiência personalizada para seus 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, integrando-os à sua central de ajuda para uma experiência de usuário otimizada.
O aplicativo de exemplo usa as funções abaixo.
-
Uma API Express desenvolvida que recebe as informações do usuário e da organização enviadas pelo formulário de front-end.
-
Envie solicitações de API para o Zendesk Support para criar e atualizar o usuário e a organização relevantes com node-fetch.
-
Valide os dados de envio do formulário usando validator.js.
-
Envie uma notificação por e-mail de confirmação para o usuário no envio bem-sucedido do formulário com Nodemailer.
Esteja ciente da segurança e proteja suas rotas de API ao criar serviços de página personalizada do lado do servidor. Use ferramentas como o JWT para proteger seu aplicativo criando autenticação de solicitação. Para obter mais detalhes sobre o JWT, consulte este artigo do site do JWT: Introdução ao token da web JSON.
O aplicativo de exemplo usa a autenticação abaixo.
-
Um ponto de extremidade de autenticação para que o front-end solicite um token JWT para autorizar solicitações para a API de envio de formulário.
-
Módulos de autenticação que geram e verificam tokens JWT usando jsonwebtoken.
Dependendo do aplicativo que você criar, considere sua política CORS (compartilhamento de recursos entre origens). Certifique-se de que as rotas que recebem solicitações do lado do cliente tenham o CORS ativado. Se você conhece os domínios que enviam as solicitações, especifique esses domínios explicitamente. Caso contrário, use o curinga *. Para obter mais informações sobre o CORS, consulte este artigo do site da Mozilla: Compartilhamento de recursos entre origens (CORS).
Pacote: Configure o Webpack para agrupar a página personalizada
Depois de concluir o desenvolvimento de sua página personalizada, empacote seu aplicativo React usando o Webpack. Como todas as páginas personalizadas precisam ser incorporadas ao seu tema, compile a página personalizada em um único arquivo HTML. O aplicativo Criar React vem com seu próprio agrupamento e otimização. No entanto, como a meta é retornar um único index.html , o exemplo tem sua própria configuração de webpack para otimizar esse processo.
Inserir: Integre o projeto ao seu tema e publique-o na central de ajuda
Após criar seu aplicativo, insira-o em sua central de ajuda. Navegue até o diretório de compilação recém-criado. Aqui você encontrará alguns arquivos necessários para criar a nova página personalizada.
index.htmlstatic/css/bundle.min.cssstatic/bundle.min.js
O index.html é o código a ser colocado na página personalizada. Acesse o JavaScript e o CSS criados para o projeto. Primeiro, carregue o arquivo JavaScript e CSS como ativos em sua central de ajuda. Em seguida, copie o código do seu index.html arquivo na página personalizada e ajuste os caminhos de arquivo para os ativos.
Encontre um exemplo abaixo de como isso aparece no editor de código.
Quando terminar, publique sua página personalizada. Para obter recursos adicionais sobre o gerenciamento de conteúdo em sua central de ajuda, consulte o artigo: Recursos do Guide.
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.