Widget

Widget

Introducción

Widget SaaS es una librería que carga el SaaS de Bewe dentro de un elemento contenedor del HTML de tu página web. En él puedes inyectar estilos, cargar una sección del SaaS, etc.

Modo de uso

Para poder usar la librería, primero debes agregar un enlace a la misma mediante un script con src

<script src="https://web.bewe.co/widget/BWSaas.js"></script>

Una vez hecho esto podrás cargar el objeto BWSaas en tu página web y podrás usar sus métodos.

Métodos

loadSaas(selector, options)

Carga el SaaS de Bewe dentro de un elemento del DOM de tu página.

  • selector (string): selector CSS que apunta al elemento contenedor dentro del cual queremos cargar el SaaS de Bewe.

  • Options (object): conjunto de opciones de configuración.

    • idCenter (string): id del centro para el que se quiere cargar el SaaS de Bewe.
    • grant (string): identificador del empleado del centro para poder loguearse.
    • section (string): sección a cargar del SaaS de Bewe. Si no se establece, cargará por defecto el dashboard. Ver listado completo de secciones.
    • header (boolean): Si es true se incluirán menús de navegación del SaaS. Si es false no se mostrarán. Por defecto tiene el valor true.
    • customStyles (string): estilos css a inyectar en el SaaS de Bewe, para poder personalizarlo.
    • events (object): eventos ocurridos dentro del SaaS de los cuales queremos modificar su comportamiento por defecto. El listado completo de eventos disponibles puedes verlo en la sección Edición de acciones por defecto

  • Retorna un objeto, siempre que no se use el event handler (método .on). Este objeto contiene las siguientes utilidades:

{
  iframe,       // Instancia del iframe generado
  goToSection,  // Método goToSection que se define dentro del método loadSaaS
  back,         // Función que hace que el iframe navegue hacia la anterior pantalla 
  forward,      // Función que hace que el iframe navegue hacia la pantalla posterior
}

Este objeto se devuelve dentro de un Promise de javascript. así que para poder obtenerlo necesitáis usar el .then() o async/await, tal que así:

  // Con await
  const obj = await BWSaas.loadSaaS(...);

  // Con método .then() de promises
  BWSaas.loadSaaS(...).then(obj => {
    ...
  })

Ejemplo de uso:

          BWSaas.loadSaaS("#app", {
            idCenter: '5be19d0dfc8dd33587ee88fb',
            grant: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1YmUxOWQwZGZjOGRkMzM1ODdlZTg5MDIiLCJwYXNzd29yZCI6IiQyYSQxMCQzLlNJSjNRVFVIQVV2T3RPU3pGd1p1aDc2c3ZoYnFjaHZUWjl6eTV1Y2U1ZHBadFhpNWVETyIsImlhdCI6MTY0ODEzNTQzNiwiZXhwIjoxNjYzNjg3NDM2fQ.ZZwe3-MTIsI3AzPahbaZrEO-_m2Ra4ITwKh260nts4k',
            section: 'clients',
            events: {
              agendaClickClient: (idClient) => {
                window.location.href = '/clients/' + idClient
              },
            },
            customStyles: `
              body {
                background-color: red !important;
              }
            `
          });

on(eventName, selector)

Event handler que podemos utilizar para suscribirnos a eventos. Su uso es opcional.

  • eventName (string):: nombre del evento.
  • selector (string): selector CSS que apunta al elemento cuyo evento queremos escuchar.

Para ver su funcionamiento y los eventNames disponibles, ir a la sección Event andler.

Listado de secciones

a continucación exponemos un listado de secciones que se pueden cargar en el SaaS de Bewe:

  • dashboard: Dashboard.
  • book: Agenda de citas.
  • book/work/ID_WORK: Agenda de citas abriendo una cita concreta (work).
  • clients: Listado de clientes.
  • clients/ID_CLIENTE: Ficha de cliente concreto especificado por ID_CLIENTE.
  • cash/tickets: Facturación.
  • cash/expenses: Gastos.
  • cash/salary: Sueldos y comisiones.
  • cash/purchaseorder: Orden de compra.
  • cash/budgets: Presupuestos.
  • cash/balanceregister: Cierre de caja.
  • cash/moneymovements: Movimientos de caja.
  • cash/countcash: Contar caja.
  • cash/debts: Deudas.
  • :cash/prepaids: Saldos.
  • cash/giftcards: Tarjetas regalo.
  • cash/subscriptions: Cobros recurrentes.
  • cash/blockstats: Estadísticas.
  • cash/balance: Balance.
  • marketing/sendings: Envíos realizados.
  • marketing/programedSendings: Envíos programados.
  • marketing/templates: Plantillas de email.
  • messageTemplates: Plantillas de mensajes.
  • online/rules: Tareas automáticas.
  • online/events: Eventos.
  • online/courses: Cursos.
  • online/tv: TV.
  • online/translations: Textos.
  • web/rating: Valoraciones.
  • web/stars_comments: Comentarios.
  • web/pictures: Imágenes.
  • web/custom: Website.
  • config/other: Logo.
  • treatments: Servicios.
  • products: Productos.
  • marketing/offers_fidelity: Fidelización.
  • marketing/offers_packs: Bonos.
  • marketing/offers_discounts: Descuentos.
  • marketing/offers_subscriptions: Suscripciones.
  • employees: Profesionales.
  • web/infocenter: Información.
  • config/timeholidays: Horarios y festivos.
  • config/credentials: Credenciales.
  • config/book-config: Agendas y reservas.
  • config/booking: Reserva online.
  • config/resources: Recursos extra.
  • config/billconfig: Procesos de venta.
  • config/multicash: Multi-caja.
  • config/ticket: Impresión de tickets.
  • config/clients: Clientes.
  • config/consent: Consentimientos.
  • config/providers: Proveedores.
  • config/token: Token.
  • config/smsconfig: Habilitar SMS.
  • config/premiumbills: Tus pagos.
  • config/importclients: Importación de datos.
  • socialmedia: Redes sociales.

Event handler

El método on() tiene los siguientes posibles eventos y selectores:

  • .on('load'): Actúa una vez carga por completo la página (equivalente al evento DOMContentLoaded). Ejemplo de uso:
BWSaas.on('load').loadSaaS(...)
  • .on('click', selector): Actúa una vez se hace click en el elemento definido por "selector" (equivalente al evento click). Ejemplo de uso:
BWSaas.on('click', '#boton-o-enlace').loadSaaS(...)

Edición de acciones por defecto

Nuestra librería tiene un sistema en el que puedes hacer que se responda con un callback personalizado a ciertos eventos ocurridos dentro del iframe, en vez de realizarse la acción por defecto. Para hacer uso de ésto solo tiene que agregar un atributo events al método loadSaaS, y asignarle una función para que cuando el cliente realice una acción determinada, se ejecute la acción de la función.

La forma general de uso es la siguiente:

BWSaas.on('load').loadSaaS('SELECTOR', {
    ...
    events: {
        nombreEvento: function (data, goToSection) {
            // Código personalizado aquí.
           goToSection('nombreSección');
        }
    }
})

Donde nombreEvento es el nombre a detectar dentro del iframe. data es un objeto json con los datos obtenidos en el evento, como por ejemplo: id del cliente, id del ticket, etc. Y goToSection es una función auxiliar que puedes usar para cambiar de sección en la que te encuentras sin tener que recargar todo el SaaS otra vez.

A continuación os muestro un listado de todos los eventos de los que disponemos, con sus correspondientes parámetros:

  • onClickRowClient: Cuando se hace click en un cliente en el listado de clientes de la seción clients. Como parámetro tendremos idClient, que corresponde al id del cliente sobre el que se ha hecho click.
BWSaas.on('load').loadSaaS('SELECTOR', {
    ...
    events: {
        onClickRowClient: function ({ idClient }, goToSection) {
            // Código personalizado aquí.
        }
    }
})
  • onClickAgendaClient: Cuando se hace click en un cliente en una reserva de la seción agenda. Como parámetro tendremos idClient, que corresponde al id del cliente sobre el que se ha hecho click.
BWSaas.on('load').loadSaaS('SELECTOR', {
    ...
    events: {
        onClickAgendaClient: function ({ idClient }, goToSection) {
            // Código personalizado aquí.
        }
    }
})
  • onClickRowTicket: Cuando se hace click en un ticket en el listado de tickets de la seción cash/tickets. Como parámetro tendremos idTicket, que corresponde al id del ticket sobre el que se ha hecho click.
BWSaas.on('load').loadSaaS('SELECTOR', {
    ...
    events: {
        onClickRowTicket: function ({ idTicket }, goToSection) {
            // Código personalizado aquí.
        }
    }
})
  • onClickRowEmployee: Cuando se hace click en un profesional en el listado de profesionales de la seción employees. Como parámetro tendremos idEmployee, que corresponde al id del empleado sobre el que se ha hecho click.
BWSaas.on('load').loadSaaS('SELECTOR', {
    ...
    events: {
        onClickRowEmployee: function ({ idEmployee }, goToSection) {
            // Código personalizado aquí.
        }
    }
})
  • goToRequest: Cuando se hace click en ir a la solicitud en el panel de agenda. 
BWSaas.on('load').loadSaaS('SELECTOR', {
    ...
    events: {
        goToRequest: function ({idWork}, goToSection) {
            // Código personalizado aquí.
        }
    }
})