twilio / flex-webchat-ui-sample

Twilio Flex Web Chat UI Sample

Twilio Flex Web Chat UI Sample

This project was bootstrapped with Create React App.

You can find the most recent version of the guide on how to perform common tasks here.

This package can only be consumed together with Twilio Flex. Visit http://twilio.com/flex to find out more.

Instructions

1. Install all dependencies by running:

npm install

2. Copy webchat-appConfig.sample.js in public/assets folder and configure accordingly to use your Twilio account

cp public/assets/webchat-appConfig.sample.js public/assets/webchat-appConfig.js

3. Start Flex UI by running:

npm start

flex-webchat-ui-sample's Issues

Is it possible to use this approach for a website NOT using React as framework?

Its not self evident that this approach of customizing WebChat can be used for websites which are based on frameworks other than react. For example, suppose a website has been developed and built using
asp.net core, or
Wordpress

Is this demo even applicable to those scenarios? Or are engineers limited to the CDN approach of customizing the webchat if the underlying framework is something other than react?
If this is true, it would be helpful to the community to have a sort of disclaimer
NOTE: This approach of customizing WebChat applies only to websites using react as their underlying web framework. Customers with websites other than those based on React are limited to CDN approach.

Im just hoping to get some clarification since I dont think its evident to me how to go about using the NPM approach to customize the WebChat when the website is using something other than react.

ANy insight is appreciated. I have asked this question on forums.twilio.com, with not a clear cut answer.
https://forums.twilio.com/questions/1216/what-exactly-is-required-in-order-to-create-custom.html

Sample config not attached to window object

in src/index.js the appConfig is attached to the window object.

ReactDOM.render(
  <App configuration={window.appConfig} />, //note window.appConfig
  document.getElementById("root")
);

in public/assets/webchat-appConfig.sample.js[link] however there is no config being attached to window here.

SessionActions no longer available in 2.3.0

Sorry if this is the wrong forum but am not sure where to post this. It seems that SessionActions class is no longer available in 2.3.X.

Lots of deprecation warnings.

Hi, I'm not sure if this is the right place to raise this but I am trying to use @twilio/flex-webchat-ui and am seeing lots of deprecation warnings:

Is this being looked into?

service-worker.js not in the repo

https://github.com/twilio/flex-webchat-ui-sample/blob/master/src/registerServiceWorker.js#L33 references service-worker.js file which seems to be missing. Would you please provide a sample of the file?

Integration with redux store not possible

Root reducer is not exported in flex-webchat-ui, wich makes it impossible to integrate with custom redux store.

Flex Flow SID

Sorry, I review all my Flex cloud installation and I can't find the Flex Flow SID. I need it to run the sample.

var appConfig = {
    //  change the your AccountSid
    accountSid: "AC...",
    // change to your Flex Flow SID
    flexFlowSid: "FO...",
    colorTheme: {
        overrides: brandedColors
    }
}

Where I can find it?

a bit dated, can be updated for using react hooks?

I am getting weird warnings about old react context api, can't get it to load properly with useEffect and react hooks, example please...

Question: How to change the default character of WebChat UI (Localization)

I would like to change some default characters of Flex Webchat UI, for example "welcome message". I have tried to add like below statement in the index.js or app.js. However It does not work (actually .js error happens)

manager.strings.WelcomeMessage = "I wanna change this Welcome Message";

I know there is the document "localization and UI templating", but it does not work as well.

Could you please advice, How can I actually change (localize) the webchat UI characters.

Flex Flow SID is Blank

Hi,

I am unable to find FlexFlowSID in the Twilio account. In Flex, it is blank. Can someone help me on this?

In Studio, I could see the below ID's but the web chat UI is not starting, if I use ChatFlow ID mentioned in the snippet below.

Yarn not supported

Should there be a note similar to this one about yarn not being supported? twilio/flex-plugin-builder#2

TypeError: Handlebars.compile is not a function

After including twilio-flex-webchat.min.js:

twilio-flex-webchat.min.js:148 Failed to create webChat: TypeError: Handlebars.compile is not a function
    at twilio-flex-webchat.min.js:137
    at Array.forEach (<anonymous>)
    at v (twilio-flex-webchat.min.js:137)
    at Module.p (twilio-flex-webchat.min.js:142)
    at Function.value (twilio-flex-webchat.min.js:142)
    at e.value (twilio-flex-webchat.min.js:142)
    at new e (twilio-flex-webchat.min.js:142)
    at twilio-flex-webchat.min.js:142
    at v (twilio-flex-webchat.min.js:137)
    at Generator._invoke (twilio-flex-webchat.min.js:137)
(anonymous) @ twilio-flex-webchat.min.js:148

My project uses Handlebars as well, version 3.0.3, but I only include the runtime library because all templates are compiled ahead of time during a project build step.

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.runtime.min.js"></script>
<script src="my-templates.js"></script>

Looks like there is some sort of conflict. If flex-webchat-ui was open-source I could try to fix it myself but since it's not, I'm reporting the issue on this repo. Sorry, I don't know where else to send it.

Failed to initialize Flex Web Chat TypeError: Cannot read property 'logLevel' of undefined

When I follow the guide (cloning the repository and running npm install), I get some warnings and errors about deprecated packages. If I update all the packages using ncu -u and run npm install again, at least the errors are solved, but some warnings are still there. WhenI run npm start, the server ist starting and I can see the background logo in the browser, but there is no chat appearing. When I check the browsers console I see the following error logs:

Uncaught SyntaxError: Unexpected token '<'

and

index.js:1 Failed to initialize Flex Web Chat TypeError: Cannot read property 'logLevel' of undefined at twilio-flex-webchat.prod.js:137 at tryCatch (runtime.js:45) at Generator.invoke [as _invoke] (runtime.js:271) at Generator.prototype.<computed> [as next] (runtime.js:97) at g (twilio-flex-webchat.prod.js:137) at a (twilio-flex-webchat.prod.js:137) at twilio-flex-webchat.prod.js:137 at new Promise (<anonymous>) at Function.n (twilio-flex-webchat.prod.js:137) at Function.<anonymous> (twilio-flex-webchat.prod.js:137) at new App (App.js:12) at constructClassInstance (react-dom.development.js:14204) at updateClassComponent (react-dom.development.js:18413) at beginWork$1 (react-dom.development.js:20186) at beginWork$$1 (react-dom.development.js:25756) at performUnitOfWork (react-dom.development.js:24698) at workLoopSync (react-dom.development.js:24671) at performSyncWorkOnRoot (react-dom.development.js:24270) at scheduleUpdateOnFiber (react-dom.development.js:23698) at updateContainer (react-dom.development.js:27103) at react-dom.development.js:27528 at unbatchedUpdates (react-dom.development.js:24433) at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527) at Object.render (react-dom.development.js:27608) at Module../src/index.js (index.js:12) at __webpack_require__ (bootstrap:785) at fn (bootstrap:150) at Object.1 (registerServiceWorker.js:117) at __webpack_require__ (bootstrap:785) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.chunk.js:1

Can anybody help me?