Social Webform User Guide

(Difference between revisions)
Jump to: navigation, search
(→Instalação do Widget)
Line 1: Line 1:
−
== Introdução ==
+
== Introduction ==
  
−
Social Webforms permitem que usuários se registrem e preencham campos automaticamente usando informações de suas redes sociais como o Facebook, Twitter e LinkedIn. Desta forma, preencher um formulário na web se torna muito mais rápido e simples, enquanto que os perfis sociais dos usuários são automaticamente capturados e armazenados no Marketing Database.
+
Social Webforms allow users to register themselves and to fill some fields automatically based on data from their social network accounts (like Facebook, Twitter, LinkedIn, and Google+); filling a form on the web becomes much simpler and faster for the user, and the user's profile is automatically captured and stored in the Marketing Database.
  
−
O diagrama abaixo mostra as etapas do widget do Social Webform:
+
The following diagram shows the Social Webform widget steps:
−
# Login: identificação do visitante via login social ou email.
+
 
−
# Preenchimento do formulário: configure os campos e o formulário virá auto-preenchido com as informações capturadas pelo perfil social do visitante. Você também pode configurar botões de like (Facebook) e follow (Twitter) no formulário, incentivando sua audiência nas redes sociais.
+
# Login: visitor's identification using social login or email.
−
# Feedback: escreva uma mensagem de agradecimento ou faça um redirecionamento para uma página.
+
# Filling the form: configure the fields and the form will show up auto-filled with information capture by the social login mechanism. You can also configure like (Facebook) and follow (Twitter) buttons on the form, increasing engagement.
 +
# Feedback: write a thank you message or make a redirect to another web page.
  
 
[[File:Webform-steps.png|1000px]]
 
[[File:Webform-steps.png|1000px]]
  
−
A implementação do Social Webform consiste em 2 etapas:
+
Social Webform implementation consists of 2 steps:
−
# Configurar uma instância do Social Webform
+
# Configure a Social Webform instance
−
# Instalar o widget no Website
+
# Install the widget on your Website
  
−
== Configuração do Social Webform ==
+
== Social Webform Configuration ==
  
−
A primeira parte da configuração de um Social Webform consiste em definir quais os métodos de registro os visitantes poderão usar (login social ou email), se o webform irá aceitar múltiplos registros ou não, os plugins sociais e os campos customizados a serem preenchidos pelo visitante.
+
The first step consists of defining which methods of registration visitors can use (social login or email), wether the webform will accept multiple registrations or not, which social plugins will be used and which custom fields will be available to the visitor.
  
−
=== Métodos de Registro e Configuração Básica ===
+
=== Registration Methods and Basic Configuration ===
  
 
[[File:Social webform basic configuration.png|500px]]
 
[[File:Social webform basic configuration.png|500px]]
  
−
Nesta tela deve-se configurar:
+
In this screen you can configure:
−
* Nome do Webform: nome de referência usado apenas para listar os webforms dentro da aplicação.
+
* Webform name: a name for this webform instance (used as an internal reference only).
−
* Descrição do Webform: descrição do webform usada apenas como referência dentro da aplicação.
+
* Webform description: a description for this webform instance (used as an internal reference only).
−
* Múltiplos Registros: se o webform irá aceitar apenas 1 registro por visitante ou múltiplos registros. Caso seja apenas 1 registro por visitante o widget avisa ao visitante que ele já está registrado.
+
* Multiple registration: wether the webform will accept more than one registration per visitor or not; if multiple registration is not enabled, visitors will see a message saying they already registered before (in case they did).
−
* Métodos de Registro: qual o método de identificação do visitante será usado. Temos dois disponíveis:
+
* Registration Methods: which registration method will be used. We have two methods available:
−
** Registro Customizado: neste tipo de registro você poderá configurar que redes sociais o visitante poderá usar para se logar ou se ele poderá usar apenas email também.
+
** Custom registration: you can select which social networks the visitor can use to log in and wether the user can use email as well.
−
** Registro com Social Login: neste tipo de registro o passo de identificação do usuário é realizado por uma aplicação do [[Social Login User Guide|Social Login]]. Leia este [[Social Webform with Social Login User Guide|guia]] com detalhes sobre o Webform associado a um Social Login.
+
** Social Login registration: in this type of registration, the visitor identification step is performed by a [[Social Login User Guide|Social Login]] application. Read this [[Social Webform with Social Login User Guide|guide]] for more details about using a Webform associated with a Social Login.
  
−
=== Plugins Sociais ===
+
=== Social Plugins ===
  
 
[[File:Social webform social plugins.png|500px]]
 
[[File:Social webform social plugins.png|500px]]
  
−
Nesta tela deve-se configurar:
+
In this screen you can configure:
−
* URL para botão de curtir do Facebook: pode-se usar qualquer URL válida, mas geralmente é usada uma URL de uma fan page no Facebook.
+
* URL for the Facebook "like" button: any valid URL can be used here, but the most common use is for Facebook fan page URLs.
−
* Nome de usuário para seguir no Twitter: apenas o screen name do usuário no Twitter.
+
* Username to follow on Twitter: just the screen name of the user on Twitter.
  
−
O objetivo destes plugins sociais é aumentar o engajamento do visitante com suas marcas nas redes sociais. Os botões de Like do Facebook e Seguir do Twitter irão aparecer junto aos campos customizados no momento em que o usuário preenche o formulário, facilitando desta forma que ele se engaje e faça sua comunidade de seguidores nas redes sociais crescer consideravelmente.
+
The point about using these social plugins is to increase visitors' engagement with your brand on the social networks. The Facebook "Like" and the Twitter "Follow" buttons will show up with the custom fields in the moment the user is filling the form, making it easy for him to engage and talk about your website with his followers and friends, making your audience grow considerably.
  
−
=== Campos Customizados ===
+
=== Custom Fields ===
  
 
[[File:Social webform custom fields.png|500px]]
 
[[File:Social webform custom fields.png|500px]]
  
−
Aqui você poderá configurar que campos você deseja que o seu visitante preencha no formulário. Por enquanto temos suporte aos campos "Texto Simples" (text), "Parágrafo" (textarea), "Dropdown" (select) e "Checkbox" (checkbox). Para cada um deles é possível configurar:
+
Here you can configure which fields your visitant may / might fill on the webform. We have support to "Simple text" (text), "Paragraph" (textarea), "Dropdown" (select), and "Checkbox" (checkbox). For each of them you can configure:
  
−
* Nome de Exibição: o nome do campo que irá aparecer no widget.
+
* Label: the name that will show up on the widget.
−
* Obrigatório: se o preenchimento do campo é obrigatório ou não pelo visitante.
+
* Required: wether the field is required or not.
−
* Nome no Banco de Dados: o nome de referência usado para alimentar o Marketing Database. Use este nome para visualizar e extrair consultas no Marketing Database posteriormente. Uma boa prática é reusar nomes em diferentes webforms, por exemplo, se você tem dois webforms que perguntam o email do visitante, use "email" como nome no banco de dados de ambos, desta forma você poderá usar o mesmo atributo em suas consultas no Marketing Database.  
+
* Database name: reference name used to feed, visualize and extract data from / to the Marketing Database. It's a good practice to re-use names in different webforms, e.g.: if you have two webforms that ask the user's email address, use "email" on both of them, and it will make it easier to query / create reports afterwards.
−
* Auto-preenchimento: escolha aqui que informação capturada do perfil social do visitante nas redes sociais será usada para auto-preencher o campo.
+
* Autofill: choose here which information capture from the social network profile should be used to auto-fill the field.
−
* Opções: no caso do campo "Dropdown", é possível configurar aqui que opções estarão disponíveis para o visitante escolher no campo, incluindo a opção selecionada por padrão.
+
* Options: in the case of a "Dropdown" field, it's possible to configure the options that will be available for the visitor to choose, including the default option.
  
−
== Configuração de Retornos ==
+
== Callback Configuration ==
  
 
[[File:Social webform redirect callback.png|500px]]
 
[[File:Social webform redirect callback.png|500px]]
  
−
Nesta etapa da configuração do Social Webform é possível configurar o redirecionamento após o usuário preencher o formulário. Esta configuração é opcional.
+
In this step you can configure the redirect procedure after a visitor fills the form. This configuration is optional.
  
−
Use esta configuração para redirecionar seus visitantes para alguma área escondida no seu website, disponibilizar algum arquivo para ele acessar ou para definir um fluxo de navegação no seu site.
+
You can use this configuration to redirect your visitors to hidden areas of your website, share a file or define a navigation flow for your website.
  
−
== Configuração de Alertas ==
+
== Alerts Configuration ==
  
−
É possível configurar três tipos diferentes de alertas, conforme descritos a seguir. A configuração destes alertas é opcional.
+
It's possible to define three different alerts, as shown below. This configuration is optional.
  
−
=== Email para o visitante ===
+
=== Email visitor after completion ===
  
 
[[File:Social webform visitor alert.png|500px]]
 
[[File:Social webform visitor alert.png|500px]]
  
−
Este alerta permite configurar uma mensagem de boas-vindas ou agradecimento ao visitante que acabou de preencher o webform. Você pode configurar o assunto do email, o email que irá aparecer como remetente e a mensagem do email a ser enviado. A mensagem pode ser customizada em somente texto ou HTML.
+
This alert allow you to configure a welcome or thank you message to the visitor that just finished filling the webform. You can configure the email subject, the address that will show up as a sender, and the message to be sent. The message may be set up as text-only or HTML.
  
−
É importante lembrar aqui que o email só será enviado caso o visitante tenha se inscrito por email ou preenchido algum campo com o auto-preenchimento configurado como "Email".
+
It's important to note that this email can only be sent if the visitor registered using email or if he filled a custom field with an "Email" autofill.
  
−
=== Email de notificação ===
+
=== Notification ===
  
 
[[File:Social webform internal alert.png|500px]]
 
[[File:Social webform internal alert.png|500px]]
  
−
Este alerta permite configurar que emails irão receber uma notificação toda vez que algum visitante se registrar no webform. Você pode configurar uma lista de emails separados por vírgula neste alerta.
+
This alert allows you to configure emails that will receive a notification each time a visitor registers on the webform. You can use a comma-separated list of emails here.
  
−
Por exemplo, se o webform está sendo usado para um evento ou campanha, esta configuração se torna bastante útil para avisar os organizadores e responsáveis pelo evento ou campanha que alguém acabou de se registrar.
+
If the webform is being used for an event or campaign, for example, this configuration can be useful to warn organizers that someone just registered.
  
−
=== Publicar uma atualização de status no Facebook do visitante ===
+
=== Post a status update on the visitor's Facebook account===
  
 
[[File:Social webform facebook share.png|500px]]
 
[[File:Social webform facebook share.png|500px]]
  
−
Este alerta permite configurar uma atualização de status a ser postada automaticamente na timeline do Facebook do visitante. Você pode configurar a mensagem, link, imagem, nome, legenda e descrição do status a ser postado (veja o screenshot de uma atualização no Facebook para saber como cada uma destas configurações modifica a mensagem a ser postada).
+
This alert allow you to configure a status updated to be posted automatically on the visitor's Facebook timeline. You can configure message, link, image, name, caption and description to be posted (you can see the Facebook status update screenshot to see how each of these fields change the message to be posted).
  
−
Esta configuração é bastante útil para disseminar uma marca, evento ou campanha nas redes sociais. Postando uma atualização na timeline de um visitante, todos os seus amigos poderão ver e clicar no link, levando de volta a sua página e crescendo sua audiência.
+
This configuration is very useful to spread the word about a brand, event or campaign on the social networks. By posting a status update on your visitor's timeline, all his friends will see and may click the link, taking them to your website and increasing your audience.
  
−
Vale lembrar que esta configuração só é possível se:
+
It's important to note that this is possible only if:
−
# O Facebook for um dos métodos de registro do Social Webform
+
# Facebook is one of the registration methods for this webform
−
# A aplicação social do Facebook estar configurada com a permissão "publish_streams" ou "publish_actions".  
+
# The Facebook social app used on this Webform is configured with the "publish_streams" or "publish_actions" permission.
  
−
Desta forma o Facebook irá perguntar ao visitante se ele deseja autorizar a permissão para publicar em nome dele e, caso ele autorize, a mensagem poderá ser publicada em sua timeline. Caso o visitante não autorize, nada será postado em sua timeline e ele poderá finalizar o preenchimento do webform sem problemas.
+
Facebook will ask the visitor if he allows you to publish in his name and, if he authorizes it, the massage will be posted on his timeline. If he doesn't allow it, he can still fill in the form but nothing will be posted.
  
−
== Configuração do Widget ==
+
== Widget Configuration ==
  
−
É possível configurar algumas informações que são mostradas no widget para o visitante.
+
You can configure a few information that is shown on the widget. On this screen you can configure the title and description:
−
 
+
−
Na tela abaixo é possível configurar o título e a descrição que irá aparecer na tela de login do webform:
+
  
 
[[File:Social webform widget login.png|500px]]
 
[[File:Social webform widget login.png|500px]]
  
−
Na tela abaixo é possível configurar o nome do botão de submissão do formulário:
+
On the following screen you can configure the submit button name:
  
 
[[File:Social webform widget form.png|500px]]
 
[[File:Social webform widget form.png|500px]]
  
−
Na tela abaixo é possível configurar uma mensagem de agradecimento após o usuário finalizar o preenchimento do formulário:
+
On the following screen you can configure a thank you message to be shown after filling the form:
  
 
[[File:Social webform widget confirmation.png|500px]]
 
[[File:Social webform widget confirmation.png|500px]]
  
−
== Teste do Widget ==
+
== Widget Testing ==
  
 
[[File:Social webform testing.png|500px]]
 
[[File:Social webform testing.png|500px]]
  
−
Na tela acima disponibilizamos um link para abrir o Social Webform Widget. Ao clicar, um diálogo irá abrir na tela com as opções de login do webform:  
+
On the screen above we show a link to open the Social Webform widget. When you click it, a dialog will open with the login options for the webform:  
  
 
[[File:Social webform widget dialog.png|500px]]
 
[[File:Social webform widget dialog.png|500px]]
  
−
Você poderá se logar, ver como ficou o formulário configurado e finalizar o registro para confirmar os retornos e alertas configurados. É importante lembrar que o seu registro já estará sendo considerado como um registro válido no webform, portanto, estará disponível inclusive no dashboard do seu webform.
+
You can log in, see how the form shows up and finish registration to confirm redirects and alerts. It's important to remember that this registration will be considered a valid registration, so it will be available on the dashboard.
−
 
+
−
== Instalação do Widget ==
+
  
−
A instalação do Widget é bastante simples, basta colar um trecho de código em Javascript e HTML no website e pronto, seu webform estará pronto a ser usado.
+
== Widget Installation ==
  
−
Disponibilizamos o código a ser colado para o Social Webform Widget nesta tela:
+
Widget installation is very simple: you just have to past a JavaScript / HTML snippet on your website and you will be ready to go. You can copy the widget code on the following screen:
  
 
[[File:Social webform testing.png|500px]]
 
[[File:Social webform testing.png|500px]]
  
−
Veja maiores detalhes sobre os parâmetros disponíveis no Javascript na [[Social Webform Javascript API|API Javascript do Social Webform]].
+
See more details about the available parameters at the [[Social Webform Javascript API]].

Revision as of 17:05, 3 November 2014

Contents

Introduction

Social Webforms allow users to register themselves and to fill some fields automatically based on data from their social network accounts (like Facebook, Twitter, LinkedIn, and Google+); filling a form on the web becomes much simpler and faster for the user, and the user's profile is automatically captured and stored in the Marketing Database.

The following diagram shows the Social Webform widget steps:

  1. Login: visitor's identification using social login or email.
  2. Filling the form: configure the fields and the form will show up auto-filled with information capture by the social login mechanism. You can also configure like (Facebook) and follow (Twitter) buttons on the form, increasing engagement.
  3. Feedback: write a thank you message or make a redirect to another web page.

Webform-steps.png

Social Webform implementation consists of 2 steps:

  1. Configure a Social Webform instance
  2. Install the widget on your Website

Social Webform Configuration

The first step consists of defining which methods of registration visitors can use (social login or email), wether the webform will accept multiple registrations or not, which social plugins will be used and which custom fields will be available to the visitor.

Registration Methods and Basic Configuration

Social webform basic configuration.png

In this screen you can configure:

  • Webform name: a name for this webform instance (used as an internal reference only).
  • Webform description: a description for this webform instance (used as an internal reference only).
  • Multiple registration: wether the webform will accept more than one registration per visitor or not; if multiple registration is not enabled, visitors will see a message saying they already registered before (in case they did).
  • Registration Methods: which registration method will be used. We have two methods available:
    • Custom registration: you can select which social networks the visitor can use to log in and wether the user can use email as well.
    • Social Login registration: in this type of registration, the visitor identification step is performed by a Social Login application. Read this guide for more details about using a Webform associated with a Social Login.

Social Plugins

Social webform social plugins.png

In this screen you can configure:

  • URL for the Facebook "like" button: any valid URL can be used here, but the most common use is for Facebook fan page URLs.
  • Username to follow on Twitter: just the screen name of the user on Twitter.

The point about using these social plugins is to increase visitors' engagement with your brand on the social networks. The Facebook "Like" and the Twitter "Follow" buttons will show up with the custom fields in the moment the user is filling the form, making it easy for him to engage and talk about your website with his followers and friends, making your audience grow considerably.

Custom Fields

Social webform custom fields.png

Here you can configure which fields your visitant may / might fill on the webform. We have support to "Simple text" (text), "Paragraph" (textarea), "Dropdown" (select), and "Checkbox" (checkbox). For each of them you can configure:

  • Label: the name that will show up on the widget.
  • Required: wether the field is required or not.
  • Database name: reference name used to feed, visualize and extract data from / to the Marketing Database. It's a good practice to re-use names in different webforms, e.g.: if you have two webforms that ask the user's email address, use "email" on both of them, and it will make it easier to query / create reports afterwards.
  • Autofill: choose here which information capture from the social network profile should be used to auto-fill the field.
  • Options: in the case of a "Dropdown" field, it's possible to configure the options that will be available for the visitor to choose, including the default option.

Callback Configuration

Social webform redirect callback.png

In this step you can configure the redirect procedure after a visitor fills the form. This configuration is optional.

You can use this configuration to redirect your visitors to hidden areas of your website, share a file or define a navigation flow for your website.

Alerts Configuration

It's possible to define three different alerts, as shown below. This configuration is optional.

Email visitor after completion

Social webform visitor alert.png

This alert allow you to configure a welcome or thank you message to the visitor that just finished filling the webform. You can configure the email subject, the address that will show up as a sender, and the message to be sent. The message may be set up as text-only or HTML.

It's important to note that this email can only be sent if the visitor registered using email or if he filled a custom field with an "Email" autofill.

Notification

Social webform internal alert.png

This alert allows you to configure emails that will receive a notification each time a visitor registers on the webform. You can use a comma-separated list of emails here.

If the webform is being used for an event or campaign, for example, this configuration can be useful to warn organizers that someone just registered.

Post a status update on the visitor's Facebook account

Social webform facebook share.png

This alert allow you to configure a status updated to be posted automatically on the visitor's Facebook timeline. You can configure message, link, image, name, caption and description to be posted (you can see the Facebook status update screenshot to see how each of these fields change the message to be posted).

This configuration is very useful to spread the word about a brand, event or campaign on the social networks. By posting a status update on your visitor's timeline, all his friends will see and may click the link, taking them to your website and increasing your audience.

It's important to note that this is possible only if:

  1. Facebook is one of the registration methods for this webform
  2. The Facebook social app used on this Webform is configured with the "publish_streams" or "publish_actions" permission.

Facebook will ask the visitor if he allows you to publish in his name and, if he authorizes it, the massage will be posted on his timeline. If he doesn't allow it, he can still fill in the form but nothing will be posted.

Widget Configuration

You can configure a few information that is shown on the widget. On this screen you can configure the title and description:

Social webform widget login.png

On the following screen you can configure the submit button name:

Social webform widget form.png

On the following screen you can configure a thank you message to be shown after filling the form:

Social webform widget confirmation.png

Widget Testing

Social webform testing.png

On the screen above we show a link to open the Social Webform widget. When you click it, a dialog will open with the login options for the webform:

Social webform widget dialog.png

You can log in, see how the form shows up and finish registration to confirm redirects and alerts. It's important to remember that this registration will be considered a valid registration, so it will be available on the dashboard.

Widget Installation

Widget installation is very simple: you just have to past a JavaScript / HTML snippet on your website and you will be ready to go. You can copy the widget code on the following screen:

Social webform testing.png

See more details about the available parameters at the Social Webform Javascript API.

Retrieved from "https://dev.socialidnow.com/index.php?title=Social_Webform_User_Guide&oldid=1274"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox