En este tutorial les muestro como insertar este widget que muestra un botón al costado de una página web (izquierda o derecha) que al momento de presionarse abre un formulario de contacto flotante.

Pueden ver un ejemplo en esta mismita entrada de mi blog.

Lo mejor es que el diseño es totalmente personalizable y como buena noticia este widget es responsive, quiere decir que la vista del formulario esta adaptada tambien para dispositivos moviles, asi no habra conflictos con la experiencia de nuestros visitantes.

Instrucciones

Para insertalo el primer paso es dirigirse a la página GetSiteControl (que ofrece tambien otros widgets).

Se mostrara algo como esto:

Ahora tenemos que crearnos una cuenta, es muy facil de hecho, solo con 3 cosas. Para hacero presionamos el botón que dice «Sign up for free». Despues de hacerlo se mostrara esta página:

Tan facil como eso. Ahora dentro del dashboard vamos a darle clic al botón que dice «Create Widget» y seleccionamos la opción «Contact».

Bueno, ahora hay que editar el widget en la pagina que se abre. En «Appearance» empezaremos eligiendo la posición del botón. Podemos seleccionar la que más nos agrade, ya sea abajo, arriba o algun costado.

Por ejemplo yo elegire que se muestre a la izquierda de mi página. Lo siguiente es editar los colores del botón y del formulario. Podemos cambiar la fuente de texto y modificar la animación (cuando aparece).

En «Content» se edita el contenido del formulario, en «Success Page» se edita lo que aparece despues de que un visitante envia un mensaje, en «Behavior» no hace falta editar nada (son opciones de comportamiento), en «Targeting» podemos programar el widget y dedicir en donde se va a mostrar y en donde no, por ultimo en «Integrations» pondremos nuestro correo para que sea en el que nos lleguen los mensajes.

Una vez que terminemos con la edición hay que dar clic en el botón «Done» que esta hasta abajo para guardar todos los cambios 🙂

Ahora nos saldra un cuadro para activar el formulario. Le damos en «Activate now»

Bien… ahora hay que ponerlo en nuestra página web o blog, para eso nos vamos a «Site Settings»

Seleccionamos «Install» y como en todo, nos aparece un código HTML, el cual hay que insertarlo en nuesto sitio web (esta vez preferiblemente en el

). Si no sabes como se insertan códigos HTML ve el tuturial.