Add Live Chat Support

Websitero integrates with Crisp to provide real-time chat support. Help your customers instantly with a beautiful live chat widget.

Setup Crisp Live Chat

Get live chat working in 5 minutes

Create a Crisp Account

✨ Free Plan Available

Crisp offers a free plan with unlimited conversations - perfect for getting started!

Get Your Website ID

•In your Crisp dashboard, create a new website (workspace)
•Open Settings → Workspace Settings → Setup & Integrations
•Click Chatbox setup instructions
•Copy the CRISP_WEBSITE_ID (looks like: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)

💡 Tip: The Website ID is the UUID inside the HTML snippet on the Chatbox setup instructions screen, it's the value assigned to CRISP_WEBSITE_ID.

Add to Site Configuration

Open src/data/client.ts and add a support config alongside the existing exports:

// src/data/client.ts
// Add this next to your existing SITE, BUSINESS, SEO and OG exports.
// BUSINESS is already defined in this file, so we reuse its email.

// ===== CUSTOMER SUPPORT =====
export const SUPPORT = {
  email: BUSINESS.email,
  crispWebsiteId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // Your Crisp Website ID
};

Add Crisp Script to Layout

Open your layout src/layouts/BaseLayout.astro, import the config in the frontmatter, and add the Crisp loader inside the <head> (Crisp's recommended spot). Because the starter ships Astro's <ClientRouter />, boot it on astro:page-load so the widget survives client-side navigation:

---
import { ClientRouter } from "astro:transitions";
import { SUPPORT } from "@data/client";
// ...your other layout imports
---
<html lang="en">
  <head>
    <ClientRouter />
    <!-- ...existing head: <Meta />, nav.js, etc. -->

    {/* Crisp Live Chat, boots once and survives View Transitions */}
    {SUPPORT.crispWebsiteId && (
      <script is:inline define:vars={{ crispWebsiteId: SUPPORT.crispWebsiteId }}>
        if (!window.CRISP_WEBSITE_ID) {
          window.$crisp = [];
          window.CRISP_WEBSITE_ID = crispWebsiteId;

          const boot = () => {
            if (document.querySelector('script[src="https://client.crisp.chat/l.js"]')) return;
            const s = document.createElement("script");
            s.src = "https://client.crisp.chat/l.js";
            s.async = true;
            document.head.appendChild(s);
          };

          boot();
          // <ClientRouter /> swaps pages without a full reload, so re-run after
          // every navigation (astro:page-load also fires on the first load).
          document.addEventListener("astro:page-load", boot);
        }
      </script>
    )}
  </head>
  <body>
    <!-- ...StaticHeader, <slot />, Footer... -->
  </body>
</html>

🔁 Why astro:page-load? This starter uses Astro View Transitions (<ClientRouter />), which swap page content without a full reload. Booting Crisp from the astro:page-load event, instead of a one-off snippet before </body>: keeps the chat available on every page, not just the first one a visitor lands on.

🎉 You're All Set!

Run npm run dev and you'll see the Crisp chat widget in the bottom-right corner, and thanks to the astro:page-load hook it stays put as visitors move between pages. Customize colors, messages, and behavior in your Crisp dashboard.

Add Support Buttons

Create reusable support buttons throughout your site

Create a Support Button Component

Following the starter's component-per-folder convention, create src/components/SupportButton/SupportButton.astro:

---
// Support Button - Opens Crisp chat or falls back to email
import { SUPPORT } from "@data/client";

const { crispWebsiteId, email } = SUPPORT;
---

{crispWebsiteId ? (
  <button
    onclick="$crisp.push(['do', 'chat:open'])"
    class="inline-flex items-center gap-2 px-6 py-3 bg-blue-50 hover:bg-blue-100 text-slate-700 font-bold rounded-lg transition-colors shadow-lg">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
    </svg>
    Chat with Support
  </button>
) : (
  <a
    href={`mailto:${email}?subject=Support%20Request`}
    class="inline-flex items-center gap-2 px-6 py-3 bg-blue-50 hover:bg-blue-100 text-slate-700 font-bold rounded-lg transition-colors shadow-lg">
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
    </svg>
    Email Support
  </a>
)}

Use the Support Button

Import it in any page or component's frontmatter, then drop it in your markup:

---
import SupportButton from "@components/SupportButton/SupportButton.astro";
---

<div class="text-center py-8">
  <p class="text-slate-600 mb-4">Need help? We're here for you!</p>
  <SupportButton />
</div>

💡 Smart Fallback

The button automatically switches between Crisp chat and email based on your configuration. If Crisp isn't set up, users can still contact you via email.

Don't Want Live Chat?

You can skip Crisp setup and use email-only support. Simply leave crispWebsiteId empty in your config and the support button will automatically use your support email instead.

This is perfect for side projects or if you prefer handling support via email.

Ready to Help Your Customers! 💬

Your live chat is now set up and ready to handle customer inquiries in real-time.

Add Live Chat Support