Insertar widgets
Para que una integración aparezca en tu web, pegas su código en tu web. Esta página muestra dónde encuentras el código, cómo está formado y qué hacer si el widget no carga. Cómo se crea una integración lo encuentras en Crear y editar integraciones.
Copiar el código de una integración
- Abre Manager → Integración del sitio web.
- Toca la tarjeta de la integración y elige Copiar código. En el móvil encuentras Copiar código también dentro de la propia integración, debajo de la lista de bloques.
- En la ventana Código de inserción tocas Copiar. Aparece «Código embed copiado al portapapeles».
En la misma ventana aparecen el Idioma del widget (el idioma de tu página de reservas), el Color principal y adónde lleva un clic en una oferta (Al hacer clic en una oferta se abre; por defecto, Panel de información (estándar)).
Así está formado el código
El código tiene este aspecto, con el identificador de tu estudio y de tu integración:
<!-- Bookicorn Widget -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
<bookicorn-widget studio="tu-estudio" integration="tu-integracion"></bookicorn-widget>
<a class="bookicorn-credit" href="https://www.bookicorn.net" target="_blank" rel="noopener">Powered by Bookicorn</a>
- El
<script>carga el widget. No espera al resto de tu página. <bookicorn-widget>es el lugar donde aparece el widget.- El enlace «Powered by Bookicorn» forma parte del código. Si lo quitas, el widget lo vuelve a poner.
El widget aparece directamente en tu página, no en un marco propio. Tus estilos y los del widget no se influyen entre sí.
Pegar el código en WordPress, Wix, Squarespace, Jimdo o Webflow
Pega el código completo en el lugar de tu web donde deba aparecer el widget. Tu creador de webs necesita para ello un elemento que acepte código HTML propio con JavaScript. Según el creador se llama «HTML», «Código», «Embed» o «Insertar»:
- WordPress: un bloque para HTML propio; en el editor de bloques, «HTML personalizado».
- Wix: un elemento para insertar código propio.
- Squarespace: un bloque de código.
- Jimdo: un elemento para widgets o HTML.
- Webflow: un elemento Embed.
- Web propia: el código directamente en el HTML de la página.
Si tu creador de webs muestra el código en una caja de altura fija, ajusta la altura para que el widget se vea entero. Si tu creador de webs no puede incluir código propio, simplemente enlaza tu página de reservas.
Insertar varios widgets en una página
Puedes insertar varias integraciones en la misma página. Para ello, pega el elemento <bookicorn-widget> de cada integración. El <script> basta una vez por página.
Qué pueden hacer los visitantes en el widget insertado
- Ver ofertas, citas, paquetes y entrenadores, todo en directo desde Bookicorn.
- Hacer clic en una oferta: se abre una ventana de información con Resumen general y Detalles y Entrenador.
- Reservar ahora, comprar paquetes, vales e iniciar sesión: abre tu página de reservas en una pestaña nueva. Al reservar, la cita elegida ya está seleccionada.
Así que la reserva y el pago propiamente dichos se hacen en tu página de reservas, no en tu web.
Dominios permitidos: que el widget solo funcione en tu web
En Medidas → Dominios permitidos de la integración introduces las direcciones en las que puede funcionar tu widget, por ejemplo www.mi-estudio.es, y tocas Agregar. Después, Ahorrar (el botón de guardar). Así el widget solo funciona en esos dominios y sus subdirecciones. En otras webs muestra «Domain nicht autorisiert» (este mensaje aparece en alemán).
Si no introduces ningún dominio, Bookicorn no comprueba la dirección y el widget funciona en cualquier web. El aviso del Manager («Sin ninguna entrada el widget no funciona en ningún sitio.») no es correcto de momento.
Si quitas un dominio, el widget deja de funcionar allí. Por eso el Manager pregunta antes.
Medidas lo encuentras en la integración, debajo de la lista de bloques. Esa lista la muestra el Manager en el móvil y en ventanas de navegador estrechas.
Aviso de privacidad para tu web
Debajo del código, en la ventana Código de inserción, hay una Cláusula para la política de privacidad. Describe que tu página incluye el widget de Bookicorn, qué datos se tratan y que la reserva se hace en la plataforma de reservas. Toca Copiar cláusula y pégala en tu política de privacidad.
El widget no carga o muestra un mensaje de error
En lugar del contenido, el widget muestra un mensaje:
| Mensaje | Causa | Solución |
|---|---|---|
| No se ha encontrado el widget. | el identificador del código no es correcto, o la integración está desactivada o borrada | volver a copiar el código, activar la integración con Activar ahora |
| Widget no disponible | la extensión Integración del sitio web no está activa | activar la extensión en la Tienda de extensiones |
| Domain nicht autorisiert | tu web no está en Dominios permitidos | introducir el dominio y Ahorrar |
| El widget "…" estará disponible pronto | el bloque todavía no está implementado en el widget insertado (Suscripciones, Inicio de miembro, Perfil, Cartera) | quitar el bloque de la integración |
Si no aparece nada, comprueba:
- ¿Está pegado el código completo, incluido el
<script>? - ¿Permite tu creador de webs JavaScript en ese elemento?
- ¿Has guardado la integración después del último cambio?
Preguntas frecuentes
¿Dónde encuentro el código para mi web? En Integración del sitio web: toca la tarjeta de la integración y Copiar código.
¿Tengo que volver a pegar el código después de cada cambio? No. Después de Ahorrar, el widget muestra la versión nueva.
¿Puedo quitar «Powered by Bookicorn»? El enlace forma parte del código. Si lo quitas, el widget lo vuelve a poner.
Mi widget muestra «Domain nicht autorisiert». Añade tu web en Medidas → Dominios permitidos o quita allí todas las entradas, y toca Ahorrar.
¿Puedo pegar el código en Wix? Sí, con un elemento para insertar código propio. Ajusta la altura del elemento para que sea suficiente.