Web Components y Vue

Componentes agnósticos al framework para máxima compatibilidad con cualquier arquitectura.

Web Component (Vanilla JS, PHP, Rails)

Si no utilizas React ni Vue, o estás integrando Cord en un sitio renderizado en el servidor (como Laravel, Django, o WordPress), puedes utilizar el Web Component estándar (<cord-cotizador>).

Este componente está compilado bajo los estándares de la plataforma web, lo que significa que el navegador lo entiende de forma nativa sin necesidad de un bundler.

{/* Importar el módulo ES */}
<script type="module" src="https://unpkg.com/@flouviahq/elements/dist/index.mjs"></script>

{/* Renderizar el componente nativo */}
<div style="height: 800px;">
  <cord-cotizador 
    token="tok_A1B2C3D4E5" 
    base-url="https://cordhq.app" 
    min-height="500">
  </cord-cotizador>
</div>

<script>
  // Escuchar eventos estándar del DOM
  const cotizador = document.querySelector('cord-cotizador');
  
  cotizador.addEventListener('approved', (e) => {
    console.log('¡Cotización aprobada!', e.detail.folio);
  });
</script>

Vue y Nuxt

El SDK de Cord provee un envoltorio nativo (wrapper) para Vue 3 que maneja la reactividad y los eventos utilizando el paradigma de Vue (@ o v-on).

Instalación

npm install @flouviahq/elements

Uso

Importa el componente <CordCotizador> desde el entrypoint /vue y pásalo a tu template.

<script setup>
import { CordCotizador } from '@flouviahq/elements/vue';
import { ref } from 'vue';

const miToken = ref('tok_A1B2C3D4E5');

function handleApproved(detail) {
  console.log('El cliente firmó:', detail.signed_by);
}

function handlePay(detail) {
  window.location.href = detail.url;
}
</script>

<template>
  <main class="cotizacion-container">
    <CordCotizador
      :token="miToken"
      @approved="handleApproved"
      @pay="handlePay"
    />
  </main>
</template>

Framer

Si estás construyendo tu sitio web en Framer, puedes agregar Cord Elements como un Code Component arrastrable y soltable.

Crea un nuevo componente de código en Framer y pega lo siguiente:

import { FramerCordCotizador } from '@flouviahq/elements/framer';
export default FramerCordCotizador;

Esto registrará los controles de propiedades en la interfaz visual de Framer (Property Controls), exponiendo el campo Token en el panel derecho para que tus diseñadores puedan modificarlo visualmente sin tocar código.

Webflow

A diferencia de Framer (un Code Component real), Webflow no ejecuta componentes de React — por eso el SDK expone un entrypoint separado (@flouviahq/elements/webflow) pensado para el editor visual de Webflow: un script de auto-inicialización que no requiere escribir código, solo atributos personalizados.

1. En Webflow, agrega un Div Block donde quieras que aparezca el cotizador.
2. En el panel de Settings del elemento, agrega un Custom Attribute: data-cord-token con el token de tu cotización como valor. (Opcionalmente, data-cord-base-url si usas un dominio propio, y data-cord-min-height para el alto mínimo del iframe.)
3. En Page Settings › Custom Code (o en los ajustes del sitio si quieres que aplique a todas las páginas), agrega este script antes de </body>:

<script src="https://unpkg.com/@flouviahq/elements/dist/webflow.js"></script>

El script busca automáticamente todos los elementos con data-cord-token en la página (al cargar, y de nuevo si Webflow los agrega después) y monta el cotizador ahí — no expone eventos JS propios como el Web Component nativo; para eso, usa <cord-cotizador> directamente o el Code Component de Framer.