Saltar al contenido principal

Embed widget

El embed widget es una única etiqueta <script> que inyecta contenido de FAQ + JSON-LD en cualquier página de storefront.

Uso básico​

<div id="clione-faq"></div>
<script
  src="https://api.clione.ai/embed.js"
  data-api-key="sk_live_..."
  data-target="#clione-faq"
  async
></script>

Eso es todo. El script:

  1. Detecta automáticamente la entidad actual (producto / categoría / página)
  2. Recupera las FAQs desde la API pública de Clione
  3. Inyecta un acordeón HTML visible en #clione-faq
  4. Inyecta un <script type="application/ld+json"> invisible con schema FAQPage en <head>

Cómo se detecta el contexto​

Orden de prioridad:

  1. Override explícito en la etiqueta <script>:

    <script
      src="https://api.clione.ai/embed.js"
      data-api-key="sk_live_..."
      data-entity-type="product"
      data-entity-id="SKU-001"
    ></script>

  2. Meta tags OpenGraph — si la página tiene:

    <meta property="og:type" content="product">
    <meta property="product:retailer_item_id" content="SKU-001">

    el widget los recoge.

  3. Patrones de URL:

    • Shopify: /products/:handle, /collections/:handle, /pages/:handle
    • BigCommerce: window.BCData.product_attributes.product_id, /product/:slug, /category/:slug
    • WooCommerce: clase de body .single-product + postid-N

  4. Si no se detecta contexto, el widget loguea en consola y no renderiza nada. Sin entrada para esta página.

Seguridad​

La API key es pública en la etiqueta del script — no pongas ahí una key con scope admin. Usa solo el scope products:read.

La key se valida en cada petición contra su lista blanca allowedDomains (Origin / Referer). Las peticiones desde orígenes no permitidos devuelven 403.

Estilos​

Por ahora el acordeón usa estilos inline (autocontenido, sin colisiones de CSS). Estamos construyendo un panel Style de personalización (mira la tarea 869cwuwxr en la roadmap) para que los merchants puedan ajustar colores / fuentes / radius desde el dashboard.

Debug​

Abre la consola del navegador — el widget loguea:

[Clione] embed.js: rendered 5 FAQ entries for product/SKU-001 (detected via og-meta)

Si no renderiza nada:

  • Comprueba que tus meta tags og:type + product:retailer_item_id están presentes
  • O añade data-entity-type / data-entity-id explícitos en la etiqueta del script
  • Verifica que la API key no se ha revocado
  • Verifica que el dominio actual está en allowedDomains de la key