Integra la venta en la web que ya tienes
Cómo pegar la parrilla de eventos, el calendario, la ficha de un evento o el botón de compra en tu propia web, en WordPress, Wix, Squarespace o a mano.
Última actualización: 2 de septiembre de 2026
Tu web se queda como está y la venta entra dentro. Todo se hace con un poco de HTML y una línea de JavaScript, así que funciona igual en WordPress, en Wix, en Squarespace o en una web hecha a mano.
Con el plan Free puedes previsualizar el widget en el panel, sobre tus eventos reales. Copiar el código para pegarlo en otra web es lo que necesita el plan Pro.
Antes de empezar
Necesitas dos cosas: el dominio de tu sala y saber de dónde se copia cada fragmento.
El dominio de tu sala es la dirección desde la que Tickeep sirve tu venta: tu dominio propio si lo tienes conectado, y si no tu subdominio tu-sala.tickeep.com. Va escrito dentro de cada fragmento y es lo único que hace falta. En los ejemplos de esta guía es entradas.midominio.com; sustitúyelo por el tuyo o, mejor, copia el código ya relleno desde el panel.
El código se copia del panel, en Diseño web → Integrar en tu web, que tiene cuatro pestañas:
| Pestaña | Para qué |
|---|---|
| Modo del sitio | Decidir qué sirve tu sitio de Tickeep y declarar tus dominios autorizados |
| Widget de eventos | Generar el código de la parrilla, el calendario y la ficha, con vista previa sobre tus eventos reales |
| Botones de compra | Decidir cómo se ven todos tus botones y copiar el <script> |
| Integrar en WordPress | El dominio de tu sala y las instrucciones para pegarlo allí |
El código del botón de un concierto concreto se copia además desde su propia ficha, en Enlaces y botón de este evento → Código del botón de compra. Es el camino corto, y el que más se usa.
No hay ninguna clave de API que pegar, y no la va a haber. El script sabe a qué sala pertenece por el dominio del que se descarga, y lo único que devuelve es el catálogo que ya está publicado en tu web: fechas, tarifas y el aspecto de tu botón. Pedir una credencial para leer eso no protegería nada y sí rompería el caso normal.
Las cinco piezas
| Pieza | Qué pinta | Cómo se dibuja |
|---|---|---|
lista | La parrilla de próximos eventos | En un marco aislado |
calendario | Los eventos en una parrilla mensual | En un marco aislado |
evento | La ficha compacta de un evento, con su botón | En un marco aislado |
compra | Los precios en vivo y el botón de compra | En tu página, con tu tipografía |
boton | Un enlace de compra, sin JavaScript | En tu página |
Las tres primeras viven dentro de un marco aislado para que el CSS de tu web no les rompa la maquetación. Por eso mismo no heredan tu tipografía: usan la plantilla que hayas elegido en Tickeep. Las dos últimas son HTML tuyo y se ven como el resto de tu página.
Las tres primeras admiten además ventana emergente, con data-modo="popup": no se monta nada al cargar y el contenido se abre en una capa al hacer clic.
Los códigos
La parrilla de eventos
<div data-tickeep="lista"></div>
<script src="https://entradas.midominio.com/embed.js" async></script>
Es la pieza de la página de programación. Sin más atributos enseña tus próximos eventos con la disposición que hayas configurado en el panel.
La parrilla con opciones
<div data-tickeep="lista" data-tema="oscuro" data-limite="6" data-columnas="3" data-categoria="conciertos"></div>
<script src="https://entradas.midominio.com/embed.js" async></script>
Así es como montas una página solo de conciertos y otra solo de teatro, cada una filtrada por su categoría, sin duplicar nada.
La ficha de un evento
<div data-tickeep="evento" data-evento="la-oreja-de-van-gogh"></div>
<script src="https://entradas.midominio.com/embed.js" async></script>
El valor de data-evento es el identificador del evento, el mismo que aparece en su dirección pública. Cópialo del panel: escribirlo de memoria es la forma más rápida de que no salga nada.
El calendario en ventana emergente
<div data-tickeep="calendario" data-tema="claro" data-modo="popup"></div>
<script src="https://entradas.midominio.com/embed.js" async></script>
Con data-modo="popup" el nodo no pinta nada hasta que alguien hace clic. Sirve para colgar el calendario de un enlace del menú sin ocupar media portada.
Los precios en vivo y el botón de compra
<div data-tickeep="compra" data-evento="la-oreja-de-van-gogh" style="text-align:left">
<a href="https://entradas.midominio.com/comprar/la-oreja-de-van-gogh" style="display:inline-flex;align-items:center;justify-content:center;gap:0;background:#7c3aed;color:#ffffff;padding:12px 24px;border-radius:8px;font:inherit;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;box-sizing:border-box">Comprar entradas</a>
</div>
<script src="https://entradas.midominio.com/embed.js" async></script>
Esta es la pieza principal, y va dentro de la página que ya escribes para cada concierto. Las tarifas y sus importes se piden en cada visita, no se hornean en tu HTML: subes un precio en el panel y tu web deja de mentir sola. El botón, además, hereda la tipografía de tu tema, así que parece tuyo.
Es el único fragmento largo de todos, y por dos razones que conviene entender antes de tocarlo:
- El enlace viene escrito dentro. No lo crea el script: así el botón funciona desde el primer byte y aunque el JavaScript no llegue a cargar. Si borras el
<a>, no hay botón; el script solo añade los precios encima y repasa el aspecto. - El
stylelargo es el aspecto que has elegido en el panel, horneado para que el botón se vea bien antes de que cargue nada. Los colores del ejemplo son los de fábrica; el código que copies del panel traerá los tuyos.
Cópialo del panel en lugar de teclearlo: ahí sale ya con tu dominio, tu identificador de evento y tu estilo.
Aunque pegues cinco bloques distintos en la misma página, el <script> se pone una vez. Es el mismo fichero para todas las piezas y para todas las salas, ocupa unos 16 KB y el navegador lo guarda en caché. Si tu gestor te deja poner el script en la plantilla, ponlo ahí y en los bloques deja solo el div.
Los atributos
| Atributo | Valores | Dónde aplica | Qué hace |
|---|---|---|---|
data-tickeep | lista · evento · calendario · boton · compra | Obligatorio en todas | Elige la pieza. Sin él, el bloque se ignora |
data-evento | Identificador del evento | evento, compra, boton | De qué concierto se trata |
data-tema | auto · claro · oscuro | Piezas con marco | Tema del contenido empotrado. auto es el valor por defecto |
data-limite | De 1 a 199 | lista | Cuántos eventos como máximo |
data-columnas | De 1 a 6 | lista | Columnas de la cuadrícula |
data-categoria | Identificador de categoría | Piezas con marco | Enseña solo los eventos de esa categoría |
data-altura | Píxeles | Piezas con marco | Altura reservada mientras carga, para que no salte la maquetación |
data-modo | popup | lista, evento, calendario, boton | Abre el contenido en una capa al hacer clic |
data-precios | tarifas · desde · no | compra | Qué se pinta encima del botón |
data-ancho | completo | compra | El bloque de precios ocupa todo el ancho, para ajustarse al botón |
Tres detalles que ahorran una consulta a soporte:
- El alto se ajusta solo. Hasta que el contenido informa del suyo se reserva 720 px en la parrilla, 640 px en el calendario y 420 px en la ficha de evento.
data-alturacambia esa reserva inicial, no el alto final. - El calendario no admite
data-limitenidata-columnas. Recortar un mes dejaría días sueltos en blanco. - Un valor que no se entienda se ignora en silencio, sin romper tu página. Y ningún atributo se renombra ni se retira nunca: lo que pegas hoy sigue funcionando dentro de cinco años.
Dónde pegarlo
WordPress
Edita la entrada o la página
La de programación para la parrilla; la del concierto para el bloque de precios y botón.
Añade un bloque «HTML personalizado»
Es un bloque estándar del editor. No sirve el bloque de párrafo: ahí el código se escaparía y se vería tal cual.
Pega el fragmento entero, con su script
Publica y mira la página publicada
La vista previa del editor no siempre ejecuta scripts. Lo que vale es la página real.
Funciona igual con Elementor, Divi o cualquier constructor visual que inyecte el contenido después de cargar: el script vigila la página y monta también lo que aparece más tarde.
No hace falta ninguna extensión: el bloque de HTML personalizado hace todo el trabajo. El contrato de atributos data-* no se rompe, así que el código que pegues hoy seguirá siendo válido mañana.
Wix
Añade el elemento Insertar HTML desde el panel de añadir, elige la opción de pegar código y pega el fragmento entero.
El elemento de HTML de Wix vive dentro de su propia caja, de tamaño fijo, que se ajusta arrastrando. El alto automático del widget llega hasta esa caja y no más. Dale holgura, compruébalo en el móvil, y si te queda un hueco muerto usa el modo de ventana emergente o la pieza de precios y botón, que ocupa poco y se adapta.
Squarespace
Añade un bloque de código donde quieras la pieza y pega el fragmento. El bloque de código está en los planes de pago de Squarespace.
Dentro del editor verás un aviso en vez del widget: los bloques de código no se ejecutan mientras editas. Guarda y abre la página publicada.
Una web hecha a mano
Pega el div donde quieras que salga y el <script> una vez, justo antes de cerrar el body. No hace falta nada más: ni instalar dependencias, ni tocar tu configuración, ni servir el fichero desde tu dominio.
El script deduce a qué sala pertenece por el dominio del que se descarga. Servido desde tu propio dominio, apuntaría al sitio equivocado y no arrancaría. Enlázalo siempre desde el dominio de tu sala.
El aspecto del botón se decide una vez
Color de fondo, color del texto, forma, icono, ancho, alineación y texto del botón se configuran en Integrar en tu web → Botones de compra, y valen para todos tus botones a la vez.
Lo importante es que los bloques de precios y botón ya pegados se repasan en cada visita: cambias el color en el panel y cambian solos en la web de tu concierto de marzo y en la del de octubre. Tarda unos minutos en verse, por las cachés.
Los enlaces simples de la pieza boton no cambian solos: llevan su estilo escrito en el HTML. Para actualizarlos hay que volver a copiar el código.
Dónde ocurre el pago
Los precios, la parrilla y el botón viven en tu web, pero al comprar el visitante sale del marco y termina en tu dominio de Tickeep. El motivo es concreto: el reto de seguridad que pinta el banco del comprador no funciona dentro de un marco, porque lo sirve el emisor con sus propias reglas y no las controlamos. Con tu dominio propio conectado, ese salto lleva tu dirección y apenas se nota.
No hay carrito ni formulario de pago dentro de tu página, y no lo va a haber: cobrar significa autenticación bancaria, facturación y devoluciones, y eso tiene que ocurrir en un solo sitio.
Cómo saber que ha ido bien
- Miras la página publicada, no la vista previa del editor.
- La parrilla enseña tus eventos reales, con sus carteles y sus fechas.
- El bloque de precios enseña tus tarifas con sus importes, no un hueco vacío.
- Al pulsar el botón acabas en el checkout, en el dominio de tu sala.
- En el móvil no aparece una barra de desplazamiento horizontal.
Problemas habituales
«No aparece nada». Es el fallo número uno y casi siempre es el mismo: un plugin de caché que combina y mueve los scripts. Al combinarlos, el script pierde su propia dirección de origen, que es justo lo que necesita para saber a qué sala pertenece. Busca en tu plugin de optimización la opción de combinar o aplazar JavaScript y excluye embed.js. Vaciar la caché no basta: hay que excluirlo.
«Sale el botón, pero no los precios». El identificador del evento está mal escrito, o el evento está en borrador. Cópialo del panel, desde la ficha del evento, y comprueba que está publicado.
«He cambiado el color del botón y sigue igual». Espera unos minutos: el aspecto se sirve con su propia caché. Vaciar la caché de tu web no lo acelera. Si el botón que no cambia es un enlace simple de la pieza boton, no va a cambiar nunca solo: vuelve a copiar su código.
«El widget dice que la sala no está disponible». Tu sala está en mantenimiento. Pásala a producción y el catálogo vuelve. Ver publicar tu web.
«El bloque se ve con la tipografía de Tickeep y no con la mía». Las piezas con marco no heredan tu CSS, a propósito: así ningún tema les rompe la maquetación. Si lo que quieres es que se vea tuyo, la pieza es compra, que no va en un marco.
Siguiente paso
Conecta tu dominio propio para que el salto al pago lleve tu dirección, y repasa la lista de antes de publicar.
Artículos relacionados
Web completa, micrositio de entradas o integrada en tu web: qué sirve cada modo, cuándo elegir cuál y qué pasa con el SEO y con las direcciones que se comparten en redes.
Los registros DNS que hay que crear, cómo se verifica la propiedad, cuándo se emite el certificado HTTPS y qué pasa con tu subdominio de Tickeep.
El paso de mantenimiento a producción: los requisitos que comprueba Tickeep antes de dejarte publicar y la lista que conviene repasar antes de que tu web sea visible para todo el mundo.