La integración debe llevarse a cabo en un HTML.

Paso 1 Necesitas tener los siguientes datos a mano:

Nota: para obtener tu token contáctanos.

Paso 2 A continuación se observa la estructura general del html muestra con una integración del course finder.

Nota que dentro del <body></body> del hmtl encontramos tres etiquetas <div></div>  y un <script></script>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">

<title>Courses</title>

<!-- Bootstrap when loadBootstrap == false -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

<!-- Header -->
<div>
...
</div>

<!-- Course finder -->
<div class="page" id="course-finder" style="min-height:578px;">
<noscript>You need to enable JavaScript to run this app.</noscript>
</div>

<!-- Footer -->
<div>
...
</div>

<!-- Script variables -->
<script>
var WIDGET_CONFIG = {
 "API_URL": "https://server.bookandlearn.com/masterkey",
 "WIDGET_ID": "token",
 "loadBootstrap": false
};
</script>
<script type="text/javascript" src="https://search.bookandlearn.com/static/js/main.js"></script>
</body></html>

Paso 2.1 Dentro del  primer div se coloca el elemento header de tu sitio. Los estilos y contenido del header son provistos por cada agencia, y pueden ser una versión más sencilla de la de tu página principal para un mantenimiento más sencillo.

<!-- Header -->
<div>
...
</div>

Paso 2.2 Dentro del tercer div se coloca el  footer de tu sitio.  Los estilos y contenido del footer son provistos por cada agencia, y pueden ser una versión más sencilla de la de tu página principal para un mantenimiento más sencillo.

        <!-- Footer -->
<div>
...
</div>

Paso 3 Dentro del segundo div se mostrará el course finder en nuestra página. 

       <!-- Course finder -->
<div class="page" id="course-finder" style="min-height:578px;">
<noscript>You need to enable JavaScript to run this app.</noscript>
</div>

Es importante que dicho elemento tenga el atributo id="course-finder".

Paso 4 El script es la parte más importante para la configuración del course finder.

<!-- Script variables -->
<script>
var WIDGET_CONFIG = {
 "API_URL": "https://server.bookandlearn.com/masterkey",
 "WIDGET_ID": "token",
 "loadBootstrap": false
};
</script>

Dentro hay un objeto WIDGET_CONFIG, el cual tiene 3 Keys:

  • "API_URL":
  • "WIDGET_ID":
  • "loadBootstrap":

paso 4.1 En  el key API_URL conserva la misma url proporcionada

Paso 4.2 En el key  WIDGET_ID debes sustituir el  token por el que nosotros te proporcionamos.

Paso 4.3 Debes decidir si quieres cargar bootstrap a tu página. Nosotros te recomendamos que lo hagas.

En el key loadBootstrap del script escribe  true para cargarlo

Pero si de alguna manera crees que bootstrap está interfiriendo con los estilos de tu página, o si ya lo tienes cargado en los links de tu html entonces escribe false.

A continuación puedes ver un ejemplo de configuración, recuerda que el token es único por cada agencia.




Did this answer your question?