Páginas y layouts
Quédate con el widget por defecto hasta que necesites páginas propias, integración en línea o tu propio contenedor.
Support da bastante de sí antes de que necesites el camino totalmente a medida. La mayoría de los cambios de maquetación siguen cabiendo en el entorno integrado.
Usa esto cuando
- quieres otra pantalla de inicio o una página adicional
- quieres el soporte integrado en la página en vez de flotante
- necesitas tu propio contenedor pero sigues queriendo el router y el estado de Support
El cambio más pequeño que funciona
Usa customPages cuando quieras sustituir una página integrada y conservar el contenedor por defecto.
import { Support, useSupportNavigation } from "@fluxolat/react";
import { PENDING_CONVERSATION_ID } from "@fluxolat/react/utils/id";
function CustomHomePage() {
const { navigate } = useSupportNavigation();
return (
<div className="flex h-full flex-col gap-4 p-6">
<h2 className="text-2xl font-semibold">Launch support</h2>
<p className="text-sm text-zinc-500">
Keep the default conversation page. Only change the first screen.
</p>
<button
className="border px-4 py-3 text-left"
onClick={() =>
navigate({
page: "CONVERSATION",
params: {
conversationId: PENDING_CONVERSATION_ID,
initialMessage: "Help me launch with the React SDK",
},
})
}
type="button"
>
Start a conversation
</button>
</div>
);
}
<Support
customPages={[
{
name: "HOME",
component: CustomHomePage,
},
]}
/>;PENDING_CONVERSATION_ID es el único valor centinela que el SDK trata como una
conversación aún no creada. No te inventes un ID de relleno: cualquier otra
cadena se toma como una conversación real y puede provocar una petición de un
registro que no existe.
Los ejemplos de maquetación de esta página usan utilidades de Tailwind por
brevedad. Las API no requieren Tailwind: sustituye esas clases por tu propio CSS
cuando importes @fluxolat/react/styles.css.
Variantes habituales
Integrar el soporte en la página
Usa mode="responsive" cuando el soporte deba vivir dentro de la página en lugar de flotar sobre ella.
import { Support } from "@fluxolat/react";
export default function SupportPanel() {
return (
<div className="h-[560px] overflow-hidden border">
<Support mode="responsive" />
</div>
);
}Controla el contenedor con Support.Root
Usa la composición completa cuando quieras tu propio disparador, tu propio envoltorio de contenido y tu propio registro de páginas.
import { Support } from "@fluxolat/react";
function LaunchChecklistPage() {
return <div className="p-6">Your custom page</div>;
}
export default function App() {
return (
<Support.Root>
<Support.Trigger asChild>
<button type="button">Compose support</button>
</Support.Trigger>
<Support.Content className="border shadow-2xl">
<Support.Router>
<Support.Page component={LaunchChecklistPage} name="HOME" />
</Support.Router>
</Support.Content>
</Support.Root>
);
}Launch checklist
Pick the quickest path to ship a support widget that matches your product.
Support.Page también funciona con Support cuando quieres mantener el widget por defecto y registrar una página adicional.
Cuándo quedarte aquí
customPages,mode="responsive"oSupport.Rootte dan control suficiente- sigues queriendo el router, el estado y el flujo de conversación integrados
- no necesitas una versión headless
Siguiente paso
- Textos e idioma si lo siguiente que cambias son las palabras
- Avanzado cuando quieras dejar el camino del widget ya hecho y construir tu propia interfaz
¿Te resultó útil esta página?
Abre una incidencia de documentación ya rellenada para que el equipo pueda actuar.