Giter VIP home page Giter VIP logo

Comments (6)

marcogrcr avatar marcogrcr commented on September 25, 2024 4

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.

pmc-a avatar pmc-a commented on September 25, 2024 2

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

sudo-ryan avatar sudo-ryan commented on September 25, 2024 2

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.

indyfromoz avatar indyfromoz commented on September 25, 2024 2

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

wilberh avatar wilberh commented on September 25, 2024

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.

indyfromoz avatar indyfromoz commented on September 25, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

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

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.