Quick Start 4 / 4

Embed Widget on Your Website

Add the VNBOT chatbot to any website with just a small script snippet.

~2 minutes
WATCH VIDEO BEFORE YOU START

Video guide coming soon

Steps6 steps

1

Open Channels

From the Dashboard, select "Channels" (Pages) in the left navigation bar.

2

Select "Embed on Website"

Click "Connect channel" in the top-right corner, then choose "Embed on Website" from the platform list.

3

Name your channel and generate the embed code

Give this website channel a name (e.g. "ABC Store"), then click "Generate embed code". The system creates a script snippet unique to your website.

4

Copy the script

Click "Copy" to copy the full script to your clipboard. The script is unique to your website channel and contains your embed token.

html
<script src="https://vnbot.vn/webchat.js" data-token="YOUR_TOKEN"></script>
5

Paste the script into your website

Paste the script once into the closing </body> tag of your root layout. The exact location depends on your platform:

To restrict which pages the widget appears on: click the ✏️ icon on the channel card, open the "Behavior" tab, and configure "Show only on" or "Hide on". Supports wildcard * for all sub-pages (e.g. /blog/*).
WordPressAppearance → Theme Editor → footer.php → paste before </body>
ShopifyOnline Store → Themes → Edit code → theme.liquid → paste before </body>
WixSettings → Custom Code → Add Code → select "Body - end"
SquarespaceSettings → Advanced → Code Injection → Footer
WebflowProject Settings → Custom Code → Footer Code → Publish again
Next.jsPaste into app/layout.tsx (root layout) or pages/_app.tsx
Vue / Nuxt / AngularPaste into the root layout file of your app, similar to Next.js
Static HTMLPaste into each .html file before </body>. If your server supports SSI, use <!--#include file="widget.html" --> to avoid repetition
6

Verify the widget appears

Reload your website. The chat widget appears in the bottom-right corner (or left if configured). Click it to send a test message.

Was this page helpful?