# Embed *** You can easily add the chat widget to your website. Just copy the provided widget script and paste it anywhere between the `` and `` tags of your HTML file.
## Widget Setup The following video shows how to inject the widget script into any webpage. {% embed url="" %} ## Using Specific Version You can specify the version of flowise-embed's `web.js` to use. For full list of versions: ```html ``` {% hint style="warning" %} In Flowise **v2.1.0**, we have modified the way streaming works. If your Flowise version is lower than that, you might find your embedded chatbot not able to receive messages. You can either update Flowise to **v2.1.0** and above Or, if for some reason you prefer not to update Flowise, you can specify the latest **v1.x.x** version of [Flowise-Embed](https://www.npmjs.com/package/flowise-embed?activeTab=versions). Last maintained `web.js` version is **v1.3.14.** For instance: `https://cdn.jsdelivr.net/npm/flowise-embed@1.3.14/dist/web.js` {% endhint %} ## Chatflow Config You can pass `chatflowConfig` JSON object to override existing configuration. This is the same as [https://github.com/FlowiseAI/FlowiseDocs/blob/main/en/using-flowise/broken-reference/README.md](https://github.com/FlowiseAI/FlowiseDocs/blob/main/en/using-flowise/broken-reference/README.md "mention") in API. ```html ``` ## Observer Config This allows you to execute code in parent based upon signal observations within the chatbot. ```html ``` ## Theme You can change the full appearance of the embedded chatbot and enable functionalities like tooltips, disclaimers, custom welcome messages, and more using the theme property. This allows you to deeply customize the look and feel of the widget, including: * **Button:** Position, size, color, icon, drag-and-drop behavior, and automatic opening. * **Tooltip:** Visibility, message text, background color, text color, and font size. * **Disclaimer:** Title, message, colors for text, buttons, and background, including a blurred overlay option. * **Chat Window:** Title, agent/user message display, welcome/error messages, background color/image, dimensions, font size, starter prompts, HTML rendering, message styling (colors, avatars), text input behavior (placeholder, colors, character limits, sounds), feedback options, date/time display, and footer customization. * **Custom CSS:** Directly inject CSS code for even finer control over the appearance, overriding default styles as needed ([see the instructions guide below](#custom-css-modification)) ```html ``` **Note:** See full [configuration list](https://github.com/FlowiseAI/FlowiseChatEmbed#configuration) ## Custom Code Modification To modify the full source code of embedded chat widget, follow these steps: 1. Fork the [Flowise Chat Embed](https://github.com/FlowiseAI/FlowiseChatEmbed) repository 2. Run `yarn install` to install the necessary dependencies 3. Then you can make any code changes 4. Run `yarn build` to pick up the changes 5. Push changes to the forked repository 6. You can then use your custom `web.js` as embedded chat like so: Replace `username` to your Github username, and `forked-repo` to your forked repo. 
<script type="module">
      import Chatbot from "https://cdn.jsdelivr.net/gh/username/forked-repo/dist/web.js"
      Chatbot.init({
          chatflowid: "your-chatflowid-here",
          apiHost: "your-apihost-here",
      })
</script>
```html ``` {% hint style="info" %} An alternative to jsdelivr is unpkg. Here is an example: 
https://unpkg.com/flowise-embed/dist/web.js
{% endhint %} ## Custom CSS Modification You can now directly add custom CSS to style your embedded chat widget, eliminating the need for custom `web.js` files (requires v2.0.8 or later). This allows you to: * Give each embedded chatbot a unique look and feel * Use the official `web.js`—no more custom builds or hosting are needed for styling * Update styles instantly Here's how to use it: ```html ``` ## CORS When using embedded chat widget, there's chance that you might face CORS issue like: {% hint style="danger" %} Access to fetch at 'https\://\/api/v1/prediction/' from origin 'https\://\' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. {% endhint %} To fix it, specify the following environment variables: ``` CORS_ORIGINS=* IFRAME_ORIGINS=* ``` For example, if you are using `npx flowise start` ``` npx flowise start --CORS_ORIGINS=* --IFRAME_ORIGINS=* ``` If using Docker, place the env variables inside `Flowise/docker/.env` If using local Git clone, place the env variables inside `Flowise/packages/server/.env` ## Video Tutorials These two videos will teach you how to embed the Flowise widget into a website. {% embed url="" %} {% embed url="" %}