Cómo añadir un widget de feedback a Next.js, React y Vue (paso a paso)
Una guía práctica y específica por framework para añadir un widget de feedback de clientes a tu aplicación Next.js, React o Vue en menos de 2 minutos.
Añadir un widget de feedback a tu aplicación web debería llevar minutos, no horas. Esta guía cubre los pasos exactos para Next.js, React y Vue — con fragmentos de código que puedes copiar y pegar.
Antes de empezar
Necesitarás una cuenta de Palmframe y un proyecto. Regístrate en palmframe.com, crea un proyecto y copia tu ID de proyecto. Esa es toda la configuración necesaria.
Next.js (App Router)
Next.js con el App Router requiere un componente cliente para web components. Crea un wrapper sencillo:
// components/feedback-widget.tsx
'use client'
import 'https://cdn.palmframe.com/embed.js'
export default function FeedbackWidget() {
return <palmframe-widget project="tu-id-de-proyecto" />
}O sáltate el paquete npm por completo y usa el enfoque de etiqueta de script en tu layout raíz:
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<head>
<script src="https://cdn.palmframe.com/embed.js" async />
</head>
<body>
{children}
<palmframe-widget project="tu-id-de-proyecto" />
</body>
</html>
)
}El enfoque con etiqueta de script es más sencillo y funciona sin ningún wrapper de componente cliente. El widget se carga de forma asíncrona, así que no bloqueará el renderizado de tu página.
Next.js Pages Router
Para el Pages Router, añade el script y el widget a _app.tsx:
// pages/_app.tsx
import Script from 'next/script'
export default function App({ Component, pageProps }) {
return (
<>
<Script src="https://cdn.palmframe.com/embed.js" strategy="afterInteractive" />
<Component {...pageProps} />
<palmframe-widget project="tu-id-de-proyecto" />
</>
)
}React (Vite, Create React App)
Para una aplicación React estándar, añade la etiqueta de script a tu index.html y el widget a tu componente App:
<!-- index.html -->
<script src="https://cdn.palmframe.com/embed.js" async></script>// App.tsx
export default function App() {
return (
<div>
{/* El contenido de tu app */}
<palmframe-widget project="tu-id-de-proyecto" />
</div>
)
}Eso es todo. El widget es un web component estándar — funciona en cualquier aplicación React sin dependencias ni configuración adicional.
Vue 3
Vue 3 funciona de la misma manera. Añade el script a tu index.html y usa el widget en tu componente App:
<!-- index.html -->
<script src="https://cdn.palmframe.com/embed.js" async></script><!-- App.vue -->
<template>
<div>
<!-- El contenido de tu app -->
<palmframe-widget project="tu-id-de-proyecto" />
</div>
</template>Si Vue muestra una advertencia sobre un elemento personalizado desconocido, añade el widget a tu configuración de Vite:
// vite.config.ts
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag === 'palmframe-widget',
},
},
}),
],
}Nuxt 3
Para Nuxt 3, crea un plugin de cliente y añade el widget al layout de tu aplicación:
// plugins/palmframe.client.ts
export default defineNuxtPlugin(() => {
if (typeof window !== 'undefined') {
const script = document.createElement('script')
script.src = 'https://cdn.palmframe.com/embed.js'
script.async = true
document.head.appendChild(script)
}
})<!-- app.vue -->
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<palmframe-widget project="tu-id-de-proyecto" />
</template>Svelte / SvelteKit
Para SvelteKit, añade el widget a tu layout raíz:
<!-- src/routes/+layout.svelte -->
<svelte:head>
<script src="https://cdn.palmframe.com/embed.js" async></script>
</svelte:head>
<slot />
<palmframe-widget project="tu-id-de-proyecto" />HTML puro
El caso más sencillo — solo dos líneas antes de