Incrustar

Esta guía te muestra paso a paso cómo incrustar widgets de Bookicorn en tu página web.

Código de incrustación

Obtener el código

  1. En el área de administración, ve a Marketing → Integraciones
  2. Selecciona tu integración (o crea una nueva)
  3. El código de incrustación se muestra directamente
  4. Haz clic en "Copiar código"

Estructura del código

El código de incrustación consta de dos partes:

<!-- 1. Bookicorn Loader (una vez por página) -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>

<!-- 2. Elemento del widget (donde debe aparecer) -->
<bookicorn-widget studio="your-studio" integration="your-integration"></bookicorn-widget>
<a href="https://www.bookicorn.net" target="_blank" rel="noopener" class="bookicorn-backlink" style="display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:8px;text-decoration:none;font-family:system-ui,-apple-system,sans-serif;">Powered by Bookicorn</a>
ParteDescripción
<script>Carga el loader del widget. Solo necesita insertarse una vez por página.
<bookicorn-widget>El widget real. Aparece exactamente donde lo coloques.
studio="..."El slug de tu estudio (se encuentra en configuración)
integration="..."El slug de tu integración (asignado al crearla)
<a> (backlink)Enlace "Powered by Bookicorn" - por favor no lo elimines

Guía paso a paso

1. Copiar el código

Copia el código de incrustación completo del área de administración.

2. Insertar el script

Añade la etiqueta <script> a tu página web. La ubicación ideal es en algún lugar que se cargue en todas las páginas relevantes - p. ej. en el footer o header de tu página web.

3. Colocar el widget

Inserta el elemento <bookicorn-widget> exactamente donde debe aparecer el widget.

4. Listo

El widget se carga automáticamente y muestra tus datos en vivo desde Bookicorn.

Ejemplo: Página HTML simple

<!DOCTYPE html>
<html>
<head>
  <title>Mi estudio de yoga</title>
</head>
<body>
  <h1>Bienvenido a nuestro estudio</h1>
  <p>Encuentra aquí nuestro horario de clases actual:</p>

  <!-- Bookicorn Widget -->
  <bookicorn-widget studio="my-yoga-studio" integration="course-schedule"></bookicorn-widget>
  <a href="https://www.bookicorn.net" target="_blank" rel="noopener" class="bookicorn-backlink" style="display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:8px;text-decoration:none;font-family:system-ui,-apple-system,sans-serif;">Powered by Bookicorn</a>

  <!-- Bookicorn Loader (antes de </body>) -->
  <script src="https://app.bookicorn.net/widget/loader.js" async defer></script>
</body>
</html>

Guías por plataforma

WordPress

Opción 1: Bloque HTML personalizado (recomendado)

  1. Edita la página deseada
  2. Añade un bloque "HTML personalizado"
  3. Inserta el código de incrustación completo
  4. Publica la página

Opción 2: Script global en el footer

Si necesitas el widget en varias páginas, puedes cargar el script una vez de forma global. Añade lo siguiente a tu functions.php:

function bookicorn_widget_script() {
  echo '<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>';
}
add_action('wp_footer', 'bookicorn_widget_script');

Después de eso, solo necesitas insertar el elemento <bookicorn-widget> en las páginas individuales.

Wix

  1. Abre el editor de páginas
  2. Haz clic en Añadir (+) → Embeds → Embed HTML
  3. Haz clic en "Introducir código"
  4. Inserta el código de incrustación completo
  5. Ajusta el tamaño del contenedor
  6. Publica

Squarespace

  1. Edita la página
  2. Añade un bloque de código
  3. Inserta el código de incrustación
  4. Guarda y publica

Webflow

  1. Arrastra un elemento Embed a la ubicación deseada
  2. Inserta el código de incrustación
  3. Opcional: Inserta el script globalmente en Site Settings → Custom Code → Footer
  4. Publica

Jimdo

  1. Añade un elemento Widget/HTML
  2. Inserta el código de incrustación
  3. Guarda

Otras plataformas

El código de incrustación funciona en cualquier página web que permita JavaScript. Busca en tu constructor de páginas web una opción como "Insertar HTML", "Bloque de código" o "Embed".

Varios widgets en una página

Puedes incrustar varias integraciones en la misma página. El script solo necesita cargarse una vez:

<!-- Widget de horario de clases -->
<bookicorn-widget studio="my-studio" integration="course-schedule"></bookicorn-widget>

<!-- Widget de paquetes -->
<bookicorn-widget studio="my-studio" integration="packages"></bookicorn-widget>
<a href="https://www.bookicorn.net" target="_blank" rel="noopener" class="bookicorn-backlink" style="display:block;text-align:center;font-size:11px;color:#9ca3af;margin-top:8px;text-decoration:none;font-family:system-ui,-apple-system,sans-serif;">Powered by Bookicorn</a>

<!-- Script solo UNA VEZ! -->
<script src="https://app.bookicorn.net/widget/loader.js" async defer></script>

Cómo funciona técnicamente

  1. El script loader se carga de forma asíncrona y no bloquea tu página
  2. Registra <bookicorn-widget> como un elemento personalizado
  3. Cuando se detecta un elemento widget, carga la configuración de tu integración
  4. Luego se carga el bundle del widget (almacenado en caché por el navegador)
  5. El widget se renderiza en un Shadow DOM - completamente aislado de tu página web
  6. Tus datos se cargan en vivo desde Bookicorn

Shadow DOM - ¿Qué significa eso?

El widget se ejecuta en lo que se llama un Shadow DOM. Esto tiene dos grandes ventajas:

  • Tus estilos están seguros: El CSS de tu página web no puede influir en el widget
  • Sin conflictos: El CSS del widget no cambia nada en tu página web

No necesitas hacer nada - funciona automáticamente.

¿Qué pasa al hacer clic?

Los visitantes pueden ver las clases en el widget (abre un modal de detalles con toda la información) y explorar perfiles de entrenadores. Acciones como reservar o comprar paquetes redirigen al visitante a la plataforma Bookicorn, donde la transacción se procesa de forma segura. El enlace se abre en una nueva pestaña - tu página web permanece abierta en segundo plano.

Rendimiento

  • El script se carga de forma asíncrona (async defer) y no bloquea tu página
  • El bundle del widget se almacena en caché por el navegador después de la primera carga
  • Los datos solo se cargan cuando el widget se hace visible

Solución de problemas

El widget no carga

Comprueba lo siguiente:

  1. ¿Está la etiqueta <script> presente en la página?
  2. ¿Está el elemento <bookicorn-widget> insertado correctamente?
  3. ¿Son correctos los slugs de studio e integration?
  4. ¿Está la integración activa en el área de administración?
  5. ¿Está activado el complemento "Website Integration"?

El widget muestra un error

MensajeSolución
Sin datosComprueba si existen clases/paquetes/entrenadores en Bookicorn
Integración no encontradaComprueba el slug en integration="..."
Estudio no encontradoComprueba el slug en studio="..."

El widget está cortado

  • Comprueba si el contenedor de tu página web tiene suficiente espacio
  • Elimina overflow: hidden del elemento padre
  • El widget ajusta automáticamente su altura al contenido

Comprobar la consola del navegador

Abre las herramientas de desarrollador de tu navegador (F12) y busca errores en la consola:

  • Error 404: El slug está mal escrito
  • Error 403: Complemento no activo o integración desactivada

Preguntas frecuentes

¿Necesito insertar el script en cada página?

Si incrustas el script una vez de forma global (p. ej. en la plantilla del footer), es suficiente. Luego solo necesitas colocar el elemento <bookicorn-widget> en las páginas individuales.

¿Puedo mostrar el widget en un popup o modal?

Sí. Asegúrate de que el script ya esté cargado antes de que se abra el popup. La forma más fácil es tener el script en el footer global.

¿Funciona con herramientas de consentimiento de cookies?

Los widgets de Bookicorn no establecen cookies de seguimiento o marketing. Estrictamente hablando, no se requiere consentimiento. Para máximo cumplimiento, puedes cargar el script solo después del consentimiento.

¿Puedo controlar el ancho del widget?

El widget toma el ancho completo del contenedor en el que está colocado. Por lo tanto, puedes controlar el ancho a través del contenedor HTML circundante. Además, puedes establecer un ancho máximo en el Widget Builder.

¿Necesito conocimientos técnicos?

No. Solo necesitas acceso al HTML de tu página web. Con la mayoría de los constructores de páginas web, esto se hace a través de un "bloque HTML" o "code embed".

Siguientes pasos

ZurückConstructor de widgetsWeiterPersonalizar

Fragen oder Feedback?

Wir helfen dir gerne weiter. Kontaktiere unser Support-Team.