Web Components and Vue

Framework-agnostic components for maximum compatibility with any architecture.

Web Component (Vanilla JS, PHP, Rails)

If you don’t use React or Vue, or you are integrating Cord into a server-rendered site (like Laravel, Django, or WordPress), you can use the standard Web Component (<cord-cotizador>).

This component is compiled under web platform standards, meaning the browser understands it natively without the need for a bundler.

{/* Import the ES module */}
<script type="module" src="https://unpkg.com/@flouviahq/elements/dist/index.mjs"></script>

{/* Render the native component */}
<div style="height: 800px;">
  <cord-cotizador 
    token="tok_A1B2C3D4E5" 
    base-url="https://cordhq.app" 
    min-height="500">
  </cord-cotizador>
</div>

<script>
  // Listen to standard DOM events
  const cotizador = document.querySelector('cord-cotizador');
  
  cotizador.addEventListener('approved', (e) => {
    console.log('Quote approved!', e.detail.folio);
  });
</script>

Vue and Nuxt

The Cord SDK provides a native wrapper for Vue 3 that handles reactivity and events using the Vue paradigm (@ or v-on).

Installation

npm install @flouviahq/elements

Usage

Import the <CordCotizador> component from the /vue entrypoint and pass it to your template.

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

const myToken = ref('tok_A1B2C3D4E5');

function handleApproved(detail) {
  console.log('The client signed:', detail.signed_by);
}

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

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

Framer

If you are building your website in Framer, you can add Cord Elements as a drag-and-drop Code Component.

Create a new code component in Framer and paste the following:

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

This will register the property controls in Framer’s visual interface (Property Controls), exposing the Token field in the right panel so your designers can modify it visually without touching code.