Tools and Integrations

Customer Support

For customer support, we’ll be using Crisp as it’s a free alternative to Intercom. It provides live chat functionality and other customer support features.

If you like, you can also adapt this guide for other customer support platforms by referring to their specific documentation.

Because we are using Framer for our landing page and Next.js for our main app (codebase), we’ll have to configure Crisp to work with both.

Create a Crisp Account

Login to your existing Crisp account or create a new one [here].
Set up your website in Crisp and obtain your Website ID. You’ll be guided through this process in the Crisp dashboard.

Configure Crisp in Framer

Inside Framer, when inside a project go to GENERAL → CUSTOM CODE.
Paste the following code into the HEAD tag. Ensure to replace [YOUR_CRISP_WEBSITE_ID] with your actual Crisp Website ID.

You can find the Crisp tracking snippet pre-filled with this data under SETTINGS → WEBSITE SETTINGS → SETUP INSTRUCTIONS → CHATBOX SETUP INSTRUCTIONS → HTML.

<script type="text/javascript">
    window.$crisp=[];window.CRISP_WEBSITE_ID="[yOUR_CRISP_WEBSITE_ID]";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
</script>

Configure Crisp in Codebase

Inside the codebase, go to the layout.tsx file and add the Crisp snippet inside the BODY tag.
Ensure to replace [YOUR_CRISP_WEBSITE_ID] with your actual Crisp Website ID.

Here’s what it should approx. look like:

layout.tsx

import Script from "next/script";
 
<Script id="crisp-script" strategy="afterInteractive">
    {`
        window.$crisp=[];window.CRISP_WEBSITE_ID="[yOUR_CRISP_WEBSITE_ID]";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
    `}
</Script>

If all done correctly, you should see the Crisp chat widget on your landing page and app.

Tracking User Behaviour Rate Limits (API Calls)