Articles on: Installing Crisp

How to install Crisp Live Chat on a custom website?

This article explains how to install the Crisp Live Chat widget on a custom website.


The easiest way to add Crisp to a custom website is to copy your Crisp chatbox script and paste it into your website HTML. If your website runs on a CMS, ecommerce platform, or JavaScript framework, you can use a dedicated guide instead.


This guide is split into practical steps:


Before you start


Before installing Crisp on your website, make sure you have:


  • A Crisp workspace → needed to generate your chatbox script
  • Access to your website code → needed to paste the script in your HTML
  • Permission to add custom JavaScript → required for the Crisp chatbox to load


If you do not have a Crisp workspace yet, create one from the Crisp signup page.


Once your workspace is created, you can find your chatbox script and Website ID from Settings → Workspace Settings → Setup & Integrations.


Crisp setup is best handled from a desktop browser, especially when copying installation scripts or configuring platform integrations.


Watch the installation walkthrough


This video shows how to install the Crisp chatbox on a custom website by copying your Crisp script and adding it to your website HTML.



Copy your Crisp chatbox script


Use this method if your website is custom-coded or if your platform allows you to paste custom HTML or JavaScript.


To copy your Crisp script:

  1. Open Crisp
  2. Go to Settings → Workspace Settings → Setup & Integrations
  3. Open Chatbox setup instructions
  4. Copy the Crisp chatbox script


Copying the Crisp chatbox script


Make sure you copy the full script. If part of the script is missing, the chatbox will not load correctly.


Add the script to your website HTML


Paste the Crisp script into your website HTML.


The recommended place is inside the <head> section, before the closing </head> tag.


If you cannot edit the <head> section, you can usually paste the script before the closing </body> tag instead.


Recommended placement:

  • Best option → before the closing </head> tag
  • Alternative option → before the closing </body> tag
  • Important rule → add the script on every page where you want the Crisp chatbox to appear


After adding the script, publish or deploy your website changes.


Install Crisp on a single-page app


If your website is a single-page app, the Crisp script should be loaded once when the app starts.


Avoid reinjecting the script every time the visitor changes page inside your app. This can create duplicate loads or unexpected behavior.


If your website uses a JavaScript framework, follow the dedicated guide when available:



For Astro, add the standard Crisp script in your shared layout, such as Layout.astro, so it loads on the pages where you want the chatbox to appear.


Check that Crisp is installed correctly


After publishing your changes, open your public website in a browser.


The Crisp chatbox should appear on the pages where the script is installed.


To test your installation:

  1. Open your public website
  2. Check that the Crisp chatbox appears
  3. Send a test message from the chatbox
  4. Open your Crisp Inbox
  5. Confirm that the test conversation appears in Crisp


If you do not see the chatbox right away, try opening your website in a private browser window or clearing your website cache.


Troubleshooting


If the Crisp chatbox does not appear, check the most common installation issues first.


Common issues include:

  • The script was not copied fully → copy the full script again from Crisp
  • The website was not published → deploy or publish your latest website changes
  • The script was added to the wrong template → add it to the shared layout or global HTML file
  • The script is not loaded on every page → add it to the pages where the chatbox should appear
  • Your CMS cache is still active → clear your cache and reload the website
  • Custom JavaScript is blocked → check whether your platform or plan allows third-party scripts
  • A browser extension blocks the widget → test again in a private window or another browser


If your platform does not allow third-party JavaScript, Crisp cannot load until custom scripts are supported on that platform or plan.


Using a CMS, ecommerce platform, or framework


If your website is built with a CMS, ecommerce platform, or JavaScript framework, use the dedicated guide when available. These guides follow each platform’s recommended installation flow.


CMS and website builders


Choose the guide for your platform:


Ecommerce platforms


Choose the guide for your store:


JavaScript frameworks


Choose the guide for your framework:


If your platform is listed above, we recommend using the dedicated guide instead of the generic HTML method.


Need help choosing the right method?


If your website is custom-coded, use the generic HTML installation method described in this article.


If your website runs on a CMS, ecommerce platform, or JavaScript framework, use the dedicated guide when available.


If your platform is not listed, use the generic HTML installation method whenever your website builder allows custom JavaScript. If custom JavaScript is blocked by your platform or plan, Crisp cannot load until that platform allows third-party scripts.


What to do after installation


Once Crisp is installed, visitors can contact you from your website through the chatbox.


Your team can then receive and reply to messages from the Crisp Inbox.


After installation, you can also:


  • Customize your chatbox appearance
  • Invite teammates to your workspace
  • Create shortcuts for common replies
  • Configure workflows and automations
  • Set up Hugo AI Agent to help handle conversations


You can also explore the Crisp Chat widget page to learn more about what the chatbox can do.

Updated on: 29/06/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!