any one can tell me how to use livechat widget api?

[xkungfu]

I want to use live chat widget api with below codes:

RocketChat(function() {
    this.onChatEnded(function() {
        // do whatever you want
        console.log('chat ended');
    });
});

or

RocketChat(function(){
  this.setTheme({
    hideChatButton: true,
    hideMinimizeChatButton: true,
    hideExpandChatButton: true
  });
});

but I didn't find any example in project files and detail in offical docs. I am strange why other developers know how to use it and I have no idea.

where to add api example code? Rocket.chat server or livechat client? which file to add?

any one can give me an example?

thanks a lot!

[xkungfu]

and finally I found that the code running outside livechat and must in production package.

why designed the code logic as this method?

if it is internal function, one can call the function via a message. would be more useful.

[dtvu94]

Because originally, Rocket.Chat.Livechat is a meteor package inside Rocket.Chat.

There are 2 cases of using Livechat according to my understand:

1. Use Rocket.Chat.Livechat directly
2. Use as an embedded app inside another web page

In case 1, you can use API directly via the SDK for Livechat "@rocket.chat/sdk": "^1.0.0-alpha.41". Example is easy as you do commands:

yarn
yarn dev
yarn serve 

In case 2, you need to include it inside the webpage. You can listen to some events or change store setting inside the Livechat app via API as in this link https://docs.rocket.chat/api/livechat-api . Example is the widget-demo https://github.com/RocketChat/Rocket.Chat.Livechat/blob/develop/widget-demo.html, but it needs some modifications to let the html file see file rocketchat-livechat.min.js and see index.html page.

About this question:

and finally I found that the code running outside livechat and must in production package.

You should take a look at this file to understand how Rocket.Chat include Livechat as a package during building step. (I assume you use Linux to run Rocket.Chat) https://github.com/RocketChat/Rocket.Chat/blob/develop/packages/rocketchat-livechat/plugin/build.sh Explanations:

• Rocket.Chat.Livechat build folder is published via npm publish to npm registry

yarn build
npm publish

• Rocket.Chat will install this package and copy the build to /public/livechat
• Rocket.Chat serve Livechat at url /livechat
• You can get the installation guide at this Rocket.Chat page /omnichannel/installation
• You can make a custom Livechat package then replace this line with your correct node_modules path

cp -a $ROOT/node_modules/\@rocket.chat/livechat/build/. ./

[xkungfu]

I see, Thank you for your detailed explanation!

[sctEdwin]

You should take a look at this file to understand how Rocket.Chat include Livechat as a package during building step. (I assume you use Linux to run Rocket.Chat) https://github.com/RocketChat/Rocket.Chat/blob/develop/packages/rocketchat-livechat/plugin/build.sh Explanations:

* Rocket.Chat.Livechat build folder is published via `npm publish` to npm registry

yarn build
npm publish

* Rocket.Chat will install this package and copy the build to `/public/livechat`

* Rocket.Chat serve Livechat at url `/livechat`

* You can get the installation guide at this Rocket.Chat page /omnichannel/installation

* You can make a custom Livechat package then replace this line with your correct node_modules path

cp -a $ROOT/node_modules/\@rocket.chat/livechat/build/. ./

Thank you very much for the information, one thing that puzzles me very much is that RC shown here https://github.com/RocketChat/Rocket.Chat have a different content from the RC I built(version looks alright, latest version 3.1.1 latest). See the output for tree command for a brief picture of what I mean by different.

I login to my RC container through bash(docker exec -it ) and I could not find /public/livechat directory nor the shell script you mentioned here https://github.com/RocketChat/Rocket.Chat/blob/develop/packages/rocketchat-livechat/plugin/build.sh am I using some "obsolete" version of RC?(see attachment for the closest thing that I can find)

There is no documentation on how to implement the new livechat client for case2.

I can "yarn start" the livechat widget on 8080 port and can communicate with a remote RC Server i.e. case1, but I would like to implement case2. (Use as an embedded app inside another web page) In order to do that, I will have to locate the path you mentioned.

The livechat widget installation shown by default on Rocket.Chat says that j.src = 'https://chat.sct.co.jp/livechat/rocketchat-livechat.min.js?_=201903270000'

which is using the folder here.(looks similar to the files that generated from yarn dev or yarn build(after extract from tar.gz) but when I tried to replace the files, livechat stop working.)

In case 2, you need to include it inside the webpage. You can listen to some events or >change store setting inside the Livechat app via API as in this link >https://docs.rocket.chat/api/livechat-api . Example is the widget-demo https://github.com/RocketChat/Rocket.Chat.Livechat /blob/develop/widget-demo.html, but it needs some modifications to let the html file see file rocketchat-livechat.min.js and see index.html page.

I observed that in the new widgetdemo.html https://github.com/RocketChat/Rocket.Chat.Livechat/blob/develop/widget-demo.html j.src = '/livechat/1.0.0/rocketchat-livechat.min.js?_=' + Math.random(); is not pointing to the same path and 1.0.0 directory is added in the middle, I mkdir a new 1.0.0 folder and move the files in my yarn build(after extract) to here too but livechat did not work too.

Would appreciate any feedback.

[dtvu94]

Would appreciate any feedback.

The way you show above is the instruction for how to use Livechat in case 1.

If you want to use as an embedded app, you can use directly https://github.com/RocketChat/Rocket.Chat.Livechat as an app. Or rebuild a new widget one with @rocket.chat/sdk: 1.0.0-alpha.41

Let make an example:

• Start Rocket.Chat in localhost:3000 (by default)
• Start Rocket.Chat.Livechat in localhost:5000 (by default)
• Make some changes to screen chat icon or any thing you want in the project Rocket.Chat.Livechat

You will see that the display of localhost:3000/livechat and localhost:5000 are different to each other. Reasons:

• /livechat will use a published version, which is get from NPM.
• localhost:5000 is a separated app.

Now you can embedded/use directly Rocket.Chat.Livechat to an existed app (as you should understand the way it work too),

[sctEdwin]

If you want to use as an embedded app, you can use directly https://github.com/RocketChat/Rocket.Chat.Livechat as an app. Or rebuild a new widget one with @rocket.chat/sdk: 1.0.0-alpha.41

Thank you for the feedback. I can start https://github.com/RocketChat/Rocket.Chat.Livechat as a separate local server using yarn dev or yarn build a build.tar.gz file and then host the newly build widget, but the problem is it cannot be embedded onto other website like the one installed by default under RocketChat directory. i.e. /app/bundle/programs/web.browser/app/livechat

I want to use https://github.com/RocketChat/Rocket.Chat.Livechat as an embedded app.

/livechat will use a published version, which is get from NPM.

So if I yarn build the build.tar.gz file and npm publish it online, only then can I use npm to install the published node module to replace the current livechat installed by default under RocketChat directory. i.e. /app/bundle/programs/web.browser/app/livechat? Is there any way to install it without making reference to public NPM repository(i.e. without publishing the build?)

For the build script in https://github.com/RocketChat/Rocket.Chat/blob/develop/packages/rocketchat-livechat/plugin/build.sh, do I have to download it from GitHub, put the build script under the /app/bundle/programs/web.browser/packages/rocketchat_livechat directory and run it? I could find neither plugin directory nor the build script there and there is only the assets directory.

Your feedback is highly appreciated.

[dtvu94]

Ok, I get your point. There are 1 easy way is:

• Register an account in NPM
• Fork Rocket.Chat.Livechat, modify as you want, publish its build folder as a new package in NPM, called A (you need to check the webpack.config.js and property "files" in package.json https://docs.npmjs.com/cli/v7/commands/npm-publish#files-included-in-package when you publish the package, I use an old version so it is different from the current one)
• Open Rocket.Chat package.json, you search a string "@rocket.chat/livechat". You should uninstall this package, and install your A package.
• Change the build path in packages/rocketchat-livechat/plugin from rocket.chat/livechat in node_modules to your A package in node_modules
• Start the project
• Check if all files are serve in /public folder correctly.

Now you can use it as the instruction guide in Rocket.Chat Livechat Instruction because its production build is changed

[sctEdwin]

Thank you very much for the solution, I search everything under /app/bundle inside my RC instance(docker container) but could not find a package.json that already included @rocket.chat/livechat, I guess the package.json you pointed out is available in https://github.com/RocketChat/Rocket.Chat/blob/develop/package.json Do you mean the package.json under /app/bundle/programs/server/package.json?

it just seems the /app/bundles seems so different from the rocketchat on Github I cannot find the build script, there is no plugin directory under packages/rocketchat-livechat I do have an assets directory containing a single demo.html file under web.browser/ path

[dtvu94]

I search everything under /app/bundle inside my RC instance(docker container) but could not find a package.json that already included @rocket.chat/livechat, I guess the package.json you pointed out is available in https://github.com/RocketChat/Rocket.Chat/blob/develop/package.json Do you mean the package.json under /app/bundle/programs/server/package.json

I mention the package.json in the source code of Rocket.Chat before you build it into a docker image. When you build it into a Docker image, that's done.

The process is like this:

• Fork Rocket.Chat to your github project
• Install your new livechat package to the project via NPM, e.g. meteor npm install my-livechat.
• Change the build path in packages/rocketchat-livechat/plugin from rocket.chat/livechat in node_modules to your A package in node_modules
• Start the project by meteor npm start or build it into a Docker image, but I would suggest to run it first to verify the Livechat installation.

[sctEdwin]

Thankyou! So to sum up, I have to do the following?

1. fork Rocket.Chat.Live.Chat in GitHub, edit it the way I want

2. yarn build to get build.tar.gz

3. npm publish the build directory(after unzip)

4. fork Rocket.Chat in GitHub, start it as a npm project(npm init)

5. replace "@rocket.chat/livechat" with<my livechat node module published in step 4> in package.json https://github.com/RocketChat/Rocket.Chat/blob/develop/package.json

6. edit the build.sh(as I am using Linux) https://github.com/RocketChat/Rocket.Chat/blob/develop/packages/rocketchat-livechat/plugin/build.sh cp -a $ROOT/node_modules/\@rocket.chat/livechat/build/. ./ to cp -a $ROOT/node_modules/<my livechat node module published in step 4>

7. build the npm project into a docker image https://docs.docker.com/language/nodejs/build-images/

[dtvu94]

Most of them are correct but:

1. Remember to change package name
2. You don't need to care the file build.tar.gz. You need to pay attention to how to publish a npm package and how webpack build file to /build folder.
3. Fork it, start with 2 commands: meteor npm install, meteor npm start.

[sctEdwin]

Thank you very much for the feedback. I did tried changing the name in package.json in LiveChat Client and was able to npm publish it, but it seems the source still pointing to the original repo ("repository" field in package.json is referencing the original url?), thus the changes made inside src/ folder in my own folk is not reflected into the new npm package.

I am new to npm publish so I dont really know whether I should change the "repository" field too.

I also found that in Rocket.Chat's package.json, "devDependencies" for "@Rocket.Chat/livechat"can be set to point to a git repo, so instead of using npm publish, can I use this method to point it to my fork in git hub? (because @Rocket.Chat/livechat is a scoped pacakage, I will also have to change the package name to something else that does not currently exist in the npm registry too in additional to the git url)

https://medium.com/@jonchurch/use-github-branch-as-dependency-in-package-json5eb609c81f1a#:~:text=To%20npm%20install%20a%20public,repo%23branch%2Dname%20format.&text=Run%20npm%20install%20and%20npm,into%20your%20%2Fnode_modules%2F%20folder.

As for the docker image build, this is the all I can find.(I believe it is still valid?) https://gist.github.com/sampaiodiego/d4cf97cf0729b664a8d550dbea50900b#gistcomment-2994069

By the way, is there really no other way to overwrite the layer of the default livechat installed in Rocket.Chat image without rebuilding docker image?

It seems rebuilding the entire Rocket.Chat docker image just to include two minor changes in livechat src folder appear to be overkill. Besides, whenever Rocket.Chat did an upgrades, I will also have to rebuild the docker image again every time just to keep up with the versions?

[RayBenedict]

When testing the LiveChat with localhost:5000/widget-demo.html I get 404 error.how can I be able to test the api for hiding the chat button?