Buscador y Cotizador

El buscador es un componente que se puede integrar en culquier sitio web a través de un script. Para agregarlo, además des script debes reservar un elemento donde se incluira el componente

Script

El script es configurable y puede agregarse en cualquier parte del documento, este es un ejemplo muestra los parámteros disponibles para agregar el buscador, en este ejemplo usamos nuestro servidor de stage, nosotros te proporcionaremos el token y host para que se conecte con tu cuenta en Book&Learn.

<div id="course-search"></div>
<script>
!function(e,t){
    t.WIDGET_CONFIG = {
            // Token to identify the resources that will be loaded
            WIDGET_ID:"widget-demo",

            // B&L server, it can point to stage or production
            API_URL:"http://stage.masterkeyeducation.com:8080/masterkey",

            // Selector of the element where the form will be displayed
            // optional, defaults to "#course-finder"
            element: 'course-search'
        };

        e.addEventListener("DOMContentLoaded",function(){var n=e.createElement("script");n.type="text/javascript",n.readyState?n.onreadystatechange=function(){"loaded"!==n.readyState&&"complete"!==n.readyState||(n.onreadystatechange=null)}:n.onload=function(){},n.src="https://search.bookandlearn.com/static/js/main.js?"+(new Date).getTime(),e.getElementsByTagName("head")[0].appendChild(n)},!0)
    }(document,window);
</script>

Parámetros

  • WIDGET_ID Requerido Cadena de caracteres que permite autenticar las peticiones y obtener los datos correspondientes a la agencia
  • API_URL Requerido Servidor de B&L al que se harán las peticiones
  • element Opcional Default: course-finder Selector del elemento donde se mostrará el formulario
  • loadBootstrap Opcional Default: false Bandera para definir si se carga o no Twitter Bootstrap 3.3.7. Util si el sitio ya lo incluye.

Configuración

Para generar el token es necesario que nos envíes la configuración, la cual te permitirá personalizar algunos aspectos del formulario. Estas son las opciones disponibles:

Opcion Descripcion
language* Idioma del widget
currency* Moneda para mostrar los precios locales ISO 4217
country* País que se usará para obetener los precios ISO 3166
distributorList Lista de oficinas en las que se podrá atender el lead
defaults Permite agregar valores por default a al crear un lead
courseTypeList Lista de tipos de cursos que se ofreceran
categoryList Categorías disponibles que se ofrecerán
minQty Cantidad minima de semanas que se ofreceràn

Los campos marcados con * son requeridos

Ejemplo:

{
    "language": "es",
    "currency": "MXN",
    "country": "MX",
    "distributorList": [1,2,3,],
    "defaults": [{"referrer": "Web"}]
}

Personalizar Diseño Buscador y Cotizador

Para el diseño del buscador utilizamos Twitter Bootstrap con el objetivo de tener una estructura estandarizada y genérica que puedes utilizar como base para que sea relativamente fácil de personalizar.

Ejemplos

a b
Buscador Cotizador

results matching ""

    No results matching ""