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

•Open app.crisp.chat and select your workspace
•Go to Settings → Workspace Settings → Setup & Integrations
•Open Chatbox setup instructions and copy the chatbox script
•Inside that snippet, copy the CRISP_WEBSITE_ID value (looks like: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)

💡 Tip: The Website ID is the only part of that snippet you actually need, the rest of the loader code is identical for every site.

Add It to Your Client Data

The kit keeps a single source of truth in src/_data/client.js. Add your Crisp Website ID there so it's available to every template as client.crispWebsiteId:

// src/_data/client.js
module.exports = {
  name: "Your Business",
  email: "hello@yourbusiness.com",
  phoneForTel: "+15551234567",
  phoneFormatted: "(555) 123-4567",

  // Crisp live chat, paste your Website ID here
  crispWebsiteId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",

  address: { /* ... */ },
  socials: { /* ... */ },
  domain: "https://yourbusiness.com",
  isProduction: process.env.ELEVENTY_ENV === "production",
};

Add Crisp Script to Layout

The base layout lives at src/_includes/layouts/base.html (Nunjucks). Crisp recommends loading the chatbox from the <head>, so paste this just before the closing </head> tag:

    {# Crisp Live Chat Widget #}
    {% if client.crispWebsiteId %}
    <script type="text/javascript">
      window.$crisp = [];
      window.CRISP_WEBSITE_ID = "{{ client.crispWebsiteId }}";
      (function () {
        const d = document;
        const s = d.createElement("script");
        s.src = "https://client.crisp.chat/l.js";
        s.async = 1;
        d.getElementsByTagName("head")[0].appendChild(s);
      })();
    </script>
    {% endif %}
  </head>

🎉 You're All Set!

Visit your site and you'll see the Crisp chat widget in the bottom-right corner. You can customize colors, messages, and behavior in your Crisp dashboard.

Add Support Buttons

Create reusable support buttons throughout your site

Create a Support Button Component

Create src/_includes/components/button-support.html:

{# Support Button - Opens Crisp chat or falls back to email #}

{% if client.crispWebsiteId %}
  {# Open Crisp Chat #}
  <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>
{% else %}
  {# Fallback to Email #}
  <a
    href="mailto:{{ client.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>
{% endif %}

Use the Support Button

Add the button anywhere in your pages:

<div class="text-center py-8">
  <p class="text-slate-600 mb-4">Need help? We're here for you!</p>
  {% include "components/button-support.html" %}
</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 client.js and the support button will automatically fall back to your client.email instead.

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