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.

Webflow

Unlike Framer (a real React Code Component), Webflow doesn’t run React components — that’s why the SDK exposes a separate entrypoint (@flouviahq/elements/webflow) built for Webflow’s visual editor: a self-initializing script that requires no code, just custom attributes.

1. In Webflow, add a Div Block wherever you want the quoter to appear.
2. In that element’s Settings panel, add a Custom Attribute: data-cord-token with your quote’s token as the value. (Optionally, data-cord-base-url if you use your own domain, and data-cord-min-height for the iframe’s minimum height.)
3. Under Page Settings › Custom Code (or your site’s settings if you want it on every page), add this script before </body>:

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

The script automatically finds every element with data-cord-token on the page (on load, and again if Webflow adds more later) and mounts the quoter there — it doesn’t expose its own JS events like the native Web Component does; for that, use <cord-cotizador> directly or Framer’s Code Component.