- HAPPYFOX CHAT DOCUMENTATION HOW TO
- HAPPYFOX CHAT DOCUMENTATION INSTALL
- HAPPYFOX CHAT DOCUMENTATION FULL
- HAPPYFOX CHAT DOCUMENTATION PRO
- HAPPYFOX CHAT DOCUMENTATION CODE
Your folder structure should look like this: |- express-react-chat-widget Inside your directory, run npx create-react-app to scaffold a new React application: npx create-react-app client Now would be a good time to test the end-points with curl or Postman but we'll trust they work and move on to the client. In a terminal window, run node server.js and look out for a message that says "Listening on port 5000".
HAPPYFOX CHAT DOCUMENTATION CODE
For the UID, we can use new Date().getTime() to generate a random ID.Īdd the following code to server.js: app.get('/api/create', (req, res) => `) In this tutorial, we will hard-code the same name for all customers - we’ll call every customer “customer” - but the UID has to be unique. In order to create a new user, we need to send a POST request with the UID and name for the user. In the same file, let’s now define a route to handle creating new CometChat users. We'll send this header with every request to CometChat
Define the CometChat API url for convenient access.Store our application credentials and agent user ID, which we created earlier.
HAPPYFOX CHAT DOCUMENTATION PRO
enter CometChat Pro configurations here Then, in a file called sever.js paste: const express = require('express')
HAPPYFOX CHAT DOCUMENTATION INSTALL
Next, install Express and axios: npm install express axios Returns a list of CometChat users, for use later in the dashboardįirst, create a new empty directory for your Express app and run `npm init -y`: mkdir react-express-chat-widget.Returns authentication tokens (more on this later).
HAPPYFOX CHAT DOCUMENTATION FULL
Creates CometChat user using the full access key.To avoid this problem, we’ll create a simple Express server that: While we could do this on the client, that would mean sharing our private full access key in public, which is a no go. In the previous step, we created a full access key, which we can use to create CometChat users dynamically. Note your API key and app ID because, like the agent user ID, you’ll need them both later. I called my key “react-chat-api” but it doesn’t really matter what you write here. On the same page, click the API Keys tab then Create API Key: In any case, take note of the user ID because you’ll need to reference it later.īefore we move on from the dashboard and on to the code, we should create a CometChat full access key. I recommend you use the same values if you’re following along. Here, you can click Create User:įor the user ID, I wrote “ecommerce-agent” and for the name, I wrote “Demo Agent”. To do so, click Explore then head to the Users tab. However, because there will only be one agent, we can create an “Agent” user in advance from the dashboard. Users are a fundamental concept in CometChat, which you can read more about here.īecause we will likely have many customers, for each customer who connects to our chat, we will need to dynamically create a CometChat user.
We’ll have two types of users connect to our chat: Customers who open the chat widget and one support agent who will access the chat and respond to inquiries from the dashboard. I called my application “react-chat-widget” but you can call yours whatever you like. To create a CometChat app, go to the CometChat dashboard (if you don’t have a free CometChat account already now is a good time to sign up) and hit the + icon.
Before you can integrate CometChat, however, you must first create a CometChat app. To power your chat application, you’ll be using CometChat. First things first, create your CometChat app I encourage you to follow along but if you’d rather to skip ahead to the code, you can find the complete code for this application on GitHub. In addition to CometChat, we will use the following technologies: If you want to follow along, you can create a free account here. With easy integrations and clear documentation, you’ll be able to add a live chat feature into your application with just a few lines of code, as you will soon see. To power our chat application, we’ll be using CometChat Pro.ĬometChat Pro is a powerful communication API that enables you to add chat features to your application. Here’s a preview of what we’ll be building:
HAPPYFOX CHAT DOCUMENTATION HOW TO
In this tutorial, I’m going to show you how to integrate a live chat feature into your React app without the worry of maintaining your own chat server and architecture. So, how do you integrate a live chat into your React application? Best of all, the quicker you can answer customer’s questions during the buying process, the more likely that person is to buy. It’s fast and efficient since one agent can help many customers at once. Live chat is a customer support method with a proven record.
0 kommentar(er)
