Páginas e layouts
Fique com o widget padrão até precisar de páginas próprias, incorporação inline ou o seu próprio contêiner.
O Support estica bastante antes de você precisar do caminho totalmente sob medida. A maioria das mudanças de layout ainda cabe no ambiente embutido.
Use isto quando
- você quer outra tela inicial ou uma página a mais
- quer o suporte dentro da página em vez de flutuando
- precisa do seu próprio contêiner mas ainda quer o router e o estado do Support
A menor mudança que funciona
Use customPages quando quiser substituir uma página embutida e manter o contêiner padrão.
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,
},
]}
/>;O PENDING_CONVERSATION_ID é o único valor sentinela que o SDK trata como uma
conversa ainda não criada. Não invente um ID de preenchimento: qualquer outra
string é tratada como uma conversa real e pode disparar um pedido de um registro
que não existe.
Os exemplos de layout desta página usam utilitários do Tailwind por brevidade.
As APIs não exigem Tailwind: troque essas classes pelo seu próprio CSS quando
importar @fluxolat/react/styles.css.
Variantes comuns
Incorporar o suporte na página
Use mode="responsive" quando o suporte deve ficar dentro da página em vez de flutuar sobre ela.
import { Support } from "@fluxolat/react";
export default function SupportPanel() {
return (
<div className="h-[560px] overflow-hidden border">
<Support mode="responsive" />
</div>
);
}Controle o contêiner com Support.Root
Use a composição completa quando quiser o seu próprio gatilho, o seu invólucro de conteúdo e o seu 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.
O Support.Page também funciona com o Support quando você quer manter o widget padrão e registrar uma página extra.
Quando parar por aqui
customPages,mode="responsive"ouSupport.Rootjá dão controle suficiente- você ainda quer o router, o estado e o fluxo de conversa embutidos
- não precisa de uma versão headless
Próximo passo
- Textos e idioma se a próxima mudança for nas palavras
- Avançado quando quiser deixar o caminho do widget pronto e construir a sua própria interface
Esta página foi útil?
Abra uma issue de documentação já preenchida para que a equipe possa agir.