Hemos desarrollado una calculadora para ser integrada rápidamente en Joomla. 

La calculadora es un componente que se puede integrar a cualquier sitio web tan sólo añadiendo un script. Cuenta con muchas ventajas al ser SEO friendly, no interfiere en el diseño de el sitio y es fácil de implementar al contar con un script builder

Aquí puedes ver un ejemplo de integración: 

Paso Previo a la integración 

Autenticación

Antes de comenzar con la integración, el User Experience Manager te habrá proporcionado unas variables que utilizarás en la integración.

  • Token: permite identificar el formulario que estás enviando a nosotros a través de un token

Si no tienes esta información, por favor, ponte en contacto con nosotros para que te proporcionemos estos datos.

Paso 1

Obtener el código a través del builder

Ve a la página del builder y configura en la parte superior de arriba el "token" que te hemos generado tal y como aparece a continuación: 

A continuación tienes que seleccionar como quieres que sea configurada la calculadora 

Si quieres que aparezca un "check box" por temas de "términos y condiciones" debes añadir ahí la URL de destino donde viene esa información. 

Una vez configurados estos pasos debes seleccionar los campos que quieres que aparezcan en el "lead form". Puedes añadir aquellos que quieres que aparezcan y los que son requeridos. 

Una vez seleccionado la configuración de la calculadora te vamos a generar un código que encontrarás en la parte inferior.

Paso 2

Además de añadir la calculadora puedes crear un espacio donde se van almacenando los presupuestos realizados por el cliente 

Si quieres añadir ese código, ve al builder a la opción de "button" y allí podrás configurar donde quieres que esté ubicado y generar un código

Ese código debe igual copiar y pegarse en el editor de Joomla junto con el resto de códigos 

Paso 3

Activa en el editor de texto de Joomla que puedas agregar código. Se tienen que quitar el filtro de editor de texto

O puedes entrar a través de Global configuration > Text filters

Cambiar a “No filtering” para el tipo de usuario que realizará el cambio. Si es el admin principal sería Public y Super Users

En la página donde se colocará la calculadora se agregarán los scripts que generamos en el siguiente paso

Paso 4

Ahora es momento de configurar en cada landing page el código de la calculadora. Como está diseñada la calculadora es para que puedas añadir:

  • Calculadora por país, donde aparecerá un selector con las ciudades disponibles, de ahí escuelas disponibles de la ciudad seleccionada y una vez seleccionada la escuela aparecerán los cursos, fechas, duración y alojamiento disponible de esa escuela. 
  • Calculadora por ciudad, donde aparecerá un selector con las escuelas disponibles de la ciudad seleccionada en el builder. El user una vez seleccionada la escuela aparecerán los cursos, fechas, duración y alojamiento disponible de esa escuela. 
  • Calculadora por escuela, donde aparecerá un selector con las sedes disponibles de esa escuela (por ej. EC English tiene 29 campus, por lo que aparecerá el listado de esos centros). Una vez seleccionado el campus aparecerán los cursos, fechas, duración y alojamiento disponible de esa escuela. 
  • Calculadora por campus, donde aparecerá un selector con los cursos, fechas, duración y alojamiento disponible de esa escuela. 

Una vez seleccionada la configuración debes ir a la "Landing Page" que estés diseñando y pegar el código generado. 

En el script debemos insertar el elemento book-learn-component generado en el script builder en quote y el botón book-learn-button generado con el script builder en button junto con el código generado en "settings"

Acompañamos un ejemplo de código que tendrán que implementar. (no debes pegar éste código en tu web ya que es solo un ejemplo)

De la parte de settings

<script> var blCalculatorConfig = { "host":"https://server.bookandlearn.com/masterkey", "widget-id":"TLhesbE2ywrA7NSnkrinMNqg", "lang":"es_es", "localCurrency":"USD", "primaryColor":"#DD0F20", "secondaryColor":"#888888", "terms-and-conditions": "", "fields":'[["name-required",true],["lastName-required",true],["email-required",true]]' }; </script> <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js"></script> <script src="https://s3.us-west-2.amazonaws.com/bookandlearn2develop/scripts/calc-compoments-loader.js?d=1553191680472"></script>

De la parte donde seleccionas qué Escuela / País / Ciudad o Campus quieres añadir: 

<book-learn-component course-type="Language" course-search-mode="institute" institute-id="3" > </book-learn-component>


Y de la parte donde aparecerán los presupuestos creados por el estudiante en la página web el siguiente código:

<book-learn-button label="Quotations" top left> </book-learn-button>

Paso 5 

Configurar el reCAPTCHA para que no haya problemas que los bots puedan acceder al contenido web, con el objetivo de autenticar los usuarios que entran en la web. 

Si no tienes acceso a tu Google reCAPTCHA puedes pedirlo a nosotros que lo agreguemos a Google, para lo cual deberas proporcionarnos el dominio de tu sitio web.

Paso 6

Verificar que funciona correctamente. 

Aparecerá primero el Lead Form 

Una vez se completen o rellenen los campos del formulario aparecerá el selector para calcular el presupuesto

Y por último aparecerá el presupuesto completo. 

Es importante revisar en el CRM que las "oportunidades" se están guardando en el sistema. 

Los presupuestos generados por el cliente los encontraras en el perfil del cliente

Si tienes dudas con la integración, puedes comunicarte con nosotros. 

Did this answer your question?