Customização da Janela de Chat.

(Last Updated On: October 7, 2014)

Nós podemos personalizar ambas formas de Chat e Pre-Chat para melhor servir a estética do design da sua página.  A implementação do seu primeiro design é gratuita, com um plano pago à partir do plano Business – um valor de $250 dólares – implementações de designs adicionais vem com um preço único. Podemos também colocar White Label (onde retiramos o logo do SnapEngage), à partir do plano Plus. Encontre aqui  uma galeria de formas personalizadas para usar de inspiração.


O processo de Customização:

1. Favor mandar a arte para ambas a forma de Chat e de Pre-Chat, usando os modelos abaixo como guia. Uma vez que seu design esteja pronto, mande-o para nós no: support@snapengage.com

De preferência mande em multi-layer Photoshop .psd, Illustrator .ai, ou Gimp file–isso nos facilita fazer pequenas mudanças no design caso for necessário.

2. Nós usamos o seu design e adicionamos o Javascript para implementar as novas formas. Uma vez que temos seus arquivos, nós geralmente criamos a janela de chat customizada dentro de 3 a 5 dias úteis.

3. Nós o notificaremos por email quando a customização estiver completa, e pediremos que aprove antes de as colocar ao vivo nos widgets de sua preferência.


Modelos e Design

Para você ter uma idéia de como a forma aparecerá, veja as imagens das nossas formas de padrão aqui:

(Tamanho não atual.)

snapengage-roundblue_formsnapengage-roundblue_chat_form

Você pode personalizar o tamanho e as cores, pode ficar parecido como o modelo ou criar seu próprio design. Favor notar: Os rótulos de Input e os botões (“Chat with us” / “Email us”) serão adicionados por nós, e estilizados com  CSS. (O que significa que não poderemos usar ícones ou  imagens para esses botões.)

Estamos fornecendo modelos em camadas para acelerar seu projeto de design. Você pode usar toda a sua criatividade, ou seguir os modelos, o que você preferir. Mas por favor, nos mande arquivos com múltiplas camadas para que possamos fazer pequenas mudanças sem que você precise refazer os arquivos do nada. (Usando guias também ajudará a poupar tempo.)

Com cantos arredondados (como nas imagens acima):

Para os que preferem cantos mais retos, ou querem arredonda-los eles mesmos:

Uma nota sobre os modelos acima: São camadas/arquivos rotulados  “EXAMPLECONTENT” que são primeiramente para sua referência.O conteúdo dessas camadas/arquivos são só para te dar uma idéia de como esses items aparecerão na forma final, mas esses elementos são estilizados com CSS no nosso lado.

Por favor não cole os botões na imaginem, esses também serão estilizados com CSS por nós. (O que queremos dizer: mantenha a estilização do botão em uma camada separada, os botões são dinâmicos e não podem ser parte da imagem de fundo para a forma de Pre-chat.)


Opções Adicionais de Personalização

O diálogo de chat pode ser ajustado como você quiser, mas nós otimizamos o tamanho do nosso ao longo de várias iterações. Nós não fazemos recomendações gerais que você crie o seu design para parecerem com o modelo, essa decisão é sua. Por exemplo, o aspecto pode ser horizontal ou vertical, dependendo do tipo de informação que você pretende mostrar.

A adição de iframe:

Outra opção que você tem é de criar um espaço em seu design para um iframe. Você pode escolher mostrar uma link FAQ na sua Forma de Pre-Chat, ou uma lista de produtos populares. Como um exemplo veja o design do chat que usamos no nosso Configurador:

incluímos uma seção de FAQ personalizados nessa forma de pre-chat ligando um iframe à uma webpage criada especificamente para essa pequena janela.

Você pode criar uma pequena webpage como essa para a sua forma, e só ter certeza de que o conteúdo dessa página não é maior do que o tamanho da iframe no design da sua forma. Podemos então mostrar isso na sua forma personalizada, o que te permite editar seus items FAQ ou outro conteúdos iframe do seu lado.

Outros campos de formulário:

Você possa precisar de outros campos de formulário nas formas de Pre-chat/Offline para por exemplo, pedir à seus visitantes seus dados como nome, telefone e qualquer outra informação necessária. Aqui estão alguns exemplos de como nossos clientes usaram esses outros campos:

    

Limitações

Para a forma de pre-chat:

– Você pode montar uma forma de “Pre-Chat” , que também servirá como forma de  “Offline”.

– Os Botões, “Email us” e “Chat with us,” serão mostrados ou escondidos, baseados no seu status. Você pode também escolher não mostrar um botão de “Email us” se o chat estiver disponível com uma pequena mudança nas definições do seu widget. Não temos a opção de mostrar duas formas diferentes de Pre-Chat baseadas no seu status.

– As etiquetas das formas (O textos: “Seu endereço de email “, “Sua dúvida“) devem ser mostrados acima dos quadrados de Input. Não podemos colocar esses textos dentro dos quadrados.

(Há dois motivos por qual precisamos que as etiquetas sejam separadas. Primeiro: Mudamos a cor da etiqueta para vermelho se um campo necessário não é preenchido.  Segundo: Há problemas com a compatibilidade do co-navegador e o colocador de texto que fazem então rótulos separados a melhor opção.)

Para a forma de Chat:

– A àrea transcrita não pode ser personalizada além de mudar as cores das fontes. (Por exemplo, não podemos exibir as mensagens de chat em diferentes blocos coloridos ou ter uma imagem fixa do agente neste momento).

– O botão “call-me” nesse momento não pode ser customizado. Só podemos usar o ícone azul padrão. (Estamos trabalhando para fazer esse botão mais customizável.)


Exemplo de Designs para sua Inspiração

Você pode ver aqui alguns exemplos de formas personalizadas criadas por nossos clientes:

Estamos aguardando ver e implementar o seu design criativo!