Web Integration

The standard way to add Webnav.ai to any website.

Installation

Add the script tag before </body>:

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

Compatibility

• All modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile browsers (iOS Safari, Chrome for Android)
• Single Page Applications (React, Vue, Angular, Next.js, Nuxt, etc.)

SPA Support

Webnav.ai automatically detects route changes in SPAs. No additional configuration is needed for:

• Hash-based routing (/#/page)
• History API routing (/page)

Static Sites

Works out of the box with static site generators:

• VitePress / VuePress
• Hugo
• Jekyll
• Astro
• Docusaurus

WordPress

Add the script to your theme's footer.php or use a plugin that allows custom scripts in the footer:

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

Content Security Policy

If your site uses CSP headers, allow the widget domain in two directives — that's all:

script-src 'self' https://widget.webnav.ai;
connect-src 'self' https://widget.webnav.ai;

The widget loads all of its resources (script, stylesheet, Markdown renderer) from widget.webnav.ai only — no third-party CDNs. Styles are injected via constructed stylesheets (adoptedStyleSheets), which are exempt from style-src by spec.

Legacy browsers only

If adoptedStyleSheets is unavailable (pre-2021 browsers), the widget falls back to a <link> stylesheet, which additionally requires:

style-src 'self' https://widget.webnav.ai;

All evergreen browsers use the primary path and do not need this.

If the chat bubble doesn't show up, walk through Troubleshooting.