How to Integrate SiteGPT.ai with Crisp.chat

Seamlessly add SiteGPT.ai to your website and integrate the interface with your existing Crisp.chat UI, so that users can switch back and forth between SiteGPT and Crisp.chat.

3 min readMay 9, 2023

We’ve integrated SiteGPT.ai on top of Crisp.chat on our website, www.meetingroom365.com, if you’d like a demo

What is SiteGPT.ai ?

SiteGPT.ai is the simplest way to index your website, FAQs, and Helpdesk articles to provide live support to users on your website, even when you’re not around.

But while it can save you a ton of effort supporting users, and help your customers find the information they’re looking for faster than ever, it doesn’t entirely remove the need for Live Chat on your website. Any AI system, no matter how good, will need a backup.

Perhaps you tried SiteGPT.ai, and liked what you saw, but already use Crisp.chat for support on your website. Unfortunately, there was not yet a clean way to integrate the two. Until now!

Here is a demo showing how SiteGPT.ai can be integrated with Crisp.chat

Introducing SiteGPT Tools

You can embed a short script I’ve developed on your website, called SiteGPT tools, that will integrate Crisp.chat with SiteGPT.ai in just a matter of seconds.

GitHub - kidGodzilla/sitegpt-tools

Provides a basic interface in Javascript to control the SiteGPT.ai UI interface elements. You can open, close, show…

github.com

Step 1: Add the scripts to your website

First, you’ll need to add the latest SiteGPT.ai, Crisp.chat, and SiteGPT Tools scripts to your website. It’ll probably look something like this:

Here is what our combined integration looks like: first, the Crisp embed code, the SiteGPT embed code, sitegpt-tools, and the integration script.

Next, add the following custom script after your Crisp.chat and SiteGPT.ai embed codes:

<script src="https://cdn.jsdelivr.net/gh/kidgodzilla/sitegpt-tools@latest/m.js"></script>
<script>
  if (window.$crisp && window.$crisp.push) {
    $crisp.push(["on", "session:loaded", window._sitegpt.add_to_crisp]);
    $crisp.push(["on", "chat:opened", window._sitegpt.add_to_crisp]);
  } else {
    window.CRISP_READY_TRIGGER = function() {
      $crisp.push(["on", "session:loaded", window._sitegpt.add_to_crisp]);
      $crisp.push(["on", "chat:opened", window._sitegpt.add_to_crisp]);
    }
  }

  window._sitegpt.on_ready(window._sitegpt.hide);
</script>

What this does:

First, it loads the latest version of sitegpt-tools on your website, which allows you to control SiteGPT with custom Javascript actions.

Next, it adds an action to Crisp that integrates your SiteGPT popup window with Crisp.chat actions. A new button is created inside your chat window which links to the SiteGPT popup. And, it hides the default SiteGPT launcher button.

Now, when your users click “Instant Answers”, they can use a SiteGPT chat session to learn more about your product. And, if they have another question, they can easily switch back to Crisp chat.