Botpress Webchat: How to Add Your Chatbot to a Website

You have a bot that answers well in the Emulator. Now it needs to be on the actual site, in the corner, opening when someone clicks it. This is the shortest step in the whole build and it is also where people lose an afternoon, usually to one of three things: an unpublished bot, an embed pasted in the wrong place, or styling changes that never went live.

Botpress calls this layer Webchat, and describes it as a custom frontend for your bot that they built. There is more than one way to install it, and the right one depends less on your skill level than on what your site lets you edit.

What do you need before you embed a Botpress bot?

Two things, per Botpress's own quickstart: a published bot, and enough familiarity with HTML to paste a snippet into the right part of a page. If the bot is not published, the widget has nothing to talk to.

Publishing happens in Studio, from the Publish button in the upper right. It pushes every change since your last publish and creates a new version at that moment, which is worth knowing because you will publish again after you finish styling.

How do you get the Botpress embed code?

Open your bot's workspace in the dashboard, select the bot you want to embed, then in the left sidebar go to Webchat and choose Deploy Settings. The embed code is displayed there, ready to copy.

1. Publish the bot — In Studio, select Publish in the upper right. An unpublished bot cannot serve a live widget.
2. Open Webchat, then Deploy Settings — From your bot's workspace in the dashboard, select the bot, then find Webchat in the left sidebar and open Deploy Settings.
3. Copy the embed code — Botpress displays it there. It is two script tags: one loading the Botpress injection library from their CDN, and one carrying your bot-specific configuration, which is marked with a defer attribute.
4. Paste it into the head of your page — Botpress's instruction is to place the code in the head section of your HTML document. On a site with a shared layout or template, paste it once into that shared head rather than per page.
5. Load the page and click the bubble — The widget should appear. If it does not, check the bot is published and that the scripts really landed inside head rather than somewhere the browser ignored.
6. Style it, then publish the configuration — Botpress suggests styling the widget to match the rest of your interface as the follow-up step. Appearance changes need Publish Configuration in the upper right before they reach visitors.

What are the other ways to install Botpress Webchat?

Botpress documents four routes, and the embed script is only the simplest one. The others exist because pasting into head is not always available to you.

• Embed script: the script tag method above. The default choice for a site whose HTML you control.
• React library: build a Webchat component directly into a React application, for full control inside your own codebase.
• Embed in an element: render the chat inside a specific element on the page rather than as a floating bubble.
• CMS integrations: documented paths for WordPress, Wix and Webflow, each with their own instructions.

The embed-in-an-element option is underused. A chat that lives inside a support page section, rather than following people around as a bubble, often gets better questions because visitors arrive at it deliberately.

How do you add a Botpress chatbot to WordPress?

Botpress documents a route through a code-snippet plugin rather than theme editing. You copy the embed code from Webchat and then Deploy Settings as usual, and inject it with the plugin.

1. Copy the embed code — From your bot's dashboard, Webchat and then Deploy Settings.
2. Install the WPCode plugin — In your WordPress dashboard go to Plugins, search for the WPCode plugin, and select Install Now.
3. Create a new snippet — Select Code Snippets in the left navigation, choose Add New, then Add Your Custom Code (New Snippet).
4. Paste the embed as an HTML snippet — Choose HTML Snippet and paste your Botpress embed code into the code field.
5. Set it to run site wide in the body — In the Insertion section, set the location to the site-wide body option so the snippet loads on every page. Check the exact label in the plugin, it differs slightly between versions.
6. Activate and save — Toggle the snippet to Active and select Save Snippet. The bot is then live on your WordPress site.

Wix and Webflow have their own documented instructions in the same section. Check those rather than adapting the WordPress steps, since each builder exposes custom code differently.

What can you change about how the Botpress widget looks?

More than most people realise, and all of it from the Style Configurator rather than CSS. Botpress documents defaults for each field, which is useful because it tells you what a visitor sees if you change nothing.

Two of those defaults are worth changing before launch. A display name of Bot and an avatar that is a single letter both read as unfinished, and visitors treat an unfinished widget as one nobody is monitoring.

Deploy Settings also controls behaviour, not just looks. You choose between a toggle and embedding in a specific element, supply the container's HTML ID when embedding, and pick the launcher, either the default chat bubble or a custom element with its own selector. A custom footer is listed as requiring the Plus plan.

Around here is where the honest comparison belongs. Getting a widget onto a page is genuinely easy in Botpress. The work that follows, keeping the bot's knowledge current, deciding what it escalates, watching what it gets wrong, is the part that never ends. That is the part we set out to change at Sistava: you hire an AI Employee for the role, tell it in plain English what to handle, and it sets itself up and asks you when it is unsure.

Whichever route you take, do one thing before you announce it: read a week of real conversations. The gap between a bot that works in testing and one that works on your traffic is always in there somewhere.

Sources

• Botpress documentation, Webchat Quickstart
• Botpress documentation, Introduction to Webchat
• Botpress documentation, Configure Webchat
• Botpress documentation, WordPress integration
• Botpress documentation, Studio Quickstart
• Botpress documentation, Emulator