12AF70AVaBjqfHYlFMT9TYBRg
Express.js, or simply Express, is a Node.js backend web application framework. This is a lightweight and adaptable Node.js web application framework that offers a comprehensive set of features for web and mobile applications.
In this article, I will make it very easy for you to understand how to integrate the chatbot into the Express Js project.
Let’s discuss them in detail.
To begin creating the application, type the following lines into your terminal.
$ mkdir myapp $ cd myapp $ npm init $ npm install express --save
Add the following code to an app.js file in the myapp directory. Now we have a Node.js application running with the express framework thanks to this simple configuration.
const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) })
Express-generator, an application generator tool, is used to quickly create an application skeleton. This will help install all the dependencies and allow us to run static JS/CSS files in a more structured manner. Install the application generator as a global npm package using the below code and then launch it.
$ npm install -g express-generator $ express
Note: The app structure generated by the generator is just one of many options for organizing Express apps. Please feel free to use or modify this structure to best suit your needs.
The app will be created in a folder in the current working directory, and the view engine will be set to Pug. and run the project using the following command.
DEBUG=myapp:* npm start
To integrate kommunicate with express js, create a separate script file in the public javascript folder and call it using the script tag on the layout.pug file.
(function(d, m){ var kommunicateSettings = {"appId":"YOUR_APP_ID","popupWidget":true,"automaticChatOpenOnNavigation":true}; var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "https://widget.kommunicate.io/v2/kommunicate.app"; var h = document.getElementsByTagName("head")[0]; h.appendChild(s); window.kommunicate = m; m._globals = kommunicateSettings; })(document, window.kommunicate || {});
Express uses the express.static built-in middleware function to serve static files such as images, CSS files, and JavaScript files. Check if the below function signature is added in the app.js file.
app.use(express.static(path.join(__dirname, 'public')));
You can access the Kommunicat script file using the layout.pug file script tag.
doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') script(src="javascripts/kommunicate.js") body block content
Now that we’ve specified custom JavaScript files to be used in our app let’s take a look at how they appear in the app. Load http://localhost:3000/ in a browser to see the output.
If you run the browser, you should see a chat widget screen pop up, and that means your chatbot is ready. This is how you can integrate the Kommunicate chat widget in Express.js apps.
At Kommunicate, we are envisioning a world-beating customer support solution to empower the new era of customer support. We would love to have you on board to have a first-hand experience with Kommunicate. You can signup here and start delighting your customers right away.
Originally published at https://www.kommunicate.io on July 8, 2021.
Build A Codeless Chatbot and Deploy in Javascript — Kommunicate was originally published in Chatbots Life on Medium, where people are continuing the conversation by highlighting and responding to this story.
One of the significant challenges statisticians and data scientists face is multicollinearity, particularly its most…
Artificial intelligence is not just altering the way we interact with technology; it’s reshaping the…
This post was co-written with Mickey Alon from Vidmob. Generative artificial intelligence (AI) can be…
Prompt Poet allows you to ground LLM-generated responses to a real-world data context, opening up…
NASA has three more operational Starliner missions on the books. It hasn't decided whether it…
When training a machine learning model, you may sometimes work with datasets with a large…