As páginas personalizadas são uma adição de recurso nos planos Guide Enterprise. Esse recurso permite que você adicione funcionalidades exclusivas e páginas da web personalizadas à sua central de ajuda, além de ser uma extensão dos temas personalizados.
Nesta demonstração de recurso, encontre um aplicativo de página única desenvolvido que os usuários finais podem usar para se cadastrar para se tornarem membros VIP e receber suporte personalizado para sua organização.
Este exemplo de aplicativo de página única foi desenvolvido usando React com Typescript para a frente e Node.js para o back-end. O CSS do Tailwind também foi usado para fins de estilização, junto com oNodemailer , para configurar o processo de envio de uma confirmação por email para os usuários que se cadastram com êxito.
Como esse é um aplicativo React, o exemplo apresenta as etapas necessárias para compilá-lo em um único arquivo. Depois, insira o arquivo no tema da central de ajuda e carregue-o. Consulte as seções a seguir para cada conjunto de etapas:
- Desenvolvimento - Como desenvolver a página personalizada usando React com Typescript e Node.js
- Pacote - como configurar o Webpack para agrupar a página personalizada
- Embed - como inserir o projeto no seu tema e publicá-lo na central de ajuda
Desenvolver
As páginas personalizadas permitem que você desenvolva a página com qualquer pilha tecnológica da web preferida. Uma preferência de pilha tecnológica popular é o uso de React.js com Node.js para desenvolvimento do back-end. Como com qualquer tecnologia escolhida, cada código tem suas próprias nuances e especificações para serem implementadas. Consulte a seguir um resumo das considerações técnicas a seguir.
Reagir
Como as páginas personalizadas são criadas com sua própria funcionalidade, o aplicativo Create React é uma ótima opção de desenvolvimento, que usa uma estrutura de aplicativo de página única.
A demonstração da página de cadastro VIP do Support acima faz duas solicitações. Uma solicitação gera um token seguro para autenticação em nosso back-end. A outra solicitação é fazer a solicitação real de dados de envio.
O exemplo de página personalizada cria alterações para perfis de usuários e organizações no Zendesk. Se a sua página personalizada também fará esses tipos de solicitações, implemente uma forma de validar esses dados do front-end antes da solicitação. Embora deva haver validação de dados para lidar com a solicitação no back-end, ao executar a validação a partir de entradas do usuário, como um formulário, você poderá garantir que apenas dados limpos e consumidores cheguem à sua instância do Zendesk. .
Também é importante reconhecer que uma página personalizada é apenas uma parte da sua Central de Ajuda. Qualquer funcionalidade, marca ou estilo usado em sua página personalizada deve ser coeso com a sua central de ajuda como um todo.
Alguns aspectos do design que devem ser considerados incluem os pontos abaixo.
- Autenticação: Quais tipos de usuários podem acessar essa página? Agentes, Todos os usuários autenticados ou todos os usuários?
- Navegação:
- Não há necessidade de desenvolver um cabeçalho ou navegação em sua página personalizada. A equipe do Guide da sua conta define a navegação e o cabeçalho. Como a página personalizada está incorporada no seu tema, o cabeçalho e a navegação do tema atual também são aplicados a essa página.
- Considere onde esta página ficará na central de ajuda. Assim como a funcionalidade é resumida na central de ajuda, a página personalizada também fica fora do esquema da central de ajuda padrão. Os usuários podem acessar essas páginas por meio de um link incorporado em qualquer modelo de central de ajuda ou página predefinida inclusa em sua central de ajuda, como a página inicial. A URL das suas páginas personalizadas terá este formato:
https://{domain_name}/hc[/{locale}]/p/{page_name}
- Estilização da página: pense sobre as bibliotecas de estilo que você está usando e se o estilo se alinha ao restante do tema da central de ajuda. Certifique-se de que as seleções de fonte e de paleta de cores correspondem ao tema em questão.
- Gerenciamento de imagens: uma vez que você precisará configurar e agrupar sua página personalizada manualmente, o armazenamento local de imagens ou ativos não funcionará. Carregue-os no seu tema da central de ajuda antes de inserir. Para obter um guia passo a passo sobre o carregamento de ativos para o seu tema, consulte o artigo: Usar seus próprios ativos de tema para a central de ajuda.
Node.js
As páginas personalizadas oferecem uma tela em branco para criar uma experiência mais personalizada para os seus visitantes. A capacidade de interagir com um servidor de back-end integrado com ferramentas como Node.js e Express permite que você se conecte diretamente com sistemas e bancos de dados que já possui. Você também pode criar serviços completamente novos com sua pilha tecnológica preferida e que se integra à sua central de ajuda para criar uma experiência de usuário perfeita.
O aplicativo de exemplo usa as funções abaixo.
- Uma API Expressa desenvolvida que recebe as informações do usuário e da organização enviadas pelo usuário no formulário de teste inicial.
-
Envie solicitações de API para o Zendesk Support para criar e atualizar o usuário e a organização relevantes com o cumprimento de nó.
- Valida os dados do envio do formulário usando validator.js.
-
Envie uma notificação por email de confirmação para o usuário no envio bem-sucedido com o Nodemailer.
Lembre-se de segurança e proteger seus encaminhamentos de API ao criar serviços de páginas personalizadas do lado do servidor. Considere criar a autenticação de solicitações com ferramentas como o JWT para proteger seu aplicativo. Para ler mais sobre o JWT, consulte este artigo do site de 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 o front-end solicitar 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 criado, outra consideração deve ser sua política CORS (Compartilhamento de recursos entre origens). Certifique-se de que os encaminhamentos que recebem solicitações do lado do cliente estão habilitados. Se você sabe quais domínios enviarão 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 com origens diferentes (CORS).
Pacote
Quando o desenvolvimento da sua página personalizada estiver concluído, adicione 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 tem seu próprio pacote e otimização. No entanto, como o objetivo é retornar um único index.html , o exemplo tem sua própria configuração de webpack que agiliza esse processo.
Inserir
Depois de criar seu aplicativo, incorpore-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.html- stática/css/bundle.min.css
- stática/bundle.min.js
A index.html é o código a ser colocado na página personalizada. Acesse o JavaScript e CSS criados para o projeto. Primeiro, carregue o arquivo JavaScript e CSS como ativos na central de ajuda. Depois, copie o código do seu index.html em página personalizada e ajuste os caminhos de arquivo para os ativos.
Veja um exemplo abaixo de como isso aparece no editor de código.
Depois de terminar, publique sua página personalizada. Para obter mais recursos sobre o gerenciamento de conteúdo na 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.
2 comentários
Entrar para comentar.