Embed Code

Add Webnav.ai to any website with a single <script> tag.

Basic Usage

<script src="https://widget.webnav.ai/widget/chat-widget.js" data-base-url="https://yoursite.com"></script>

Place this before the closing </body> tag. The chat bubble will appear in the bottom-right corner.

Prerequisite: AI model configuration

The chat bubble only appears after an AI model is configured for your account. Go to Dashboard → AI Model, choose a provider (OpenAI-compatible / Anthropic Claude / Google Gemini), and save your own API key. Without a verified model configuration the widget stays hidden on your site.

Full Example with All Attributes

<script
	src="https://widget.webnav.ai/widget/chat-widget.js"
	data-server="https://widget.webnav.ai"
	data-base-url="https://yoursite.com"
	data-theme="dark"
	data-lang="en"
	data-logo="https://yoursite.com/logo.png"
	data-mode="bubble"
	data-exclude="/admin,/login,/dashboard"></script>

Attribute Reference

Attribute	Description	Default
data-server	Webnav.ai server URL	https://widget.webnav.ai
data-base-url	Your website URL (used for crawling)	Current page origin
data-theme	Color theme: light or dark	light
data-lang	Language: zh, en, zht, ja	Auto-detected
data-logo	Custom logo URL for the widget header	Webnav.ai default logo
data-mode	Display mode: bubble	bubble
data-exclude	Comma-separated routes to skip	—

See Widget Attributes for the complete reference.

Self-Hosted Server

If you host Webnav.ai yourself, point data-server to your instance:

<script src="https://your-server.com/widget/chat-widget.js" data-server="https://your-server.com" data-base-url="https://yoursite.com"></script>