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 and head over to app.crisp.chat
- Navigate to Settings > Workspace Settings > Setup & Integrations
- Copy the script from "Chatbox setup instructions"
- Copy the JavaScript code to retrieve your
CRISP_WEBSITE_ID
.
- Inside your
plugins
folder, create a filecrisp.js
and paste this code below. Replace theCRISP_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);
})();
};
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: 24/02/2025
Thank you!