Changing import Chatbot from Location

[deano120]

Hey there - I've run through the following

Copy GitHub repo to within the parent Flowise repo location on my machine. CD'd to the new folder and run through the 'yarn install' and 'yarn build'.

Everything shows as ok - no errors seen.

I restart the 'yarn start' command from the parent Flowise repo folder and load up the service. All ok at this point.

I navigate to one of my flow and copy the embed scrip. Adjust the following on my reference HTML page:

<script type="module"> import Chatbot from "./web.js"; Chatbot.initFull({ chatflowid: "###################", //obviously I've hashed out the real ID apiHost: "http://localhost:4321", //yes I've also customised the port which this runs on }); </script>

Nothing happens - I reload the page and the popup doesn't show nor does the icon.
I revert the import chatbot from to the provided link on the flowise UI and it works ok.

I want to use the embed so I can customise the chat bubble and change some of the branding elements at the bottom.

Any help would be appreciated. Thanks.

[eugeneyjy]

If you open the Developer tools in your browser, you should see "Access to script file://dist/web.js from origin 'null' has been blocked by CORS policy..." or something similar.
There are two ways, one is host the web.js script together with your HTML page, with http-server or live-server. Not sure how you are hosting your page right now, and I am not expert on that too, so it's hard to give advise to that. I get to this solution by searching how to solve the CORS policy.
The other way is that you could fork this repository, make changes, and push it. After that, you could access the web.js file using the free jsdelivr service.
Hope it's not too late and this helps.