INSTALE SU PROGRAMA DE REFERIDO EN WEBFLOW

Si estás en esta sección, estamos asumiendo que ya ha personalizado una plantilla para su programa de referidos en nuestro Creador de Sitios Web.
Si aún no ha hecho esto, por favor vaya a nuestro Centro de Diseño y personalice su plantilla para el programa de referidos antes de continuar leyendo este guía.
Este tutorial es para clientes con un sitio web en línea Webflow. Si desea instalar un programa de referido en Webflow, continúe leyendo. De lo contrario, vaya a nuestra sección de integración y encuentre la guía que mejor se adapte a sus necesidades.

¿Quién debería leer este tutorial?

Página de inicio de su tienda en Webflow.

Expectativas

Al final de este tutorial, tendremos un programa de referidos instalado en su Sitio Web. Donde sus clientes y visitantes podrán convertirse en promotores de su marca, al contar con las herramientas adecuadas para recomendar sus productos (en las redes sociales, mediante correo electrónico y mensajes instantáneos, códigos QR, etc.) y obtener recompensas por cada referido calificado.
Sus promotores también podrán consultar su desempeño en el programa de referidos a través en la sección de estadísticas y canjear sus bonos por dinero en efectivo en PayPal, tarjetas de regalo, códigos de descuento, crédito, y/o productos.

Requerimientos

  1. Una Plantilla Portal del Promotor con los formularios de registro e inicio de sesión. Esta plantilla es para sus clientes y visitantes (promotores, agentes, afiliados, etc.).
  2. Un sitio web en Webflow.
Para instalar el programa de referidos en Webflow, vamos a necesitar adicionar 2 fragmentos de códigos en algunas páginas. Por ejemplo: para mostrar el programa, capturar nuevos referidos y recompensar los promotores, necesita adicionar:

1. El fragmento de código que le permite instalar la plantilla full widget.
2. El fragmento de código de seguimiento y conversión en la página donde se encuentre su formulario de suscripción.

En la siguiente sección vamos a explicar en detalle algunos ejemplos para cada uno de los escenarios que usted pudiera tener en su sitio web.

Para obtener cada uno de los scripts específicos necesita ir a la sección de Integraciones- Code Snippets-Instalación.

Comenzando la integración de Webflow con Genius Referrals

Sección de Integración-Instalación a través de la cual instalará su programa de referidos.
Si ya estamos en la sección de instalación, podemos notar que contamos con 4 opciones para instalar el programa Código Embebido, Ventana Modal, Burbuja Flotante y Control Deslizante. Teniendo en cuenta los detalles de su tienda, puedes escoger la que desea y se adapte mejor a sus necesidades. Una vez que selecciona una de las opciones, tendrá acceso al fragmento de código correspondiente para instalar la plantilla del Programa.
Para las opciones Ventana Modal, Burbuja Flotante y Control Deslizante, se incluye una sección de configuración donde podrá personalizar algunos detalles como el estilo y la ubicación.
Opciones de instalación.
Sigan las instrucciones y obtendrán el código respectivo para cada caso.
Código Embebido
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "es",
     "grInstallMethod":"embeddedcode"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
Ventana Modal
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "en",
     "grInstallMethod":"modal"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
Burbuja Flotante
<!-- STARTING GENIUS REFERRALS CODE SNIPPET -->
<span class="gr-widget-design" id= "gr-referral-program-home-page">&nbsp;</span>
<script type="text/javascript">
!function(){
const grSetting={
     "grTemplateSlug": "referral-program-home-page",
     "grCustomerCurrencyCode": "USD",
     "grLanguage": "en",
     "grInstallMethod":"bubble"
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.2.min.js",e.onload=function(){GRToolbox.init(grSetting)};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS CODE SNIPPET -->
Para cargar la plantilla del Portal de Promotor, debe crear una nueva página en Webflow la cual nombrará "Refiere y Gana" y luego adicionar el fragmento de código obtenido en el paso anterior. Para crear la página lo hará desde el Editor de Webflow, mediante la opción Página-"Crear nueva página".

Adicionar la plantilla Portal de Promotor a su tienda

Crear y editar una nueva página en su tienda.
Una vez creada la página se adicionará un nuevo bloque, en la sección "+" Adicionar se selecciona "Embed" Embeber HTML . Al editar el contendido del bloque, deberá copiar el código obtenido anteriormente.
Prueba de que la referencia (Matt) se ha creado con éxito.

Una vez que John haya compartido los servicios con Matt, Matt hará clic en el enlace para compartir de John y aterrizará en su tienda. Matt buscará su producto, agregará algunos al carrito y finalmente pagará por los productos. Una vez que Matt haya completado una compra, se generará una nueva referencia en Genius Referrals. Para verificar si se ha creado la nueva referencia, vaya a la sección de su defensor sobre referencias Genius. Deberías poder ver a Matt en la list
Agregar y completar los campos de una nueva página en su tienda.
Editar el contendido del bloque, copiar el código generado por Genius Referrals obtenido en la sección de Instalación, ver como quedaría en imagen que se muestra a continuación.
Prueba de que la referencia (Matt) se ha creado con éxito.

Una vez que John haya compartido los servicios con Matt, Matt hará clic en el enlace para compartir de John y aterrizará en su tienda. Matt buscará su producto, agregará algunos al carrito y finalmente pagará por los productos. Una vez que Matt haya completado una compra, se generará una nueva referencia en Genius Referrals. Para verificar si se ha creado la nueva referencia, vaya a la sección de su defensor sobre referencias Genius. Deberías poder ver a Matt en la list
Detalles del fragmento de código que se colocará en su editor.
Una vez que el código está listo, necesitará hacer clic en el botón "Save & Close" y publicar los cambios, al concluir cargar la página "Refer and Earn", entonces podrá ver su plantilla de Genius Referral.
Mira lo hermosa que se ve la plantilla de su programa de referidos en su sitio web en Webflow
Para obtener el fragmento de código iremos a la sección de Integraciones-Code Snippets-Seguimiento de Conversiones-Escenarios. En esta sección puede encontrar una selección de escenarios que se ajustan a sus necesidades, debe seleccionar el que se aplique a su sitio web.

Configuración de los scripts de Seguimiento y Conversión.

Obtener los fragmentos de código para realizar el seguimiento y conversión.

Seleccione el escenario e instale los fragmentos necesarios.

1. Obtener los fragmentos a instalar:

1. Seleccionar el escenario. (Según el que se escoja varían los pasos a seguir y los fragmentos a instalar. Para esta guía se escogió el escenario E001.)
2. Se introduce la URL donde se encuentra su formulario de suscripción.
3. Indicar como se corresponden cada unos de los campos y botones obtenidos de su formulario.
4. Fijar el tiempo de expiración de las cookie.
5. Generar fragmento de código.
Fragmento de código 
<!-- STARTING GENIUS REFERRALS TRACKING CODE -->
<script type="text/javascript">
!function (){
const submit = function (e){
const grFirstName=document.getElementsByName("name")[0].value,
grLastName=document.getElementsByName("name")[0].value,
grEmail=document.getElementsByName("email")[0].value,
grMetadata='['+']';
if (grEmail != '') {
e.preventDefault();
const grSetting={
     "grTemplateSlug": "referral-program-home-page-1701",
     "grCustomerFirstname": grFirstName,
     "grCustomerLastname": grLastName,
     "grCustomerEmail": grEmail,
     "grMetadata": grMetadata,
     "grCustomerCurrencyCode":  "USD", /** your customers currency code **/
     "grCanRefer": "false",
     "grReference" : "1617140514" /** could be the order id, timestamp, etc. **/
}
const button = this;
GRToolbox.processCustomerAndBonus(grSetting).then(function(){
button.onclick=function(){};button.click();});}};
const grSettingCookie={
     "grCookieLifeTime": "180",
},
e=window,t=document;e.addEventListener("load",function(){const e=t.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://e9f87d8c82343264e6ba-2977c39e5e9390b1a89ab5ed2a171102.ssl.cf1.rackcdn.com/toolbox/geniusreferrals-toolbox_3.1.4.min.js",e.onload=function(){GRToolbox.catchReferrer(grSettingCookie);t.getElementsByClassName("w-button")[0].onclick = submit;};const n=t.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},!1)}();
</script>
<!-- ENDING GENIUS REFERRALS TRACKING CODE -->
2. Agregar el código de Seguimiento y Conversión en su Sitio Web.
Para instalar el fragmento de código siga las siguientes instrucciones:

1. Mediante la administración de su sitio ir a la página donde tiene el formulario de registro de sus suscriptores al cual quiere realizar el seguimiento y conversión.
2. Ir a las configuraciones de la página en la sección "Custom Code".
3. Buscar la opción "Inside <head> tag" y copiar el código obtenido anteriormente.
4. Salvar y publicar los cambios.
Prueba de que la referencia (Matt) se ha creado con éxito.

Una vez que John haya compartido los servicios con Matt, Matt hará clic en el enlace para compartir de John y aterrizará en su tienda. Matt buscará su producto, agregará algunos al carrito y finalmente pagará por los productos. Una vez que Matt haya completado una compra, se generará una nueva referencia en Genius Referrals. Para verificar si se ha creado la nueva referencia, vaya a la sección de su defensor sobre referencias Genius. Deberías poder ver a Matt en la list
Detalles del fragmento de código que se colocará en su editor.

Probar la instalación de su nuevo programa de referido.

Una vez que se complete y configure la instalación, su programa de referido debe estar funcionando. Sus clientes y visitantes podrán acceder al programa y recomendar sus productos. Algunas cosas que notarás en tu Sitio Web:
  1. Un nuevo enlace en la barra de navegación 'Refiere y Gana', que los visitantes y clientes (promotores) pueden usar para recomendar sus productos.
  2. Una plantilla instalada en la página del Programa de Referidos donde los promotores podrán:
  3. Aprender cómo funciona.
  4. Registrarse en el programa si no son sus clientes.
  5. Recomendar sus productos con amigos y familiares utilizando sus enlaces personales para compartir por correo electrónico, redes sociales, publicaciones en blogs, chats, etc.
  6. Revisar el desempeño del programa de referidos y reaccionar. Estas son algunas preguntas que podrían hacerse a sí mismos:¿Cuántas referencias y bonificaciones he generado?
  7. ¿Qué canales de distribución funcionan mejor para mí?
  8. ¿Dónde debo poner mis esfuerzos?
  9. Gestionar bonificaciones y pagos. Los bonos se pueden canjear por crédito en la cuenta local que tienen en tu negocio, efectivo en sus cuentas de PayPal, tarjetas de regalo, productos, cupones, etc. Casi cualquier cosa que desee.

Escenario: E001: Quiero que las referencias se registren en mi lista de suscriptores de correo electrónico y recompensar a los promotores una vez que la referencia ingrese su dirección de correo electrónico.

  1. En este escenario, estamos asumiendo lo siguiente:Tienes un sitio web.
  2. Ha configurado un programa de referido con Genius Referrals para que sus clientes y visitantes puedan referir sus servicios a amigos, familiares, colegas, etc.
  3. En su campaña de referido, le está dando $10 a sus clientes por cada referencia calificada. Una referencia calificada es un referido que completa el proceso de suscripción.
  4. John Smith es uno de sus mejores clientes, ama sus productos y se complace en compartir sus servicios con sus amigos, familiares, colegas, etc. Estos son sus datos personales:Nombre: John
  5. Apellidos: Smith
  6. Correo electrónico: john@example.com
  7. John refiere a su amigo Matt para que pueda suscribirse en su Sitio Web. Estos son sus datos personales: Nombre: Matt
  8. Apellidos: Hanks
  9. Correo electrónico: matt@example.com
  10. John recibe $10 como bonificación una vez que Matt ha completado el proceso de suscripción.
La siguiente imagen representa el flujo del escenario que estaremos probando:


Flujo del Programa de Referidos.

Prueba de que John puede compartir servicios en cualquier lugar.

Para que John pueda recomendar productos, debe acceder a la página del programa de referidos y utilizar las herramientas para compartir los servicios. John podrá utilizar todas las herramientas de la pestaña "Compartir". En este escenario, John envía a Matt su URL personal para que Matt pueda suscribirse y convertirse en un cliente.
Permitir que sus clientes refieran sus servicios en su programa de referidos.

Prueba de que la referencia (Matt) se ha creado con éxito.

Una vez que John haya compartido los servicios con Matt, Matt hará clic en el enlace para compartir de John y aterrizará en su sitio. Una vez que Matt haya completado el proceso de suscripción, se generará una nueva referencia en Genius Referrals. Para verificar si se ha creado la nueva referencia, vaya a la sección de Miembros en Genius Referrals . Deberías poder ver a Matt en la lista.
Generando una nueva referencia.

Prueba de que se le da un bono a John una vez que Matt ha completado el proceso de suscripción.

Ahora debemos verificar si el promotor (John) recibe una bonificación una vez que la referencia (Matt) completa su suscripción. Para probar esto, Matt tiene que completar su suscripción, una vez que se complete la suscripción, John debería recibir un bono de $10 en Genius Referrals. Para verificar si el bono fue otorgado al promotor en Genius Referrals, vaya a la sección de bonos. Debería poder ver la nueva bonificación de John en esta página.

Bonificación otorgada al promotor en el programa de referencia.

Eso es todo.

Si hasta aquí todo ha ido bien su programa de referido funciona correctamente.
English
LANGUAGE