Button Support

Bottone “Assistenza” che apre la chat Crisp se l'hai configurata, altrimenti il client email di sistema con oggetto già scritto. Nel boilerplate sta nelle pagine di errore (app/error.tsx e app/not-found.tsx) — cioè esattamente dove l'utente ha bisogno di parlare con qualcuno. Client component.

File

components/ButtonSupport.tsx

Uso base

import ButtonSupport from "@/components/ButtonSupport";

<ButtonSupport />

Nessuna prop: decide da solo cosa fare leggendo il config.

La logica in tre righe

if (config.crisp?.id) {
  Crisp.chat.show();
  Crisp.chat.open();
} else if (config.resend?.supportEmail) {
  window.open(
    `mailto:${config.resend.supportEmail}?subject=Serve aiuto con ${config.appName}`,
    "_blank"
  );
}

Se non imposti né crisp.id né resend.supportEmail, il click non fa assolutamente nulla. Nel config di default crisp.id è vuoto e supportEmail è valorizzata, quindi il bottone apre la mail.

crisp: {
  // ID del sito Crisp. Vuoto = chat disattivata
  id: "",
  // Crisp è nascosta ovunque tranne su queste rotte
  onlyShowOnRoutes: ["/"],
},
resend: {
  // fallback se non usi Crisp
  supportEmail: "tu@tuodominio.com",
},

Come parte Crisp

Il widget non viene montato da questo bottone: lo avvia CrispChat dentro components/LayoutClient.tsx, che è wrappato attorno a tutta l'app nel layout root. In un useEffect:

• se config.crisp.id esiste, chiama Crisp.configure(config.crisp.id);
• se onlyShowOnRoutes non contiene il pathname corrente, chiama Crisp.chat.hide() e riattacca l'hide su onChatClosed — è per questo che serve <ButtonSupport />: sulle rotte “pulite” la bolla non si vede e la apre l'utente col bottone;
• se l'utente è loggato, aggancia il suo id con Crisp.session.setData({ userId }), così in chat sai con chi stai parlando.

Personalizzare

• Attivare Crisp: incolla il Website ID in config.crisp.id. Da quel momento il bottone apre la chat invece della mail.
• Mostrare la bolla ovunque: togli onlyShowOnRoutes dal config.
• Oggetto della mail: cambia la stringa subject nel componente.
• Tooltip: gli attributi data-tooltip-id="tooltip" e data-tooltip-content funzionano perché LayoutClient monta un <Tooltip id="tooltip" /> di react-tooltip. Stesso trucco su qualsiasi altro elemento.