How do I install Crisp Live Chat on Nuxt.js

Articles on: Install Crisp

Are you using Nuxt.js to create your new web application? Here is how you can add the Crisp chatbox on it in less than 2 minutes.

• Create an account on Crisp.

• Go to Settings. Then, Website Settings.

• Next to your website, click on Settings.

• Click on Setup instructions.

• Click on Chatbox setup instructions.

• Select HTML.

• 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.

undefined export default () => { window.$crisp = []; window.CRISP_WEBSITE_ID = "-Jz83enQu9383enYV8"; (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

:

undefined 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 Crisp livechat appearing on your website.

Updated on: 11/03/2024

Updated on: 19/07/2024