# Cómo incrustar una aplicación de Velneo Web en un DIV de una página html

En primer lugar, necesitamos los binarios de Velneo Web (si eres suscriptor, puedes solicitarlos a soporte de Velneo).

Si queremos tener una base para comenzar, si eres suscriptor, puedes solicitar a soporte Velneo los ficheros correspondientes.&#x20;

{% hint style="danger" %}
No poner directamente en producción sin antes leer detenidamente esta documentación.
{% endhint %}

## Pasos para la instalación

### Ajustes del servidor web

El fichero con extensión wasm está en formato [brotli](https://es.wikipedia.org/wiki/Brotli), así que hay que habilitar el soporte de dicho formato en nuestro servidor web.&#x20;

Además, para la carga de Velneo Web es necesario tener ciertas cabeceras definidas en nuestro servidor Web.

En esta [sección de la documentación de la vLanzadera](https://doc.velneo.com/aplicacion-vlanzadera-y-login-social/configuracion-de-vlanzadera-en-apache-en-servidores-propietarios#paso-5-configuracion-adicional-de-apache-para-la-vlanzadera) está el fichero **vLanzadera.conf** para configurarlo en Apache.

### Ajuste de rutas

Suponiendo que nuestra página web esté en la ruta %`site_root%/app`, hay que descomprimir el fichero zip con los binarios en dicha ruta.

El árbol de directorios tiene que quedar similar a este:

<figure><img src="https://content.gitbook.com/content/3LV49PQOXXZc5eok6Vpo/blobs/5HpaVcbuYimVGF6l3zNA/image.png" alt=""><figcaption></figcaption></figure>

Donde **index.html** es la página Web donde queremos incluir Velneo vClient Web.

### Contenido de la página

El contenido del fichero **index.html** es nuestra propia página Web, eso sí, tenemos que añadir varios elementos esenciales para que funcione Velneo vClient Web. Aquí tienes una página con lo básico para ello:

```html
<html>
	<head>
		<meta charset="utf-8">
		<script src="./js/qtloader.js"></script>
		<script src="./js/app.js"></script>
	</head>
	<body>
		<h3>Bienvenido a tu aplicación Web hecha con Velneo</h3>
		<span id="qtstatus"></span>
		<div id="screen"></div>
	</body>
</html>
```

Si quieres incluirlo en tu propia página debes:

* incluir la carga de esos dos archivos js.
* Declarar un elemento en el DOM para la salida de mensajes (en este caso es el *span* con el id **qtstatus**).
* Declarar un div (**debe ser un div**) con el nombre "screen" (no puede cambiarse).

### Ajuste de parámetros

Para el correcto funcionamiento de Velneo vClient Web hay que ajustar ciertos parámetros en el fichero **app.js**.

{% hint style="warning" %}
Varios de esos parámetros no deben ir directamente en el lado del clientes sino obtenerlos del lado del servidor (por ejemplo, si se usa PHP, durante la creación de la página).
{% endhint %}

En el ejemplo suministrado el usuario y la contraseña están definidas manualmente (líneas 3 y 4). En un entorno de producción, estos valores deberían ser recogidos por un formulario web.

```javascript
/* Estos parámetros deben ser definidos en el lado del servidor. Nunca en la parte cliente */
var user = "miusuario";
var password = "mipass";
var vrl = 'vatps://${user}:${password}@midominio.com:wsPort/id_instancia'
```

También existe la posibilidad de enviar ciertos valores a la instancia que se carga, añadiendo a la variable **argJs** (línea 12), un nuevo elemento con el parámetro `"/userParam"`. Lo que enviemos ahí, ya sea un JSON, un base64 o un token JWT. El valor llega a la instancia y puede ser procesada en el onInit. El uso de un token JWT como parámetro en web, permite gestionar la autenticación de usuarios, recibiendo la información de usuario en la aplicación podremos gestionarla lo que necesitemos para identificar al usuario en la aplicación.

En la variable **vrl** (línea 5), hay que indicar el dato `wsPort, (puerto vatp + 9)`.

Y por último, en la línea 10, sustituir la versión por la correspondiente a los binarios descargados:

`var fileWasm = './34.0/assets/vClient';`<br>
