Un widget muestra tus eventos, entradas o personas de Kadens en tu propio sitio web, y los visitantes pueden comprar sin salir de él. Necesitas una cuenta de Kadens y acceso para editar tu sitio web. Crea un widget, permite tu sitio web, y luego copia y pega un código corto.
Un widget es una parte de tu página de Kadens que vive dentro de tu sitio web. Hay tres tipos:
| Widget | Descripción |
|---|---|
Eventos y entradas | Tus próximos eventos, con la compra de entradas dentro de tu web. |
Un evento | La página de un evento: fechas, lugar, descripción y entradas, con Comprar. |
Personas | Tarjetas de perfil de las personas que elijas, enlazadas a sus perfiles públicos. |
Cursos | Tus cursos con sus precios, cada uno enlazado a su página en tu sitio. |
Planes y precios | Tus planes de membresía uno junto a otro, cada uno enlazado a su página de alta. |
Horario de clases | Tus próximas clases como una agenda, siempre al día. |
Botón de compra | Un botón para un evento, curso o plan, con el estilo de tu página. |
El código que pegas solo nombra tu widget. Cuando cambias el widget en Kadens (lo que muestra, su diseño o sus colores), todos los sitios web que lo usan se actualizan por sí solos. Nunca vuelves a pegar el código.
Cuatro pasos, sin necesidad de programar.
En Kadens, abre Integraciones, luego Widgets, y crea uno. Elige qué muestra y cómo se ve.
Añade la dirección de tu sitio web, como https://www.ejemplo.com. Un widget solo aparece en los sitios web que permitas.
Abre tu widget y ve a la pestaña Instalar. Copia el código que se muestra ahí. Ya lleva tu nombre de usuario y tu widget.
Pega el código donde quieras que aparezca el widget, y luego publica tu sitio web. Busca tu creador de sitios en las guías de abajo para los pasos exactos.
Un widget solo carga en los sitios web que añadas a tu lista.
Esto protege tu checkout: nadie puede poner tu widget en una página que no controles. Tu lista se envía a los navegadores como una regla de seguridad (frame-ancestors), así que un sitio web que no esté en ella no muestra nada donde debería ir el widget.
| Dirección | Resultado |
|---|---|
https://www.example.com | Permitido. Un sitio web. Cualquier ruta o barra final que escribas se elimina. |
https://*.example.com | Permitido. Todos los subdominios de un nivel de profundidad, como shop.ejemplo.com. No incluye ejemplo.com en sí ni niveles más profundos como a.b.ejemplo.com: añade esos como entradas propias. |
* | No permitido. Dejaría que cualquier sitio web de internet mostrara tu widget. |
https://*.com | No permitido. Un comodín necesita un dominio real después. |
http://www.example.com | No permitido. Los sitios web deben usar https. |
http://localhost:3000 | Permitido para pruebas en tu propio ordenador. http solo funciona para localhost. |
https://www.example.com/tickets | Se guarda como https://www.ejemplo.com. Se permite todo el sitio web, no una sola página. Una dirección con ? o # se rechaza. |
https://203.0.113.7 | No permitido. Usa el nombre de dominio de tu sitio web. |
Un script y un elemento. La pestaña Instalar construye este código por ti.
Para cualquier web que acepte código. Ajusta su altura sola.
En los ejemplos de esta página, your-username y your-widget-id representan tus propios valores. Copia tu código real desde la pestaña Instalar.
| Atributo | Tipo | Descripción |
|---|---|---|
handleObligatorio | string | Tu nombre de usuario de Kadens. |
widgetObligatorio | string | El id del widget que mostrar. |
locale | string | El idioma del widget. Cuando falta, el widget usa el lang de tu página. |
color-scheme | light | dark | auto | Fuerza colores claros u oscuros para esta ubicación. Omítelo para usar la configuración propia del widget. |
title | string | El nombre accesible del marco del widget, leído por lectores de pantalla. Por defecto, Kadens widget. |
data-layer | boolean | También envía cada evento del widget a window.dataLayer, para Google Tag Manager. |
meta-pixel | boolean | Envía un evento Purchase a tu Meta Pixel cuando alguien completa una compra. Tu página ya debe cargar el pixel. |
Para creadores de webs que eliminan los scripts. Altura fija.
Elige tu creador de sitios. Cada guía dice qué necesitas primero, dónde va el código y qué comprobar.
Necesitas acceso para editar las páginas de tu web, o alguien que lo tenga y pegue el código por ti.
Por página: pega el código en cada página donde deba aparecer el widget. Si tu web tiene un sitio para código en todas las páginas (a menudo llamado código de cabecera o de pie), puedes poner ahí la primera línea una sola vez y pegar solo la segunda en cada página.
Abre la página publicada en una pestaña nueva. El widget aparece donde pegaste el código, normalmente en pocos segundos.
WordPress autoalojado (WordPress.org) funciona siempre. En WordPress.com necesitas un plan de pago con funciones de hosting: el plan Free elimina el script y el widget no aparecerá.
Por página: añade un bloque Custom HTML en cada página o entrada donde deba aparecer el widget. WordPress no trae un sitio para código en todas las páginas, así que pega el código completo en cada bloque.
Abre la página en tu web publicada, no en el editor. El widget aparece donde añadiste el bloque.
Custom Code necesita un plan Premium y un dominio conectado. Sin ambos, el widget no se mostrará en tu web.
En las páginas que elijas. Custom Code se ejecuta en la propia página, en tu dominio, y el widget aparece al final de cada página elegida.
Abre la página en tu propio dominio, no en la vista previa del Editor. El widget aparece al final de la página.
Necesitas ser el propietario de la tienda o un miembro del equipo con permiso para editar temas en Shopify admin.
Por plantilla: una sección añadida en el editor de temas aparece en todas las páginas que usan esa plantilla (por ejemplo, todas las de producto). Para mostrarlo en una sola página, crea antes una plantilla propia para ella. Para todas las páginas, ve a Online Store › Themes › … › Edit code y pégalo en layout/theme.liquid justo antes de la etiqueta de cierre del body; el widget aparece entonces al final de cada página.
Abre tu tienda en una pestaña nueva, no en el editor de temas, y ve a esa página. El widget aparece donde está la sección.
Code Embed solo funciona con un plan de sitio de pago o en un Workspace Core, Growth, Agency o Freelancer. En un sitio Starter gratuito el widget no aparecerá.
Por página: pon un Code Embed donde deba aparecer el widget. Para todas las páginas, pégalo una vez en Site settings › Custom code › Footer code, que se ejecuta antes de la etiqueta de cierre del body y necesita un Site plan de pago; el widget aparece entonces al final de cada página. Para mantenerlo dentro de tus páginas, pon solo la primera línea en Footer code y la segunda en cada Code Embed.
Abre la web publicada. En el Designer el Code Embed muestra un marcador en lugar del widget; es lo normal.
Los scripts funcionan en los planes Core, Plus y Advanced. En el plan Personal el widget no se mostrará, y la versión iframe tampoco.
Por página: añade un bloque Code en cada página donde deba aparecer el widget. Para todas las páginas, pégalo una vez en el panel Code Injection de Settings.
Abre la página de tu web publicada en una ventana privada. En el editor el bloque muestra un marcador, porque los scripts no se ejecutan en la vista previa del editor.
Necesitas acceso de edición al proyecto de Framer.
Por página: pon un Embed donde deba aparecer el widget y pega el código completo en cada Embed.
Abre tu web publicada y ve a la página. El widget aparece donde colocaste el Embed.
Necesitas una cuenta de equipo en Ghost que pueda publicar (Author o superior). Los Contributors pueden añadir la tarjeta pero no publicarla.
Por entrada o página: añade una tarjeta HTML donde deba aparecer el widget. Para todas las páginas, pégalo una vez en Settings › Advanced › Code injection › Site footer; el widget aparece entonces al final de cada página. Para mantenerlo dentro de tus entradas, pon solo la primera línea en Site footer y la segunda en cada tarjeta HTML.
Abre la entrada o página publicada. El editor muestra la tarjeta como código; el widget solo aparece en la página publicada.
Necesitas permiso para editar y publicar páginas web o landing pages en HubSpot.
Por página: pega el código en el Source code de un módulo Rich text donde deba aparecer el widget, o en Settings › Advanced › Footer HTML del editor de la página para mostrarlo al final de esa página. Para todas las páginas de un dominio, ve a Settings › Content › Pages, elige el dominio y pégalo en Site footer HTML.
Abre la página publicada. Si falta el widget, vuelve a abrir el Source code del módulo: si la línea del script ya no está, HubSpot la quitó.
Cambia esto en el estudio de widgets en Kadens. Tu sitio web se actualiza por sí solo.
| Ajuste | Valores | Descripción |
|---|---|---|
Tema | site | kadens | minimal | bold | soft | dark | Un estilo de partida. Puedes ajustar cualquier detalle después de elegir uno. |
Esquema de color | light | dark | auto | Claro, oscuro, o automático para seguir el dispositivo del visitante. |
Colores | accent, accentForeground, background, card, text, mutedText, border | Tus propios colores para botones, fondos, tarjetas, texto y bordes. |
Fuentes | La fuente de tu sitio, la fuente del sistema del visitante, o una del catálogo de fuentes de Kadens. Las fuentes cargan dentro del widget desde Kadens, nunca desde Google. | |
Tamaño de texto | 12 to 22 px | El tamaño base del texto del widget. |
Radio de esquina | 0 to 64 px | Cuánto se redondean las tarjetas y botones. |
El elemento del widget envía eventos DOM a tu página, para que puedas medir clics y ventas con tu propia analítica.
| Evento | Contenido | Descripción |
|---|---|---|
kadens:ready | { widget } | El widget ha cargado y es visible. |
kadens:widget-view | { widget, ...props } | Una acción del visitante dentro del widget. Con data-layer, también se envía a window.dataLayer como kadens_widget_view. |
kadens:item-click | { widget, ...props } | Una acción del visitante dentro del widget. Con data-layer, también se envía a window.dataLayer como kadens_item_click. |
kadens:checkout-open | { widget, ...props } | Una acción del visitante dentro del widget. Con data-layer, también se envía a window.dataLayer como kadens_checkout_open. |
kadens:checkout-complete | { widget, ...props } | Una acción del visitante dentro del widget. Con data-layer, también se envía a window.dataLayer como kadens_checkout_complete. |
kadens:powered-by-click | { widget, ...props } | Una acción del visitante dentro del widget. Con data-layer, también se envía a window.dataLayer como kadens_powered_by_click. |
kadens:checkout-completed | { widget, orderRef, kind, amountMinor, currency } | Se completó una compra. El importe está en unidades menores (céntimos para EUR o USD). Con meta-pixel, también envía un Purchase a tu Meta Pixel. |
<kadens-widget handle="your-username" widget="your-widget-id" data-layer></kadens-widget>
<script>
document.addEventListener('kadens:checkout-completed', (event) => {
const { orderRef, amountMinor, currency } = event.detail;
gtag('event', 'purchase', {
transaction_id: orderRef,
value: amountMinor / 100, // amounts arrive in minor units (cents)
currency,
});
});
</script>Añade el atributo meta-pixel. No hace falta nada más si tu página ya carga el pixel.
<kadens-widget handle="your-username" widget="your-widget-id" meta-pixel></kadens-widget>El pago ocurre dentro del widget, en una ventana segura sobre tu página. Los compradores no salen de tu sitio web y tú no necesitas tu propia configuración de pagos.
Los compradores pueden pagar solo con su correo, o iniciar sesión en su cuenta de Kadens desde el widget.
El pago se abre en una pestaña nueva.
| Problema | Solución |
|---|---|
El área del widget está en blanco | Casi siempre falta tu sitio web en tus sitios web permitidos. Añade la dirección exacta que ves en el navegador, incluyendo www si lo tiene. |
El código desaparece al guardar | Algunos creadores de sitios eliminan los scripts. Usa el código iframe en su lugar: abre Avanzado en la pestaña Instalar y elige iframe. |
Tu creador de sitios no acepta código | Algunos creadores de sitios solo aceptan código personalizado en un plan de pago. La guía de cada creador de arriba indica si el tuyo lo hace. |
Sigues viendo la página antigua | Publica tu sitio web de nuevo y recarga la página. Algunos creadores mantienen una copia antigua durante unos minutos. |
¿Te ha resultado útil?