How do I install Crisp Live Chat on Nuxt.js

Are you using Nuxt.js to create your new web application? With this article, you can install a chat widget to any NuxtJS app in less than 2 minutes.

Create an account on Crisp.
Go to Settings. Then, Workspace Settings.
Next, click on Integrations.
Click on Chatbox.



Copy the JavaScript code to retrieve your CRISP_WEBSITE_ID.



Inside your plugins folder, create a file crisp.js and paste this code below. Replace the CRISP_WEBSITE_ID with yours.

export default () => {
  window.$crisp = [];
  window.CRISP_WEBSITE_ID = "MY-UNIQUE-ID";

  (function() {
    var d = document;
    var s = d.createElement("script");

    s.src = "https://client.crisp.chat/l.js";
    s.async = 1;
    d.getElementsByTagName("head")[0].appendChild(s);
  })();
};

Make sure to replace CRISP_WEBSITE_ID with yours. Otherwise, this will not work!

Then, we tell Nuxt.js to import it in our main application. Open nuxt.config.js:

module.exports = {
  plugins: [{ src: "~plugins/crisp.js", mode: "client" }]
};

For your information, setting mode to client tells the server that this plugin should only be run on the browser. Rendering this plugin server-side would trigger an error as it is making use of the window object.

If you refresh the page, you should now see your brand new chat widget appearing on your website.

Updated on: 11/09/2024