Hooks

Copy"use client";
 
import { useSupport } from "@cossistant/next";
 
export function CustomSupportButton() {
  const { isOpen, toggle, unreadCount } = useSupport();
 
  return (
    <button
      onClick={toggle}
      className="relative rounded-lg bg-primary px-4 py-2 text-white"
    >
      Support
      {unreadCount > 0 && (
        <span className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-xs">
          {unreadCount}
        </span>
      )}
    </button>
  );
}

Copy"use client";
 
import { useVisitor } from "@cossistant/next";
import { useEffect } from "react";
 
export function AuthHandler({ user }) {
  const { visitor, identify } = useVisitor();
 
  useEffect(() => {
    // Only identify if we have a user and visitor isn't already a contact
    if (user && !visitor?.contact) {
      identify({
        externalId: user.id,
        email: user.email,
        name: user.name,
        image: user.avatar,
      });
    }
  }, [user, visitor?.contact, identify]);
 
  return null;
}

Copy"use client";
 
import { useVisitor } from "@cossistant/next";
 
export function UpgradeButton() {
  const { setVisitorMetadata } = useVisitor();
 
  const handleUpgrade = async () => {
    // Upgrade user's plan
    await upgradeToPro();
 
    // Update contact metadata so support agents see the change
    await setVisitorMetadata({
      plan: "pro",
      upgradedAt: new Date().toISOString(),
      mrr: 99,
    });
  };
 
  return <button onClick={handleUpgrade}>Upgrade to Pro</button>;
}