Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(webchat): port webchat injection #239

Merged
merged 185 commits into from
Nov 12, 2021
Merged

feat(webchat): port webchat injection #239

merged 185 commits into from
Nov 12, 2021

Conversation

samuelmasse
Copy link
Contributor

WIP

This PR ports the webchat injection using a <script> tag.

Closes DEV-1884

@samuelmasse samuelmasse changed the title feat(webchat): port webchat injecting feat(webchat): port webchat injection Nov 11, 2021
@samuelmasse
Copy link
Contributor Author

To try this out you can compile the bundle with cd packages/inject and yarn build. This will produce a bundle in the dist directory. You can then start a media server on this directory and paste the address in the the example.html file.

For example with a server started on port 8080, and a messaging server started on port 3100 with a existing clientId of 8b6b25ae-e47d-455e-8057-356dae07fff2 this would be the minimal configuration.

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Example website</h1>
    <p>This website integrates the botpress webchat!</p>
  </body>

  <script src="http://localhost:8080/inject.js"></script>
  <script>
    window.botpressWebChat.init({
      hostUrl: 'http://localhost:8080',
      messagingUrl: 'http://localhost:3100',
      clientId: '8b6b25ae-e47d-455e-8057-356dae07fff2'
    })
  </script>
</html>

hostUrl should be the same base url that you get the inject.js script from. messagingUrl is simply the the url of the messaging server. To test this locally you will need to have a messaging server running as standalone from botpress (using the MESSAGING_ENDPOINT variable) with sockets enabled (ENABLE_EXPERIMENTAL_SOCKETS=true on the messaging server)

@samuelmasse
Copy link
Contributor Author

@spg @medmouine @michaelmass I made a @botpress/webchat-inject package that contains all the assets that need to be on the CDN to be able to inject the webchat. You can inject the webchat using a script tag <script src="<cdnUrl>/inject.js"></script> and this script will then create an iframe that points to <cdnUrl>/index.html. This page will then load the actual webchat code (src.ac01f432.js) and css. The inject.js script also adds the inject.css styling on the original page to apply some styling on the widget.

I think with this you should have everything you need to setup the CDN and get a working webchat for sending and receiving text. This port isn't finished yet, and so many features and settings don't work correctly for now. Any content type other than text won't work at the moment, but this should be fixed very soon. Anyways it's enough to test the websocket and setting up the CDN

@samuelmasse samuelmasse marked this pull request as ready for review November 12, 2021 20:56
@samuelmasse
Copy link
Contributor Author

@laurentlp Should be good enough for a first pre-release

@samuelmasse samuelmasse changed the base branch from sm-webchat-display to master November 12, 2021 22:29
@samuelmasse samuelmasse merged commit 1edb476 into master Nov 12, 2021
@samuelmasse samuelmasse deleted the sm-webchat-inject branch November 12, 2021 22:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants