Comments (6)
Note that amazon-connect-chatjs
has been released to npm
. The following minimal config works for me:
index.jsx:
import "amazon-connect-chatjs";
import React, { Fragment } from "react";
import { render } from "react-dom";
function App() {
const isLoaded = window.connect && window.connect.ChatSession;
return (
<Fragment>
<h1>react-amazon-connect-chatjs</h1>
{isLoaded ? "loaded!" : "failed"}
</Fragment>
);
}
render(<App />, document.getElementById("app"));
index.html:
<!DOCTYPE html>
<html>
<head>
<title>amazon-connect-chatjs-react-demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
webpack.config.js:
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./index.jsx",
devServer: {
https: true
},
module: {
rules: [
{ test: /\.jsx?$/, use: "babel-loader" }
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
}),
]
};
.babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": { "version": 3 }
}
],
"@babel/preset-react"
]
}
package.json:
{
"name": "amazon-connect-chatjs-react-demo",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server -w"
},
"dependencies": {
"amazon-connect-chatjs": "1.0.6",
"react": "16.13.1",
"react-dom": "16.13.1"
},
"devDependencies": {
"@babel/core": "7.10.2",
"@babel/preset-env": "7.10.2",
"@babel/preset-react": "7.10.1",
"babel-loader": "8.1.0",
"core-js": "3.6.5",
"html-webpack-plugin": "4.3.0",
"regenerator-runtime": "0.13.5",
"webpack": "4.43.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0"
}
}
I believe this can be closed.
from amazon-connect-chatjs.
@indyfromoz similar situation here, I've implemented it within a React application by pulling it in as an async script within my main HTML - which attaches it to the global window object. Alternatively, you could import the script outside the scope of a component and allow webpack to pick it up and bundle it up with the rest of your application.
Then I've used the Context API to hook it into the React engine and provide it throughout the application.
Hope this helps!
from amazon-connect-chatjs.
Facing the same issues - ideally should be able to import this as a dependency in our project and call methods direct without needing to reference the bundle directly.
I think we'd all appreciate some further details in the README if this is at all possible 👍
from amazon-connect-chatjs.
@wilberh You may want to take a look at - https://github.com/pmc-a/aws-connect-client
I ended up building a non-React solution for a custom chat component. I hope someone from Amazon Connect team helps developers build React Components with their Chat APIs.
from amazon-connect-chatjs.
Please provide further details. I don't have access to the global connect variable in my current scope after I import it in React.
from amazon-connect-chatjs.
Closing this issue as ChatJS SDK is now available via NPN. Thank you @marcogrcr for sharing the approach 🙏
from amazon-connect-chatjs.
Related Issues (20)
- Specifying incorrect participantId in ChatSession.create() fails silently, causes onDeliveredReceipt()/onReadReceipt() listeners to be invoked when they shouldn't
- TypeScript typings are outdated HOT 5
- Function is not allowing Inside connect.contact(()=>{}) HOT 2
- connectionDetails value not accessible, seems to not be assigned properly & types don't match HOT 2
- Typo on 'throttleTime' property when trying to call 'setGlobalConfig' HOT 2
- ReferenceError: connect is not defined in JS HOT 15
- React native CSM support HOT 4
- Facing Issue when working with multimedia messages HOT 3
- Send attachment throw error that signature does not match HOT 1
- Callbacks not called when its mounted next time HOT 2
- Download Attachment Returning Blob istead of S3 pre-signed URL HOT 1
- Avoid having to use "unsafe-inline" settings for CSS (style directive) HOT 1
- Want to send additional information with file in send Attachment method HOT 5
- StateError: There is no upstream conduit! HOT 1
- CSP Error on loadCsmScriptAndExecute() HOT 1
- Some type definitions are missing from versions above 2.0 HOT 1
- Issue with setGlobalConfig and messageReceipts in Amazon Connect ChatJS HOT 5
- Support for `chatSession.onParticipantLeft()` HOT 1
- Set transcript in chat HOT 1
- v2.0 types are missing critical information & don't provide ChatSession interface HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from amazon-connect-chatjs.