# Botpress Webchat: Embed a Chatbot on WordPress, Wix or Webflow

> How to embed Botpress webchat: publish first, head for Studio, before </body> for Botpress Viber, WordPress, Wix and Webflow steps, and plan gates.

_Source: https://professionalstoolkit.com/articles/botpress-website-chatbot — The Professional's Toolkit · updated November 2026_

---

Putting a Botpress chatbot on a website takes one published bot and one embed snippet, and the placement depends on the builder. A Studio bot's code goes in the head of your site's HTML. A Botpress Viber agent's snippet goes just before the closing body tag. Webchat is included on every plan, Free too, so the install itself costs nothing extra. What the plans change is volume, branding and control: Free stops at 100 conversations, white-label webchat and a custom footer start on Plus, and locking the widget to your own domains starts on Team. Once the snippet is live, bot changes reach visitors without touching it again.


**1 snippet** — One embed snippet per site; bot changes go live without editing it (webchat v5 needs an updated one).



- **Every plan** — Webchat channel included, Free too
- **Plus+** — White-label webchat and custom footer
- **Team+** — Allowed Origins to lock trusted domains


## Publish first, then copy the code

Every install route in the Botpress docs starts from the same condition: **a published bot**. An unpublished draft has nothing for the widget to load, so the snippet comes after the first publish, not before. Studio and Botpress Viber both lead there, by different paths. In Studio you build in the visual editor, publish, and the Dashboard generates the embed code under the Webchat channel. In Botpress Viber you describe the agent to the builder, test it in Preview, then publish and embed. New Botpress Viber agents start with Webchat already enabled, and publishing needs at least one channel switched on.

One detail trips people up. In Botpress Viber, Preview runs your working version, while the hosted Webchat and every connected channel run the published version. Edits you see in Preview are not on your site until you publish again. Studio's Share button works the other way around: it opens a hosted Webchat that is already the production bot, so conversations there are saved like any visitor's. Use it for a quick look on a phone, not for long test sessions.

Testing still has a cost. Botpress's pricing FAQ counts emulator conversations toward your conversation quota, the same as live ones, and the AI operations in those tests draw on your AI usage too, so heavy pre-launch testing on Free eats into its 100 conversations. When a bot reaches its usage limits, the widget on your site shows a Quota exceeded screen instead of the chat, which is the last thing a launch-week visitor should meet. Our guide to [what the Free plan covers](/articles/is-botpress-free) explains what the Free limit includes and what happens when a workspace runs out.


> 💡 **Publish before you copy:** The widget loads only a published bot. In Botpress Viber, Preview edits reach the site only after you publish again.


## Where the snippet goes, by builder

**Head or body depends on the builder.** For a Studio bot, the webchat quick start says to paste the embed code into the head section of your site's HTML.[1] For a Botpress Viber agent, the publish-and-share docs place the snippet before the closing body tag.[2] Do not swap them. Each builder's page assumes its own placement, so follow the one for the builder you used.

Botpress Viber also asks you to pick a mode. Toggle mode shows the familiar chat bubble in the corner of every page. Embedded mode renders the chat inside an element on your page, with bp-embedded-webchat as the default element ID, and the corner bubble disappears. Choose Toggle if you want the proactive bubble later, because that feature needs a toggle. The bot can also be shared by link if you only need a hosted chat page, for example in an email or a support article.

The snippet is not permanent, though. **Webchat v5**, released in September 2026, added rate limiting, an IPv4 and CIDR blocklist and custom translation overrides, and it needs an updated website snippet.[3] Sites still running webchat v1 stopped working after December 2025 unless they migrated. Feature levels matter too: conversation history needs v3.6 or later, and notification sounds need v3.3 or later. If a setting you switched on in the Dashboard does nothing on the live site, check the snippet version before anything else.

## WordPress, Wix and Webflow installs

Botpress's webchat docs carry dedicated guides for three website builders. Each one assumes the bot is published and the embed code is copied from the Dashboard first. The catch usually sits on the website side, not in Botpress: each builder needs a plan of its own that allows plugins or custom scripts. Check that before you start, because a site plan without script access leaves nowhere to paste the code. The steps below follow those guides.

- **WordPress:** install the WPCode plugin, add an HTML snippet containing the embed code, set the location to Site Wide Body and switch it to Active. A self-hosted WordPress site needs a hosting plan that allows plugins.
- **Wix:** you need a Wix plan that allows custom scripts and a domain connected to the site. Paste the code under Settings, Advanced Settings, Custom Code, apply it to All pages, choose Load code once and place it at Body - start.
- **Webflow:** you need a Webflow plan that allows custom scripts. Paste the code into Head code under Custom code.

Wix has two more routes: drop the chat into an HTML element for tighter control over where it sits, or embed the shareable Studio link as a site. Shopify is a different case. On the Botpress Hub, Shopify appears as integrations that connect the bot to store data, built by the Botpress Growth Team, Conversy and Simply Great Bots. Those integrations run on the Botpress side and feed the bot what it knows. The webchat guides themselves cover WordPress, Wix and Webflow.


> ⚠ **Old snippets stop or lag:** Webchat v1 stopped working after December 2025, and webchat v5 (September 2026) needs an updated website snippet before its new settings apply.


## Styling, branding and what each plan adds

Basic styling is free on every plan and lives in the Dashboard. The default primary color is #3276EA, the default font is Inter, and any Google Font can replace it. The Light theme and the Glass header are the defaults. Corner radius runs from 0.5 to 4, and CSS classes cover anything the settings miss. You can also toggle file uploads and message feedback, and feedback shows up in Analytics. Since October 2026 the widget also offers Ukrainian and Russian interface languages, detected from the visitor's locale with English as the fallback.

Branding is where plans differ. The footer field controls the Powered by Botpress line, and setting it to empty removes it, but a custom footer needs Plus. White-label webchat is listed from Plus upward on the pricing page,[4] where Plus costs $150 a month billed annually or $189 a month billed monthly. Botpress says its white-labeling covers custom UI, domain and branding, and removes the Botpress watermark from webchat.

If visitors should see only your brand, Free is out. Volume is the other difference. Free stops at 100 conversations, with no packs, top-ups or overages. Plus includes 250 conversations a month and Team 1,500 a month, and once a month's usage reaches 95% of the quota, a pack of 100 extra conversations is added automatically, then keeps billing each month until you remove it in billing settings.

| Webchat feature | Free | Plus | Team |
|---|---|---|---|
| Webchat channel | Included | Included | Included |
| White-label and custom footer | No | Included | Included |
| Proactive message bubble | No | Included | Included |
| Allowed Origins (trusted domains) | No | No | Included |

The proactive bubble pops a short message such as an offer of help, after a delay or after the visitor goes idle. It is a screen element only, so it does not count toward quotas and opens no conversation by itself. It needs the toggle bubble or a custom toggle; it does not work when the chat is embedded inside a page element. **Allowed Origins** whitelists the domains that may load your bot. The default is All Origins, so on Free and Plus nothing in Botpress stops your snippet from loading on someone else's site.


> 💡 **Prefer local storage for returning users:** Session storage creates a new user each time the chat reopens, and each separate anonymous session in which the visitor sends at least two messages counts as its own conversation.


## Controlling the widget from your own code

Past the snippet, the widget takes instructions from the page. The methods window.botpress.open, close and toggle let a button or menu link control the chat. The widget can open on every visit, or only when the URL carries a hash you choose, so a link ending in #ask can drop a visitor straight into the conversation. A custom HTML element can replace the default bubble, which needs webchat v3.3 and is not available in element-embedded mode.

Logged-in visitors are where this pays off. Your site can pass the user's name, email and other fields with updateUser, and the bot reads them through the Get User Data card, so it never asks for details you already hold. The page can also listen to events through window.botpress.on, including ready, opened, closed and message. A Conversation Started trigger lets the bot speak before the visitor types, for a welcome line or to alert a live agent. That trigger does not fire in the emulator, so test it on a published page.

Storage is a quiet cost lever. Local storage keeps the user and conversation across visits; session storage creates a new user each time the chat reopens. Botpress bills per conversation, and **separate anonymous sessions each count**, so session storage can turn one returning visitor into several billable conversations once each session reaches two messages from the visitor. What the bot answers from also matters: see how to feed it pages and files in our [knowledge base guide](/articles/botpress-knowledge-base).

React apps have their own route. The @botpress/webchat package needs React 18 or later, a published bot and the bot's Client ID from Dashboard, Webchat, Features, Advanced Settings. Dashboard styling does not reach it; you style through the configuration prop instead. You can use the ready-made Webchat component or build from parts with the useWebchat hook, but not both together.


## FAQ

**Does the proactive bubble use up Botpress conversations?**

No. Botpress describes the proactive bubble as a screen element only: it does not count toward quotas and is not tied to a conversation. It needs Plus or higher.

**Can the bot know who a logged-in visitor is?**

Yes. Your site passes the name, email and other fields with updateUser, and the bot reads them through the Get User Data card.

**What does a visitor see when the Botpress bot hits its limit?**

Webchat shows a Quota exceeded screen when the bot has reached its usage limits, and a Bot is blocked screen when the bot has been temporarily paused.

**Does Dashboard styling apply to the React library?**

No. The @botpress/webchat component ignores the Dashboard configuration; you pass colors, fonts, footer and other options through its configuration prop.


## Before the widget greets real visitors

Run through four checks on launch day. Confirm the bot is published and the snippet sits where your builder's docs put it, head for Studio and before the closing body tag for Botpress Viber. Confirm the snippet is current enough for the features you switched on, since v5 needs a new one. Decide storage on purpose, local for returning users and session only if you accept more conversations. Then decide who else may load the bot: on Team, Allowed Origins closes that gap, and agencies running one bot per client site should read our [guide for agencies](/articles/botpress-for-agencies) on white-label and separate workspaces.



## Sources

[1] Botpress documentation: webchat quickstart — https://botpress.com/docs/webchat/get-started/quick-start (2026-11)
[2] Botpress documentation: Publish and share — https://botpress.com/docs/viber/deploy/publish-and-share (2026-11)
[3] Botpress documentation: Changelog — https://botpress.com/docs/changelog (2026-11)
[4] Botpress pricing — https://botpress.com/pricing (2026-11)
[5] Botpress Refund Policy — https://botpress.com/legal/refund-policy
[6] G2: Botpress reviews — https://ai.g2.com/product/botpress